jQuery数据交互ajax

一、load方法:

 <script src="./jquery-3.2.1.js" charset="utf-8"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#content').load('./dat.html', function (data, status) {
                     if (status == 'error') {
                        $('#content').text('404,你要的页面去火星啦')
                    }
                 });
               
                $('#content').load('./data.html .header,.header1', function (data) {
                     console.log(data);
                 })
//我们可以在请求的URL字符串后拼接一个选择器,使用空格隔开URL和选择器,这样当load方法
                //把指定的数据请求下来后,会根据选择器匹配对应的标签,只把匹配上的标签拼接进DOM文档流。
                //如果需要使用多个选择器作为过滤器,则多个选择器之间使用“,”隔开。

                $('#content').load('./data.html?user=张三&pass=123 h1', function (data, status, xhr) {
                    console.log(xhr);
                })
            });

        </script>
    <body>
        <div id="content">
        </div>
    </body>

load():由页面中的标签对象调用,该方法被用来加载存放在服务器中的静态文件(一般指html代码片段),当请求到这份文件后,会把文件中的数据拼接进调用的标签中。

  • 参数一:必选
    要引入的静态文件路径,字符串类型,如果要发送get请求则将请求参数拼接在路径后。
  • 参数二:可选
    使用post请求时,该参数放的是传递的数据,使用的是对象类型。
  • 参数三:可选
    请求结束时的回调函数(不管请求是否成功,都会触发该函数);
    回调函数中有两个参数:在请求成功时,第一个参数保存的是请求到的数据,第二个参数保存的是“success”字符串;在请求失败时,第一个参数保存的是失败原因,第二个参数保存“error”字符串。我们可以根据第二个参数内容,判断该次请求是否成功。第二个参数总共有四个状态:
  • success:数据从服务器成功获取到;
  • error:因为服务器响应了错误码。导致数据无法获取到;
  • notmodified:数据从缓存中获取到;
  • timeout:因为超时,数据无法获取到。

二、get和post方法:

//访问json数据
$.get('./data.json',{
                    user:'张三',
                    pass:'123456'
                },function(data,status,xhr){
                    console.log(data);
                    console.log(status);
                    console.log(xhr);
                });         
//访问xml数据
            $.get('./data.xml',{
                    user:'张三',
                    pass:'123456'
                },function(data,status,xhr){
                    console.log(data);
                    console.log(status);
                    console.log(xhr);
                });

get():发送get请求的方法。
get方法直接绑定在jQuery函数中,由$直接调用。
get()方法中的参数:

  • 参数一:必选,请求的接口地址(不能添加传递的参数);
  • 参数二:可选,接口所需的参数,对象类型;
  • 参数三:可选,回调函数,只有在请求成功时才会触发;
    回调函数中的三个参数:
    1、请求下来的数据(json/xml),参数会根据请求接口类型转化数据,json转为object类型,xml自动转为DOM类型。
    2、请求状态(success)。
    3、发送当前get请求的请求对象。
  • 参数四:可选,要求请求的接口返回该参数指定的数据类型(xml/json/script/text);如果该接口有能力返回指定格式的数据,则返回,如果没能力,则请求失败,不触发回调函数。

post()方法参数情况和get一致,返回数据也和get一致。

三、ajax方法:

ajax()使用方法:

$.ajax({
                method:"get",
                url:"./data.json",
                data:"user=zs&passwod=123",
                success:function(data){
                    console.log(data);
                },
                error:function(err){
                    console.log(err);
                },
                async:true
            });

ajax()函数是jQuery中所有和ajax请求相关方法的底层方法,该方法内部封装的是原生ajax请求。
该方法的参数是对象类型。

  • URL:接口字符串。
  • data:接口参数字符串。
  • method:请求方法字符串。
  • success:当请求成功时执行的回调函数,该函数参数存放请求结果。
  • error:当请求失败时执行的回调函数,该函数的参数存放ajax请求对象,可以通过该对象下的status、readyState属性值判断失败的原因。

使用jQuery中的ajax()方法实现跨域:

 $.ajax({
                method:"get",
                url:"http://10.0.156.213/data.php",
                data:'cb=?',
                dataType:'jsonp',
                jsonp:'cb',
                success:function(data){
                    console.log(data);
                }
            });

参数:

  • url:要请求的跨域接口
  • method:请求方法,ajax请求跨域接口用的是jsonp实现的,所以该值一定是get(可省)。
  • data:请求的跨域接口参数,入股该接口不需要传参,则该属性和jsonp属性二选一即可;该属性值中包含一个回调函数字段,key是服务器指定的回调函数key,value是“?”
  • dataType:告诉ajax方法,发送的请求是jsonp请求,而不是ajax请求,必须指定该属性值为“jsonp”
  • jsonp:值是服务器指定的回调函数的key值(可以和data二选一存在)
  • success:请求成功回调函数。

四、getJSON方法:

用法:

 $.getJSON('http://10.0.156.213/data.php?cb=?',function(data){
                console.log(data);  
 })

getJSON()发送get请求,接受json数据
第一个参数:接口url(如果接口需要参数,则参数拼接在接口之后)。
第二个参数:回调函数,当请求成功时,触发回调函数,函数的第一个形参保存的是请求到的数据。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容