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中，可以不写分号。
转载于:https://www.cnblogs.com/PinkPink/p/8385690.html
相关资源：jquery.upload.js