jQuery中的Ajax

终有一日同风气，扶摇直上九万里，愿你以渺小启程，以伟大结束

jQuery中的Ajax

jQuery不仅对JavaScript语言进行了封装，也对Ajax异步交互进行了封装。

jQuery提供六个Ajax操作的方法：

• load()方法
• $.get()方法和$.post()方法
• $.ajax()方法
• $.getScript()方法和$.getJSON()方法

jQuery还提供了以下几种事件：

• ajaxStart()和ajaxStop()事件
• ajaxComplete()事件、ajaxSend()事件、ajaxError()事件和ajaxSuccess()事件

load()方法

load()方法是jQuery中最为简单的Ajax方法

$element.load(url,[data],[callback]);

• url：请求HTML页面的url地址。
• data：发送给服务器端key/value形式的数据内容
• callback：Ajax请求完成时的回调函数

注意：load()方法的请求方式由是否传递参数决定。即传递参数，为GET方法；不传递参数，为POST方式。

<button>按钮</button>

    <script src="jquery-3.5.1.js"></script>

    <script>
        $('button').click(function(){
            /*
                load(url,data,callback)方法
                  参数
                    url - 异步请求的地址
                    data - 异步请求的数据
                      如果省略请求数据的话，当前的请求方法为GET
                      如果发生请求数据的话，当前的请求方式为POST
                    callback - 异步请求成功后的回调函数
                  返回值 - 服务器端的响应结果
                  注意 - 自动将返回结果写入到目标元素中
            */
           $('button').load('sever1.json',{name : '张无忌'},function(){
               console.log('异步请求成功……')
           });
        });
    </script>

$.get()方法和$.post()方法

$.get()方法使用GET方式向服务器端发送异步请求。

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

• url：请求HTML页面的url地址。
• data：发送给服务器端key/value形式的数据内容
• callback：Ajax请求完成时的回调函数
• type：设置返回数据内容的格式。值为xml、html、script、json、text和_default

$.post()方法使用POST方式向服务器端发送异步请求。

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

• url：请求HTML页面的url地址。
• data：发送给服务器端key/value形式的数据内容
• callback：Ajax请求完成时的回调函数
• type：设置返回数据内容的格式。值为xml、html、script、json、text和_default

代码：

<button>按钮</button>

    <script src="jquery-3.5.1.js"></script>
    <script>
        $('button').click(function(){
            /*
                get(url,data,cllback,type)方法 - 请求方式为GET
                  参数
                    url - 异步请求的地址
                    data - 异步请求的数据
                    callback - 异步请求成功后的回调函数
                    type - 设置返回数据内容的格式。值为xml、html、script、json、text等
            */
           $.get('sever2.json',{name:'张无忌'},function(response){
               console.log(response);
           },'json');

            /*
            post(url,data,cllback,type)方法 - 请求方式为POST
              参数
                url - 异步请求的地址
                data - 异步请求的数据
                callback - 异步请求成功后的回调函数
                type - 设置返回数据内容的格式。值为xml、html、script、json、text等
        */
        });
    </script>

$.ajax()方法

$.ajax()方法是jQuery中最为底层的Ajax方法

$.ajax(url,[settings]);

• url：请求html页面的url地址
• settings：key/value形式的请求设置，所有参数都是可选的

<button>按钮</button>

<script src="jquery-3.5.1.js"></script>

<script>
    $('button').click(function(){
        /*
             $.ajax(url,[settings])方法
             参数
              url - 请求地址
              settings - 设置异步请求的参数
             settings选项 - 对象类型
               type - 设置请求方法
               data - 发送给服务器端的请求数据
               dataType - 服务器端响应结果的格式
               success - 异步请求成功后的回调函数
                 function(data,textStatus,jqXHR){}
                   data - 表示服务器端响应的结果
                   textStatus - 表示服务器端当前的状态
                   jqXHR - Ajax中的核心对象
        * */
        $.ajax('sever1.json',{
            type : 'get',
            dataType : 'text',
            success : function(data){
                console.log(data);
            }
        });
    });
</script>

效果：

$.getScript()方法

$.getScript()方法是jQuery中用于动态加载指定JavaScript文件

$.getScript(url,[callback]);

• url：请求JavaScript文件中的url地址
• callback：指定JavaScript文件成功加载后的回调函数

代码：

<button>按钮</button>

<script src="jquery-3.5.1.js"></script>

<script>
    $('button').click(function(){
        //动态加载指定JavaScript文件，并且执行
        $.getScript('server3.js',function(){
            console.log(data);
            eval(data);
        });
    });
</script>

$.getJSON()方法

$.getJSON()方法是jQuery中用于动态加载指定JSON格式的数据内容

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

• url：请求JavaScript文件的url地址
• data：发送给服务器端的key/value形式的数据内容
• callback：指定JavaScript文件成功加载后的回调函数

代码：

<button>按钮</button>

<script src="jquery-3.5.1.js"></script>

<script>
    $('button').click(function(){
        //getJSON()方法的请求方式为GET
        $.getJSON('sever1.json',{name : '张无忌'},function(data){
            console.log(data);
            eval(data);
        });
    });
</script>

效果：

异步提交表单

异步提交表单的步骤

1. 获取表单及所有表单组件对应的数据值
2. 将所有表单组件对应的数据值拼成特定格式的字符串或是JSON格式数据
3. 通过Ajax异步交互方式提交表单

代码：

   <form action="#">
        <input type="text" id="name">
        <input type="submit">
    </form>

    <script src="jquery-3.5.1.js"></script>
    <script>
        $('from').bind('submit',function(event){
            //阻止默认行为
            event.preventDefault();
            //1.获取表单组件的数据内容
            var name = $('#name').val();
            //2.构建发送给服务器端的数据格式
            var data = 'name=' + name;
            //3.通过异步交互提交表单
            $.post('server5.json',data,function(response){
                console.log(response);
            });
        });
    </script>

表单序列化

• serialize()方法：将表单对应的数据值序列化为指定格式的字符串内容
• serializeArray()方法：将表单组件对应的数据值序列化为JSON格式的数据内容