jQuery数据交互

Ajax的应用:
load()方法:从服务器中获取静态文件:请求静态文件后自动把文件拼接在指定的标签中;

//load()方法:jQ用来请求静态文件的方法:例 html文档。请求静态文件后吧自动把文件拼接在指定的标签中;
                //第一个参数:url:请求静态文件的路径;
                //第二个参数:data:发送服务器的参数   {key:value} 键值对
                //第三个参数:回调函数(不论请求是否成功,都会执行)function (){}
                //如果没有传参 , load则用GET方式传递,如果有参数load的请求方式变为POST请求。
                $('button').click(function() {
                    $('#news').load('news.html');
                //  $('#news').load('js/car.json');
                //注:load()可以获取静态页面指定的部分、、筛选有用的标签
                    $('#news').load('news.html .news:nth-of-type(2)');
                    //回调函数中可选的三个参数:
                    /*第一个参数:请求到的数据;
                    第二个参数:请求状态;
                    第三个参数:jQ创建出来的请求对象;*/                    
                $('#news').load("news.html",function(responseText,responseStstus,responseObj){
                        console.log(responseText);
                        console.log(responseStstus);
                        console.log(responseObj);
                    }
                });```
get()和post()方法:
除了请求方式不同;其他的参数都是相同的;
第一个参数是:url参数;字符串类型的地址;
第二个参数是data()发送到服务器的数据  必须是键值对:{key,value};
回调函数:当数据请求成功时调用。
type参数(可选)服务器返回数据的类型。(如果我们需要请求服务器给我们返回的是json数据,则这个参数只能写json,写别的参数不会请求);

<script type="text/javascript">
$(document).ready(function(){
// 通过点击按钮请求数据
$('button').click(function(){
// .get()用来向服务器发起get请求
// 第一个参数:请求路径
// 第二个参数:对象类型的数据,把需要提交给服务器的参数放在这个对象中
// 第三个参数:回调函数,当请求成功时,会执行该函数,通过这个回调函数拿到请求的值
// 第四个参数:服务器返回数据的类型(如果我们需要请求的服务器给我们返回的是json数据,则这个参数只能写json)

                $.get('text.json',

// {name:'zhangsan'},
function(data){
// 通过data参数拿到请求到的值
alert(data);
// 数据提取,并拼接在文档中
});

                // .post()方法,用来发起post请求。当服务器只能接受post请求时,使用该方法,该方法的用法和参数情况与.get()方法完全一样
                $.post()
            });
        });
    </script>```

.ajax()方法:
参数:
第一个参数是;url (必选)请求的地址;
第二个参数:type:请求的方式:GET,POST ;
第三个参数:data:提交到服务器中的数据必须是字符串类型,
第四个参数:success请求成功的回调函数该函数只有一个参数,保存在服务器中返回的数据。我们可以通过这个参数来解析从服务器中请求的数据;
第五个参数:error:请求失败的回调函数。

<script type="text/javascript">     
            $.ajax({
                // url参数:必填。表示数据接口
                url: 'http://10.0.159.198/news.php',
                // type参数:可选。GET\POST
                // GET:1、参数拼接在URL之后,2、而且参数的大小有限制:2k(服务器端口最多只能接受2k个字节的数据)3、用GET发起的请求数据会在浏览器中缓存
                // POST:1、参数存放在请求头中,2、传递参数的大小没有限制,3、浏览器不会缓存post数据
                type: 'GET',
                
                // data:可选。把需要提交给服务器的参数用&拼接起来。
                data: 'user=123&pass123',
                
                // success:可选。表示请求成功的回调函数
                success: function(data) {alert(data.name)},
                
                // error:可选。表示请求失败的回调函数
//              error: function (err) {alert(err)},
                
                // timeout:可选。设置请求超时时间
                timeout: 3000           
            });             
        </script>```
使用ajax()解决跨域问题:
参数:
url:请求数据的地址;type()请求数据的方式;
dataType:"jsonp";表示希望服务器返回的数据类型;
注:jsonp是一种样式,而不是数据格式。和json没有半毛钱关系;
jsonp:"回调函数的属性名";表示传递给服务器时回调函数名字的属性名;
    data:"callbach=?"传递参数以及回调函数,回调函数的属性名要和jsonp中的一致,回调函数的值用"?"表示;

<script type="text/javascript">
$.ajax({
url: 'http://10.0.159.198/news.php',
type: 'GET',
// dataType:表示希望服务器返回的数据类型
// jsonp:只存在jquery中。
dataType: 'jsonp',
// jsonp:表示传递给服务器时回到函数名字值的属性名
jsonp: 'callbackFun',

            // data:传递参数以及回调函数。回调函数的属性名要和jsonp中指定的一致,回调函数的值用‘?’表示
            data: 'callbackFun=?',
            
            success: function(data){alert(data.name)}
            
        })
    </script>

getJSON();使用getJSON的方法请求数据;专业加载json数据:两个参数;一个是url 请求的地址;另外一个是成功回调的函数;
<script type="text/javascript">
$(document).ready(function() {
//getJSON()方法:使用get方式json文件;
跨域:只需要在url后拼接上回调函数的属性名和属性值即可,属性名有后台指定人员指定,属性的值可以是一个?;jQ会自动把这个“?”转化为回调函数的名字。
$.getJSON('http://10.0.159.198/news.php?callbackFun=?',function(data) {
console.log(data);
//第一个参数:url请求数据的接口。
//callback:请求成功的函数,通过这个函数可以获取到服务器返回的值。
});
})
</script>```
promise的规范使用;
Promise 对象用来进行延迟(deferred) 和异步(asynchronous ) 计算,执行完$.ajax后会返回一个对象,用变量接收这个对象后,可以把不同状态的回调函数添加在这个对象上。

<script type="text/javascript">
            $(document).ready(function() {
                //promise:jQ_xml;
            var promise = $.ajax({   //用一个变量去接受ajax对象;
                    type:"get",
                    url:"js/car.json",
                });
            /*  //done成功时 请求的函数;
                promise.done(function(data){alert(data)});
                promise.done(function(data){alert("成功")});

                //fail 失败时请求的函数
                promise.fail(function(data){console.log("错了")})
                promise.fail(function(data){console.log("又错了")})
                 
                 //always()无论是成功还是失败都会执行
                promise.always(function(data){alert(data)});
                 
                 //以上三种状态都可以添加多个回调函数*/ 链式语法;
                promise.done(function(data){alert(data)}).fail(function(){alert("错了")}).always(function(){alert("总是调用")});
                 
            });
        </script>```
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,716评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,558评论 1 294
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,431评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,127评论 0 209
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,511评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,692评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,915评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,664评论 0 202
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,412评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,616评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,105评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,424评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,098评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,096评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,869评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,748评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,641评论 2 271

推荐阅读更多精彩内容

  • 一、load方法: load():由页面中的标签对象调用,该方法被用来加载存放在服务器中的静态文件(一般指html...
    清心挽风阅读 1,223评论 0 1
  • 一、load方法:从服务器上获取静态数据文件: 1、载入HTML文档:element.load(url,[data...
    LiLi原上草阅读 545评论 0 7
  • 第一章 入门 基本功能:访问和操作 dom 元素,控制页面样式,对页面的事件处理,与ajax完美结合,有丰富的插件...
    X_Arts阅读 983评论 0 2
  • 一、Ajax的使用 1.1、load方法:从服务器上获取静态数据文件 1.2、GET和POST方法 1.3、aja...
    尘中老阅读 686评论 0 5
  • AJAX 原生js操作ajax 1.创建XMLHttpRequest对象 var xhr = new XMLHtt...
    碧玉含香阅读 3,051评论 0 7