jQuery_ajax调用的几种方法

一、$.ajax()的基础使用

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

<button id="btn">发送请求</button> <script src="/js/jquery.min.js"></script> <script> var params = {name: 'wangwu', age: 300} $('#btn').on('click', function () {     $.ajax({         // 请求方式         type: 'post',         // 请求地址         url: '/user',         //在发送请求前调用         beforeSend: function () {                     alert('发送请求前调用')                     //如果用户操作不合规范或密码不正确等情况，则请求不会被发送                     //return false;         },         // 向服务器端发送的请求参数         // name=zhangsan&age=100         //1 json对线格式传参         // data: {         //  name: 'zhangsan',         //  age: 100         // },         //2 指定json格式类型要用json字符串格式传参         data: JSON.stringify(params),         //2 指定参数的格式类型         contentType: 'application/json',                   // 请求成功以后函数被调用         success: function (response) {             // response为服务器端返回的数据             // 方法内部会自动将json字符串转换为json对象             console.log(response);         }     }) });

 

二、serialize()方法

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

<form id="form">     <input type="text" name="username">     <input type="password" name="password">     <input type="submit" value="提交"> </form> <script src="/js/jquery.min.js"></script> <script type="text/javascript"> $('#form').on('submit', function () {     // 将表单内容拼接成字符串类型的参数     // var params = $('#form').serialize();     // console.log(params)     serializeObject($(this));     //禁止页面自动提交刷新     return false; });   // 封装serialize方法，将表单中用户输入的内容转换为对象类型 function serializeObject (obj) {     // 处理结果对象     var result = {};     // [{name: 'username', value: '用户输入的内容'}, {name: 'password', value: '123456'}]     var params = obj.serializeArray();       // 循环数组 将数组转换为对象类型     $.each(params, function (index, value) {         result[value.name] = value.value;     })     // 将处理的结果返回到函数外部     return result; }

三、$.ajax发送JSON请求

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<button id="btn">发送请求</button> <script src="/jquery.min.js"></script> <script>     // 点2 需要事先定义     function fn (response) {         console.log(response)     }     $('#btn').on('click', function () {         $.ajax({             //要有jsonp这个接口名             url: 'http://localhost:3000/jsonp',             // 点1 jsonp默认有参数名，但可以进行自定义名称，即向服务器端传递函数名字的参数名称             //jsonp: 'cb',                           // 点2 回调函数声明为自己先前定义的函数（一般不用，用sucess就好）             //jsonpCallback: 'fn',                           // 表示现在要发送的是jsonp请求             dataType: 'jsonp',                           // 点2 原写法             success: function (response) {                 console.log(response)             }         })     });

　

四、$.get、$.post的使用

?

1 2 3 4 5

$('#btn').on('click', function () {         $.get('/base', 'name=zhangsan&age=30', function (response) {             console.log(response)         }) });

 

?

1 2 3 4 5

$('#btn').on('click', function () {         $.post('/base', function (response) {             console.log(response)         }) });