diff --git "a/17 \344\276\257\351\224\237\351\223\226/\347\254\224\350\256\260/26-12-1AJAX.Markdown" "b/17 \344\276\257\351\224\237\351\223\226/\347\254\224\350\256\260/26-12-1AJAX.Markdown" new file mode 100644 index 0000000000000000000000000000000000000000..943872aab424b6c997c41b4cc4d4cbeb6849b802 --- /dev/null +++ "b/17 \344\276\257\351\224\237\351\223\226/\347\254\224\350\256\260/26-12-1AJAX.Markdown" @@ -0,0 +1,96 @@ +# 二,jQuery Ajax + +#### 1、$.get();执行get请求方式的ajax + +|参数 | 说明| +|---|---| +|url | 必选参数,表示被加载的页面地址| +|data| 可选参数,表示发送到服务器的数据| +|fn | 可选参数,表示请求成功后的回调函数| +|type| 可选参数,表示服务器返回的内容格式| + + +```js + $('button').eq(0).click( + function () { + $.get('data.json',{a:100,b:200},function (data) { + console.log(data); + },'json'); + } + ) +``` + + + +#### 2、$.post();执行post请求方式的ajax + +```js + $('button').eq(1).click( + function () { + $.post('data.json',{a:100,b:200},function (data) { + console.log(data); + },'json'); + } + ) +``` + + + +#### 3、$.getJSON() +|参数 | 说明| +|---|---| +|url |必需,请求地址| +|data |可选,发送的数据参数| +|fn |可选,发送成功后的回调函数| + +* 通过Ajax获取服务器中JSON格式的数据 +* “全局方法”,直接定义在jQuery对象(即“$”)下的方法 + +```js + $('button').eq(2).click( + function () { + $.getJSON('data.json',function (data) { + console.log(data); + }) + } + ) +``` + + + +#### 4、$.getScript();动态加载JavaScript的方法 + +* 通过AJAX来获取并运行一个外部JavaScript文件 +* 异步跨域加载JavaScript文件,可避免提前加载JavaScript文件 +* 减少服务器和客户端的负 担,加快页面加载速度 + +```js + $('button').eq(3).click( + function () { + $.getScript('test.js'); + } + ) +``` + +#### 5、$.ajax();核心方法,所有的其他方法都是在内部使用此方法 +|参数 | 说明| +|---|---| + |method |数据的提交方式:get和post| + |      url | 数据的提交路劲| + |      async | 是否支持异步刷新,默认是true| + |      data | 需要提交的数据| + |      dataType | 服务器返回数据的类型,例如xml,String,Json等| +|      success | 请求成功后的回调函数| +| +       error 请求失败后的回调函数 +* 以上方法用ajax()都能实现 + +```js + $('button').eq(4).click( + function () { + $.ajax({ + url:'data.json', + type:'get', + data:{a:100,b:200}, + success:(data) => console.log(data), + error:()=> console.log('请求失败') \ No newline at end of file