参考文档
六个Ajax操作方法
load()方法$.get()方法$.post()方法$.ajax()方法$.getScript()方法$.getJSON(方法六种事件
ajaxStart()
ajaxStop()事件
ajaxComplete()事件
ajaxSend()事件
ajaxError()事件
ajaxSuccess()事件
load()方法的请求方式由是否传递参数决定。即传递参数，为GET方式;不传递参数，为POST方式。
load(url,data,callback）方法 参数 url - 异步请求的地址data - 异步请求的数据 如果省略请求数据的话，当前的请求方式为GET如果发送请求数据的话，当前的请求方式为POST callback - 异步请求成功后的回调函数 返回值 - 服务器响应的结果注意 - 自动将返回结果写入到目标元素中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button>按钮</button> <script src="js/js/jquery-1.12.4.js"></script> <script> $('button').click(function () { $('button').load('./data./server2.txt',{name:'张无忌'},function () { console.log('异步请求成功'); }) }) </script> </body> </html>
$.ajax(方法是jQuery中最为底层的Ajax方法
$.ajax(url,[settings]） 参数 url-异步请求的地址settings - 设置异步请求的参数 settings选项 - 对象类型 type - 设置请求方式data - 发送给服务器端的请求数据dataType - 服务器端响应结果的格式success - 异步请求成功后的回调函数 function(data,textStatus,jqXHR){} data - 表示服务器端响应的结果textStatus - 表示服务器端当前的状态jqXHR - Ajax中的核心对象 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button>按钮</button> <script src="js/js/jquery-1.12.4.js"></script> <script> $('button').click(function () { $.ajax('data./server2.json', { type : 'get', dataType : 'text', success:function (data) { console.log(data); } }) }) </script> </body> </html>
$.getScript方法是jQuery中用于动态加载指定JavaScript文件 – 目的就是提升js文件加载的速度
$.getScript(url,[callback]); url请求 JavaScript文件的ul地址。 callback 指定JavaScript文件成功加载后的回调函数。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button>按钮</button> <script src="js/js/jquery-1.12.4.js"></script> <script> $('button').click(function () { // 动态加载指定JavaScript文件，并且执行 $.getScript('./data/server3.js',function (data) { console.log(data); eval(data) }) }) </script> </body> </html>
$.getJSON()方法是jQuery中用于动态加载指定JSON格式的数据内容 – 请求只能用GET
$.getJSON(url,[data],[callback]); url 请求JavaScript文件的url地址。 data 发送给服务器端的key/value形式的数据内容。 callback 指定JavaScript文件成功加载后的回调函数。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button>按钮</button> <script src="js/js/jquery-1.12.4.js"></script> <script> $('button').click(function () { // getJSON（）方法的请求方式为GET $.getJSON('./data/server2.json',{name:"张无忌"},function (data) { console.log(data) }) }) </script> </body> </html>