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(如果接口需要参数,则参数拼接在接口之后)。
第二个参数:回调函数,当请求成功时,触发回调函数,函数的第一个形参保存的是请求到的数据。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,088评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,715评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,361评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,099评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 60,987评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,063评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,486评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,175评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,440评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,190评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,550评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2 335

推荐阅读更多精彩内容