jQuery ajax - ajax() 方法
Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML)
通过在后台与服务器进行少量数据交换,
Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
jQuery的ajax的实现,底层是通过XmlHttpRequest来完成异步交互的。jQuery中用于完成ajax请求的方法共有6个,这6个方法分为三层:
最底层的是 $.ajax()方法,该方法内部调用了XmlHttpRequest来完成异步交互。
中间层的方法有 $.get() 、$.post() 、load()方法,他们的实现,是调用了 $.ajax()方法。
最高层的是 $.getJSON() 与 $.getScript()方法 ,他们的内部调用了中间层的方法。
详细:
1.jQuery.ajax(opotions)
该方法是jQuery底层 AJAX 实现, $.ajax() 返回其创建的 XmlHttpRequest对象。大多数情况下不用直接操作该函数的,除非需要操作不常用的选项,以获得更多的灵活性。
$.ajax()它的参数为一个可选的对象。该对象具有较多的属性,常用的参数介绍如下:(所有的参数都是可选的)
type: 请求的提交的方式。默认的是 "GET"。
url(String): 请求的目标地址。
dataType: 服务器返回值的类型。常用的值有:
"xml" :返回XML文档,可用jQuery处理
"html":返回纯文本html信息,所包含的<script/>标签会在插入dom时执行
"script":返回纯文本javaScript代码
"json":返回json格式
async(boolean):默认设置下,所有请求为异步请求,如果需要发送同步请求,请将此选项设置为false. 注意:同步请求将锁住浏览器,用户其他操作必须等待其请求完成才可以执行
........... 等等..
注意.ajax有一个特点:
当后台程序代码出现错误的时候,可以帮助我们进行响应。
2.load(url,data,callback) (很少使用)
$(selector).load(URL,data,callback);
load() 方法从服务器加载数据,并把返回的数据放入被选元素中。
默认使用了get方式提交-但是传参数的时候转换成了post
特点:专门加载远程的html代码
参数:
url(String): 待装入html网页网址
data(map): (可选)待发送key/value参数
callback(function): (可选) 载入成功时回调函数
3.jQuery.get(url,data,callback,type)
jQuery.get(url,[data],[callback],[type])
这是一个简单的get请求功能以取代复杂的 $.ajax,请求成功时可调用回调函数,如果需要在出错时执行函数,请使用 $.ajax
参数:
url(String): 发送请求地址
data(map): (可选)待发送key/value参数
callback(function): (可选) 载入成功时回调函数
type(String): (可选)返回内容格式,xml,html,script,json,text,_default
注意:get请求提交会乱码
get方法可以替代.ajax()和.getJSON()和.getScript()
4.jQuery.post(url,data,callback,type)
jQuery.post(url,[data],[callback],[type])
这是一个简单的post请求功能以取代复杂的 $.ajax,请求成功时可调用回调函数,如果需要在出错时执行函数,请使用 $.ajax
参数:
url(String): 发送请求地址
data(map): (可选)待发送key/value参数
callback(function): (可选) 载入成功时回调函数
type(String): (可选)返回内容格式,xml,html,script,json,text,_default
注意:post方法和get方法提交有什么区别呢?
post可以传递中文,post隐式提交,在地址栏不显示请求的参数信息
get中文会乱码,get显式提交,在地址上显示了请求的参数信息。
因此表单中有中文的话,就用post提交,这样安全些
post请求会比get要慢一些,因为底层有一个数据封装的步骤,把表单里的数据封装到一个对象里面传到后台,后台自动去解析。
get请求传递的参数的数据量,比post小很多。。。。
get只有几k,几百k,post有几兆,几百兆
因此表单上传文件必须用post比较好
总结:post 传中文 安全(隐式) 传递的数据量大 慢 (推荐使用!)
get 中文乱码 不安全 传递的数据量小 快
5.jQuery.getJSON(url,data,callback)
jQuery.getJSON(url,[data],[callback])
以get方式提交一个请求,返回的必须是一个json
参数:
url(String): 发送请求的地址
data(map): (可选)待发送key/value参数 --这个参数就是要你在后台接收的哟
callback(function): (可选) 载入成功时回调函数
6.jQuery.getScript(url,callback)
jQuery.getScript(url,[callback])
以get方式提交一个请求,返回的必须是一个script
参数:
url(String): 待载入js文件地址
callback(function): (可选) 载入成功时回调函数
重点学习 .ajax方法 和 .post方法
ajax一个参数
post四个参数
先学习.ajax方法
$.ajax({ 各式各样的属性 }) // $.ajax({})
常用的参数:
$.ajax({
1. url:'jsp/接口/servlet'
2. type:'post/get,
3. dataType:'json/script/xml'
4. function(data,type){
//对ajax返回的原始数据进行预处理
return data //返回处理后的数据
}
5. success:function(){}:请求成功后的回调函数。参数:由服务器返回,并根据dataType参数进行处理后的数据
6. error:function(){} :请求失败的回调函数。
7.function(data,textStatus){
//data 可能是xmlDoc,jsonObj,html,text等等...
this; //调用本次ajax请求是传递的options参数
}
});
eg:保存数据到服务器,成功时显示信息
$.ajax({
type:'post',
url:'xxxxxx',
data:'agentId=' + agentId, //data要发送到后台的数据
success:function(msg){
alert("DATA Saved:"+msg);
}
});
完整列子:.$ajax 验证账号是否是正确的
//前台
<head>
<script type="text/javascript" src="js/jquery.sj"></script>
</script type="text/java">
$(function(){
$("#loginName").bind("blur",function(){ //先得到输入框的对象,做一个失去焦点的事件
var v_loginName=$(this).val()
$.ajax({
type:'post',
url:'checkName',
// data:'loginName='+$(this).val(), //向后台传入参数, $(this).val得到当前对象账号的值
data:'loginName='+v_loginName, //或者是在前面定义一个变量
dataType:'json',
success:function(data){ //当响应一切正常时执行success的回调方法
//alert(data)
if(!data){
$("#message").text("对不起,这个账号已经使用请更换。")
$("#message").attr("color","red")
}else{
$("#message").text("恭喜你这个账号可以使用")
$("#message").attr("color","green")
}
}, //这里的逗号说明success的结束
error:function(){ //当程序出现错误后执行error的回调方法
//alert("错误,请稍后再试")
$("#message").text("错误啦,请稍后再试!")
}
})
})
})
</script>
</head>
<body>
账号 <input type="text" name="loginName" id="loginName">
</body>
//后台
1.写一个checkName方法 url:'checkName',
2.后台接收这个参数loginName data:'loginName='+v_loginName
3.一些处理
4.返回 success:function(data){ 前台接收
重点学习 .ajax方法 和 .post方法
学习.post方法
.post一共有四个参数
jQuery.post(url,[data],[callback],[type])
url, 参数,回调方法, 类型
eg:
$.post('<@spring.url "/agent/getSubPackageList" />', //第一个参数url
{agentId : row.agentId,}, //第二个参数data
function(dat) { //第三个参数 回调函数
if (dat.succ) {
$('#subPackageIds').prev('span').hide();
$('#subPackageIds').next('.textbox').show();
$('#subPackageIds').combobox({
url : '<@spring.url "/agent/getSubPackage" />?packageId='+data.packageId,
value : dat.entity
});
} else
$.messager.alert('错误', data.errorObj.message, 'error');
},
'json'); //第四个参数 type
jQuery.each-----数组与对象的访问
jQuery.each(obj,callback)
通用遍历方法,可用于遍历对象和数组
不同于jquery 对象的$().each()方法,此方法可以用于任何对象。
回调函数拥有2个参数:.each(obj,callback)
第一个为对象的成员或者是数组的索引,第二个为对应变量或内容
如果需要退出each循环,可以使用回调函数返回false,其他的返回值将被忽略。
eg:遍历数组,同时使用元素索引和内容
$.each([0,1,2],functiion(i,n){ //i表示当前循环的索引 n表示节点元素,也就是被循环的索引值
alert("~~~~~~~~"+i+"----------"+n);
});
eg:遍历对象,同时使用成员名称和变量内容
$.each({name:"李银河","lang":java},function(i,n){
alert("名称:"+i+"值"+n)
});
通常写在回调函数里面
function(data){
$.each(data,function(index,node){ //对从服务器返回回来的数据,进行遍历....
})
}
eg:
form2Json: function(id) {
var arr = $("#" + id).serializeArray()
var jsonStr = "";
jsonStr += '{';
$.each(arr, function(i, field) { //i表示当前循环的索引 field表示节点元素,也就是被循环的 索引值!
if (field.value) {
jsonStr += '"' + field.name + '":"' + field.value + '",'
}
});
在js中,可以不写分号。