ajax 的简单实例以及高级用法

最新推荐文章于 2024-10-06 16:18:14 发布

莫名其喵

最新推荐文章于 2024-10-06 16:18:14 发布

阅读量5.9k

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/qq_33238935/article/details/77568606

版权

jquery 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

jquery ajax实例教程和一些高级用法

jquery ajax的调用方式：jquery.ajax(url,[settings])，jquery ajax常用参数：红色标记参数几乎每个ajax请求都会用到这几个参数，本文将介绍更多jquery ajax实例，后面会有一些ajax高级用法

query ajax的调用方式：jquery.ajax(url,[settings])，因为实际使用过程中经常配置的并不多，所以这里并没有列出所有参数，甚至部分参数默认值，就是最佳实践，根本没必要去自己定义，除非有特殊需求，如果需要所有参数，可以查看jquery api

| jquery ajax常用参数：

$.ajax({
    url: "test.html",  //ajax请求地址
    cache: false,//(默认: true,dataType为script和jsonp时默认为false)设置为 false 将不缓存此页面，建议使用默认
    type:"GET",//请求方式 "POST" 或 "GET"， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
    dataType:"json",    //根据返回数据类型可以有这些类型可选：xml html script json jsonp text
    //发送到服务器的数据，可以直接传对象{a:0,b:1}，如果是get请求会自动拼接到url后面，如：&a=0&b=1
    //如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 "&foo=bar1&foo=bar2"。
    data:{},
    //发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。这是一个 Ajax 事件。如果返回false可以取消本次ajax请求。
    beforeSend:function(xhr){
        //this 默认为调用本次AJAX请求时传递的options参数
    },
    //context这个对象用于设置ajax相关回调函数的上下文。也就是说，让回调函数内this指向这个对象（如果不设定这个参数，那么this就指向调用本次AJAX请求时传递的options参数）。
    //比如指定一个DOM元素作为context参数，这样就设置了success回调函数的上下文为这个DOM元素。
    context: document.body,
    //请求成功后的回调函数
    success: function(data,textStatus){
        //this 调用本次AJAX请求时传递的options参数 ,如果设置context来改变了this，那这里的this就是改变过的
    },
    //请求失败时调用此函数。有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。
    //如果发生了错误，错误信息（第二个参数）除了得到null之外，还可能是"timeout", "error", "notmodified" 和 "parsererror"。
    error：function(XMLHttpRequest, textStatus, errorThrown){
        // 通常 textStatus 和 errorThrown 之中
        // 只有一个会包含信息
        // this 调用本次AJAX请求时传递的options参数
    },
    //请求完成后回调函数 (请求成功或失败之后均调用)。参数： XMLHttpRequest 对象和一个描述成功请求类型的字符串
    complete:function(XMLHttpRequest, textStatus) {
        //this 调用本次AJAX请求时传递的options参数
    },
    //一组数值的HTTP代码和函数对象，当响应时调用了相应的代码。例如，如果响应状态是404，将触发以下警报：
    statusCode:{
        404:function(){
            alert('404，页面不存在');
        }
    }
});

| jquery ajax发送一个get请求，数据返回为json

　　实战中最常用到的ajax方式获取数据，一般用get方式　　

$.ajax({
    type: "GET",
    url: "page.php",
    dataType:'json',
    data: {id:1001},//也可以是字符串链接"id=1001"，建议用对象
    success: function(data){
        console.log("返回的数据: " + data );
    }
});

| jquery ajax发送一个post请求，数据返回为json

　　实战中最常用到的ajax方式提交数据，提交一般用post方式

$.ajax({
    type: "POST",
    url: "page.php",
    dataType:'json',
    data: {name:"张三",sex:1},//也可以是字符串链接"name=张三&sex=1"，建议用对象
    success: function(data){
        //实际操作的时候，返回的json对象中可能会有成功错误的判断标记，所以可能也需要判断一下
        console.log("返回的数据: " + data );
    }
});

| jquery ajax发送一个get请求，简写方式：

　　其实就是对ajax的二次封装，大家可以对照ajax的底层api

//$.get("请求url","发送的数据对象","成功回调","返回数据类型");
$.get("test.cgi",{ name: "John", time: "2pm" },
   function(data){
      alert("Data Loaded: " + data);
},'json');

| jquery ajax发送一个POST请求，简写方式：

　　其实就是对ajax的二次封装，大家可以对照ajax的底层api

//$.post("请求url","发送的数据对象","成功回调","返回数据类型");
$.post("test.cgi",{ name: "John", time: "2pm" },
   function(data){
      alert("Data Loaded: " + data);
},'json');

| jquery ajax经常用到的一个工具函数

ajax提交数据的时候，通常是提交一个表单，所以，序列化表单数据就非常有用，如：$("form").serialize()

//完整实例如：（表单html结构不在写）
    $("form").on("submit",function(){
        var url = this.action;   //可以直接取到表单的action
        var formData = $(this).serialize();
        $.post(url,formData,
            function(data){
                //返回成功，可以做一个其他事情
                console.log(data);
            },'json');

        //阻止表单默认提交行为
        return false
    })

| jquery ajax请求成功回调改写成连写方式.done

ajax请求成功通常是使用回调的方式处理返回数据，其实jquery中也可以使用连写方式而不是回调的方式。如下：

//该参数可以是一个函数或一个函数的数组。当延迟成功时，done中函数被调用。回调执行是依照他们添加的顺序。
//一旦deferred.done()返回延迟对象，延迟对象的其它方法也可以链接到了这里，包括增加.done()方法。当延迟解决，web前端开发
$.get("ajax.php").done(function() {
    //延迟成功
    alert("ok");
}).fail(function(){
    //延迟失败;
    alert("$.get failed!");
});

jquery ajax连写方式还有一个二合一的方法.then，.then还可以写多个，后面的.then可以使用前面.then中的结果

$.get("test.php").then(
    function(){
        //延迟成功
    },
    function(){
        //延迟失败;
    }
);

jquery ajax还有一个jQuery.when方法（当两个或者几个方法都执行正确才执行后面的）

提供一种方法来执行一个或多个对象的回调函数，延迟对象通常表示异步事件。如果单一延迟传递给jQuery.when ，它是通过这个方法和延迟对象附加的其他方法可访问绑定的回调函数返回的，如defered.then 。
当延迟得到解决或者拒绝，通常的代码创建了原来的延迟，适当的回调将被调用。如下：

//两个全部请求成功才会执行回调  此api在jquery api的 “工具”一栏下面有详细介绍
$.when($.ajax("p1.php"), $.ajax("p2.php"))
  .then(function(){
        //两个全部请求成功
    }, function(){
        //任何一个执行失败
    });

jquery ajax的一个实战例子，ajax请求服务集中到service.js中

这里把jquery ajax请求写成一个服务，比如service.js中有如下代码：

//每次都要重复的ajax代码和一些数据处理，全局提示都可以写到这里面了，当然这里面不要有业务逻辑，只做些数据处理和部分提示
function myService(){
    return {
        query: function (data) {
            var _data = data||{};
            return $.get("test.php",_data).then(
                    function(){//延迟成功},
                    function(){//延迟失败;}
                );
        },
        submit: function (data) {
            var _data = data||{};
            return $.post("test.php",_data).then(
                    function(){},
                    function(){}
                );
        }
    }
}
//当然这里面的 代码应该做模块化处理，而不是直接向这样声明一个全局的myService

jquery ajax的一个实战例子，ajax 直接获取一个js文件

4.$.getScript()：jQuery提供了此方法来直接加载js文件，与加载一个HTML片段一样简单方便，并且不需要对JavaScript文件进行处理，JavaScript文件会自动执行。

$(function () {
        $("#send").click(function () {
            $.getScript("test.js");
        });
})
    
    1
2
3
4
5

使用回调函数：

   $.getScript("jquery.color.js", function () {
            $("#go").click(function () {
               //do something ...
            });
    
    1
2
3
4

.getJSON()该方法用于加载JSON文件，用法与 .getScript()相同

 $.getJSON('test.json', function(data) {

            });
    
    1
2
3

使用JSONP形式的回调函数来加载其他网站的JSON数据(越域出理)。例如：

   $(function () {
        $('#send').click(function() {
            $.getJSON("https://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?",
                    function(data){
                        $.each(data.items, function( i,item ){
                            $("<img class='para'/> ").attr("src", item.media.m).appendTo("#resText");
                            if ( i == 3 ) {
                                return false;
                            }
                        });
                    }
            );
        })
    })
    /**
     *  JSONP(JSON with Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过JavaScript Callback的形式实现跨域访问
     *  上述的url地址并不能请求到数据，仅用作说明。
     * */
    
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

6.$.load()

语法：load(url,data,function(response,status,xhr))
url 规定要将请求发送到哪个 URL。
data    可选。规定连同请求发送到服务器的数据。
function(response,status,xhr)   
可选。规定当请求完成时运行的函数。
额外的参数：
response - 包含来自请求的结果数据
status - 包含请求的状态（"success", "notmodified", "error", "timeout" 或 "parsererror"）
xhr - 包含 XMLHttpRequest 对象



实例：
  1。加载 feeds.html 文件内容：
      $("#feeds").load("feeds.html");
  2。与上面的实例类似，但是以 POST 形式发送附加参数并在成功时显示信息：
      $("#feeds").load("feeds.php", {limit: 25}, function(){
  alert("The last 25 entries in the feed have been loaded");
});

 3。加载文章侧边栏导航部分至一个无序列表：
HTML 代码：
<b>jQuery Links:</b>
<ul id="links"></ul>


$("#links").load("/Main_Page #p-Getting-Started li");