ajax jquery操作ajax

最新推荐文章于 2024-03-13 07:00:00 发布

原创最新推荐文章于 2024-03-13 07:00:00 发布 · 1.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #ajax #javascript

本文详细介绍了jQuery中对Ajax的三层封装，包括底层的$.ajax方法，以及上层的简化方法如.load(), .get(), .post()和$.getScript(), $.getJSON()。通过实例演示展示了如何使用这些方法进行定制化请求并处理响应结果。

一、jquery操作ajax

1、jquery的方法

        jQuery 对 Ajax 做了大量的封装，我们使用起来也较为方便，不需要去考虑浏览器兼容性。对于封装的方式， jQuery 采用了三层封装：

        最底层的封装方法为：$.ajax()

        而通过这层封装了第二层有三种方法：.load()、$.get()和$.post()，

        最高层是$.getScript()和$.getJSON()方法。

2、底层

$.ajax()是所有 ajax 方法中最底层的方法，所有其他方法都是基于$.ajax()方法的封装。JQuery封装的底层Ajax操作函数，更加侧重于定制化选项，让开发人员控制的细节方面更加精确。

$.ajax({
    url：请求路径，
    type:“请求方式”，
    dataType:"服务器返回的数据类型"，
    data:{"name":value,} ，    //提交的数据
    success:function(res,status,xhr){   //请求成功调用的函数
          res  //请求成功结果
    },
    error:function(){}//请求失败调用的函数
})

$.ajax({
    url：请求路径，
    type:“请求方式”，
    dataType:"服务器返回的数据类型"，
    data:{"name":value,} ，    //提交的数据
}).then(function(res){})

$.ajax({
    url：请求路径，
    type:“请求方式”，
    dataType:"服务器返回的数据类型"，
    data:{"name":value,} ，    //提交的数据
}).done(function(res){}).fail(function(){})

$.ajax({
    url：请求路径，
    type:“请求方式”，
    dataType:"服务器返回的数据类型"，
    data:{"name":value,} ，    //提交的数据
}).always(function(res){})

3、第二层

        load(参数1，参数2，参数3)

        $.post(url,[data],[callback],[type])
        $.get(url,[data],[callback],[type])

        url: 必需待载入页面的URL地址

        data: 可选待发送 Key/value 参数。

        callback: 可选载入成功时回调函数。

         type: 可选返回内容格式，xml, html, script, json, text, _default。

$(".box").load("./model/1.html ul", function (res, status, xhr) {
      //   console.log(res);
      //   console.log(status); //状态码对应的字符串
      console.log(xhr); //XMLHttpRequest对象
      console.log(xhr.status); //XMLHttpRequest对象
    });
$.get(
        "./php/checkUser.php",
        { nickname: val },
        function (res) {
          console.log(res);
        },
        "text"
      );
$.ajax({
        url: "./php/checkUser.php",
        type: "post",
        data: { nickname: v },
        dataType: "text",
        success: function (res) {
          console.log(res);
        },
      });

4、第三层

        $.getScript(url,callback)

        $.getJSON(url,[data],callback)

        url参数为请求加载json格式文件的服务器地址，

        可选项data参数为请求时发送的数据，

        callback参数为数据请求成功后，执行的回调函数