标签:
/* * 0. $.ajax() * $(‘#btn‘).click(function(){ var data = $(‘input[name=go]‘).val(); $.ajax({ url: "ajax.php", type:"POST", data:{‘data‘ : data}, success: function(msg){ if(msg){ $(‘input[name=back]‘).val(‘走服务器返回的输入值为:‘+msg); } } }); }); */ /* * 1. jQueryload(url, [data], [callback]) * url:待装入 HTML 网页网址。 * data:发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。 * callback:载入成功时回调函数。 */ $(‘#btn1‘).click(function(){ // 加载外部js $(‘#div1‘).load("js/test.js") }); $(‘#btn2‘).click(function(){ // 加载外部html,并筛选class="product"显示 $(‘#div2‘).load("js/test.html .product",function(){ console.log("完成") },‘html‘) }); /* * 2. jQuery.post(url, [data], [callback], [type]) * url: 发送请求地址。 * data: 待发送 Key/value 参数,{ name:"LYX", time:"2pm" } * callback: 发送成功时回调函数。 * responseText: 请求返回的内容 * textStatus: 请求状态:success,error,notmodified,timeout * XMLHTTPRequest: XMLHTTPRequest对象 * type: 返回内容格式. * xml, html, script, json, text, _default. * "js/test.html .product" :表示筛选出product类传输,load()方法中,有参数会默认post,没有参数默认get */ $(‘#btn3‘).click(function(){ var data = $(‘#txt3‘).val(); $.post( ‘post.php‘, {‘data‘ : data}, function(data,textStatus){ console.log("textStatus的值为: "+textStatus); $(‘#div3>span‘).html("post服务器返回的data: "+data) console.log(data) }) }); /* * 3. jQuery.get(url, [data], [callback], [type]) * url: 发送请求地址。 * data: 待发送 Key/value 参数。 * callback: 发送成功时回调函数。 * data: 请求返回的内容 * textStatus: 请求状态:success,error,notmodified,timeout * type: 返回内容格式. * xml, html, script, json, text, _default. * 注意返回格式:HTML,XML,JSON */ $(‘#btn4‘).click(function(){ var data = $(‘#txt4‘).val(); $.get( ‘get.php‘, {‘data‘ : data}, function(data,textStatus){ console.log("textStatus的值为: "+textStatus); $(‘#div4>span‘).html("get服务器返回的data: "+data) console.log(data) }) }); /* * 4. getJSON获取json文件 */ $(‘#btn5‘).click(function(){ $.getJSON(‘address.json‘,function(data){ $.each(data, function(index,elem) { $(‘#div5>span‘).append(‘<b>‘+elem[‘name‘]+‘ </b>‘); }); }) }); /* * 5. $.getScript() 可用于延迟加载script * 测试失败 */ $(‘#btn6‘).click(function(){ $.getScript("http://www.imooc.com/data/sport_f.js",function(){ //抓取外部的script }) }); /* * 6. $.ajax()底层的Ajax实现,以上的方法都能用$.ajax()实现 */ $.ajax({ type:"get", url:"", async:true }); /* * 7. serialize()方法 序列化你的表单 */ $(‘#btn7‘).click(function(){ $.get( ‘get.php‘, //{data:$(‘#username‘).val()}, $(‘#form1‘).serialize(), function(data,textStatus){ console.log( $(‘#form1‘).serialize() ) //序列化表单 username=11111&content=aaaaa console.log( $(‘#form1‘).serializeArray()) //数组化表单 [{name:username,value:11111},{name:content,value:aaaaa}] } ) }); /* * 8. ajax中的全局函数 * $().ajaxComplete() * $().ajaxStart() * $().ajaxStop() * $().ajaxError() * $().ajaxSend() * $().ajaxSuccess() * 如果不想ajax被全局影响,设置global:false */ $(‘#btn8‘).click(function(){ $.ajax({ url: "post.php", type:"POST", data:{‘data‘ : $(‘#txt8‘).val()}, beforeSend:function(){ $(‘#div8>span‘).append(‘<b>‘+‘1.beforeSend‘+‘ </b>‘); }, success: function(data){ $(‘#div8>span‘).append(‘<b>‘+‘2.success:‘+data+‘ </b>‘); }, error:function(){ $(‘#div8>span‘).append(‘<b>‘+‘3.error‘+‘ </b>‘); }, complete:function(){ $(‘#div8>span‘).append(‘<b>‘+‘4.complete‘+‘ </b>‘); } }); }); /* * 9. 统一设置ajax的属性 */ $.ajaxSetup({ url: "/xmlhttp/", global: false, type: "POST" });
标签:
原文地址:http://www.cnblogs.com/nemoro1928/p/5424454.html