ajax学习笔记3-jQuery实现ajax(大拇指向上)

jQuery实现ajax:

jQuery本身提供了一个ajax方法,jQuery.ajax([settings])

type:类型,”POST”或”GET”(默认)

url:发送请求的地址

data:是一个对象,连同请求发送到服务器的数据

dataType:预期服务器返回的数据类型,如果不指定,jQuery将自动根据HTTP包MIME信息来智能判断,一般采用json格式,可以设置为“json”

success:是一个方法,请求成功后的回调函数。传入返回后的数据,以及包含成功代码的字符串。

error:是一个方法,请求失败时调用此函数。传入XMLHttpRequest对象。

实现代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Demo</title>

<style>

body,input,button,select,h1{

font-size:26px;

line-height:1.8;

}

</style>

</head>

<body>

<h1>员工查询</h1>

<label>请输入员工编号</label>

<input type="text" id="keyword" />

<button id="search">查询</button>

<p id="searchResult"></p>

<h1>员工创建</h1>

<label>请输入员工姓名:</label>

<input type="text" id="staffName" /><br/>

<label>请输入员工编号:</label>

<input type="text" id="staffNumber" /><br/>

<label>请输入员工性别:

<select id="staffSex">

<option>男</option>

<option>女</option>

</select>

</label><br/>

<label>请输入员工职位:</label>

<input type="text" id="staffJob" /><br/>

<button id="save">保存</button>

<p id="createResult"></p>

<script src="jquery-3.1.1.js"></script>

<script>

$(document).ready(function(){

$("#search").click(function(){

$.ajax({

type:"GET",

url:"service1.php?number="+$("#keyword").val(),

dataType:"json",

success:function(data){

if(data.success){  //如果json对象的success为true,则返回msg

$("#searchResult").html(data.msg);

}else{

$("#searchResult").html("出现错误:"+data.msg);

}

},

error:function(jqXHR){

alert("发生错误:"+jqXHR.status);

}

});

});

$("#save").click(function(){

$.ajax({

type:"POST",

url:"service1.php",

dataType:"json",

data:{

name:$("#staffName").val(),

number:$("#staffNumber").val(),

sex:$("#staffSex").val(),

job:$("#staffJob").val()

},

success:function(data){

if(data.success){  //如果json对象的success为true,则返回msg

$("#createResult").html(data.msg);

}else{

$("#createResult").html("出现错误:"+data.msg);

}

},

error:function(jqXHR){

alert("发生错误:"+jqXHR.status);

}

});

});

});

</script>

</body>

</html>

jQuery可以自动添加Content-Type。

时间: 2024-10-23 15:39:46

ajax学习笔记3-jQuery实现ajax(大拇指向上)的相关文章

ajax学习笔记2-JSON形式返回(大拇指向上)

JSON: JavaScript对象标记法,JavaScript Object Notation 存储和交换文本信息的语法,类似XML.采用键值对的方式来组织,易于阅读与编写,同时易于机器解析和生成. 任何语言都可以解析json JSON与XML比较: JSON的长度更短:读写速度更快:可以使用JavaScript内建的方法直接进行解析,转换成JavaScript对象,方便. JSON语法: 数据书写格式:名称/值对 名称/值对组合中的名称写在前面(在双引号中),值对写在后面(双引号中),中间用

Ajax学习笔记之一----------第一个Ajax Demo[转载]

原文地址: http://www.cnblogs.com/pjx412/archive/2011/05/04/2037014.html 一.核心推动力:XMLHttpRequest对象XMLHttpRequest对象在javascript 中创建并使用,客户端可以仅仅从服务器端获取它需要的信息:通过与DOM和CSS的 结合,就可以实现局部刷新的效果:同时还可以通过XMLHttpRequest对象异步提交 信息,将用户的输入在后台提交到服务器所在而无需刷新这个页面. XMLHttpRequest催

jQuery中的Ajax学习笔记

前段时间学习了<锋利的jQuery第六章>jQuery与Ajax应用,现做如下笔记: 我们先来了解一下,什么是Ajax呢?Ajax全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),它并不是指一种单一的技术,而是有机地利用了一系列交互式网页应用相关的技术所形成的结合体.简短地说,在不重载整个页面的情况下,Ajax通过后台加载数据,并在网页上进行显示. 我们来简要回顾一下Ajax.早在1998年,微软就引入了一个ActiveX控件,从而能

Ajax学习笔记(三)

三.jQuery库详解 1.使用jQuery之后,javascript操作的不再是HTML元素对应的DOM对象,而是包装DOM对象的jQuery对象.js通过调用jQuery对象的方法来改变它所包装的DOM对象的属性,从而实现动态更新HTML页面. 由此可见,使用jQuery动态更新HTML页面只需以下两个步骤: (1)获取jQuery对象.jQuery对象通常是DOM对象的包装 (2)调用jQuery对象的方法来改变自身.当jQuery对象被改变时,jQuery包装的DOM对象随之改变,HTM

Ajax学习笔记

Java软件开发中,后台中我们可以通过各种框架,像SSH等进行对代码的封装,方便我们对Java代码的编写,例如,Struts,SpringMVC对从前台到action的流程进行封装控制,使我们只需要进行一些简单配置就可以实现:而spring进行了对各种对象的管理进行封装,提供了AOP编程的方式,大大方便了我们:而hibernate和IBatis则是对JDBC代码进行封装,不需要我们每次都写那些重复而繁杂的JDBC代码. 前台呢,对于页面一些效果,验证等,我们都是通过JavaScript语言进行完

[ajax 学习笔记] json数据格式

之前写过ajax传送数据可以用普通文本和XML两种格式.这里记一下json数据格式. json:javascript object notation. 之前分析过,用文本和XML传送数据各有优劣.而json可以轻松地将javascript对象转换成可以随时发送的数据. 一个json数据例子: var people = { "programmers": [ { "firstName": "Brett", "lastName":&

jQuery整理笔记八----jQuery的Ajax

Ajax,我一直读的是"阿贾克斯",据当时大学老师讲该读音出处是根据当年风靡欧洲的荷兰足球俱乐部阿贾克斯的名字来的,我觉得说法挺靠谱的. jQuery封装了Ajax的交互过程,用户不需要考虑XMLHttpRequest对象的兼容性问题以及使用XMLHttpRequest建立连接.发送请求.发送方式.接收方式等细节,利用jQuery定义 的几个简单方法,即可轻松实现客户端与服务端异步通信的问题,从而帮助开发人员从繁琐的技术细节中解脱出来,专心于业务层开发工作. 最初始的JavaScrip

Ajax学习笔记(二)

二.prototype库详解 1.prototype库的使用 //导入下载好的prototype.js文件 <script type="text/javascript" src="prototype.js"></script> //在自己的js中直接使用Prototype对象 <script type="text/javascript"> document.writeln("Prototype库的版本

[ajax 学习笔记] ajax 的服务器响应

在上一篇[ajax 学习笔记] ajax初试中,简单了解了一下ajax. 我是参考AJAX详解.chm学习的,资源已上传.参考链接:Ajax 专题 今天又学习了ajax中关于服务器响应的一些知识. ajax中服务器的响应是通过响应函数将服务器返回的数据呈现到页面的.服务器的响应体现在服务器响应回调函数中. 在上一篇的例子中,响应函数为: function updatePage(){ if(xmlHttp.readyState == 4){ //http就绪状态 if(xmlHttp.status

ajax学习笔记1

ajax是什么? ajax即“Asynchronous Javascript + XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术.能够快速的从服务器获得所需数据和内容,实现局部刷新让用户能够更好的浏览网站.在没有ajax的时候,网页提交表单必须进行等待和刷新,这时用户必须等待服务器的响应,用户在当前页面不能做其他事情.自从有了ajax,用户在提交表单的时候不需要等待,可以浏览该页的其它东西,表单提交之后服务器能很快的返回所需的数据和网页,网页无需刷新. a