jQuery之ajax數據交互（語法及示例）

時間 2019-11-29

原文原文鏈接

1、jajx基礎語法php

　1.1寫法　$.ajax({
　　　　　　　url:'地址',
　　　　　　　data:{
　　　　　　　參數:xxx,
　　　　　　　參數:xxx
　　　　　　　},
　　　　　　type:'POST/GET',
　　　　　　success:function(str){ //成功回調函數
　　　　　　　alert(str);
　　　　　　　},
　　　　　　error:function (err){ //失敗回調函數
　　　　　　　alert(err);
　　　　　　　}
　　　　　　});html

其中，data:{}是傳輸數據用的，後臺的PHP程序接收並處理對應的數據。web

例：ajax

 1 $('.login').click(function (){
 2     $.ajax({
 3         url:'post.php',
 4         data:{
 5             user:$('.user').val(),
 6             pass:$('.pass').val()
 7         },
 8         type:'POST',
 9         success:function(str){
10             alert(str);
11         },
12         error:function (err){
13             alert(err);
14         }
15     });
16 });

此段代碼，傳輸了用戶輸入的用戶名和密碼。數據庫

PHP的處理：json

<?php
$user=$_POST["user"];
$pass=$_POST["pass"];

if($user=="abc"&&$pass=="123"){
    echo "登陸成功";
}else{
    echo "用戶名或者密碼錯誤";
}
?>

校驗用戶名和密碼，並返回對應的結果。數組

1.2上傳數據：onload服務器

　　HTML:微信

<input type="file" />

　　JAVASCRIPT:app

1 window.onload=function (){
2     var oInp=document.body.children[0];
3     
4     oInp.onchange=function (){
5         SomeJavaScriptCode;
6     }
7 };

1.3 ajax交互分4步
　　1）填寫地址
　　2）返回結果
　　3）解析結果
　　4）展現數據

2、ajax的應用

1.仿愛奇藝官網『今日焦點』板塊的紅框部分（簡版）

製做要求：用ajax方式傳輸數據到頁面（自制一個假數據庫）

涉及部分知識點：eval 字符串轉數組 *eval 解析json有問題必須加括號

HTML代碼以下：

<ul></ul>

*版本1：每行只有一個標題

假數據庫a.txt寫法：

[{href:"http://www.baidu.com/",img:"img/4.jpg",text:"文字介紹111"},{href:"http://www.taobao.com/",img:"img/8.jpg",text:"文字介紹222"},{href:"http://www.taobao.com/",img:"img/8.jpg",text:"文字介紹222"}]

jQ代碼以下（寫在<ul>下面，body裏面）：

 1 $.ajax({
 2     url:'a.txt',
 3     success: function(str){
 4         var arr=eval('('+str+')');        //把字符串轉成數組
 5 //        alert(typeof str);
 6         $(arr).each(function(index, element) {    //循環有多少條數據
 7             //有多少條數據就建立多少個li
 8             $('<li>'
 9                 +'<a href="'+$(arr).get(index).href+'">'
10                     +'<img src="'+$(arr).get(index).img+'" />'
11                     +'<p>'+$(arr).get(index).text+'</p>'
12                 +'</a>'
13             +'</li>').appendTo('.ul1');
14         });
15     }
16 });

——————————我是拓展內容的分割線——————————

若是HTML裏面有多個 <ul></ul> ，如今想在多個 <ul></ul> 裏面插入不一樣的內容，若是不封裝的話是這樣來實現的：

 1 $.ajax({
 2     url:'a.txt',
 3     success: function(str){
 4         var arr=eval('('+str+')');        //把字符串轉成數組
 5         $(arr).each(function(index, element) {    //循環有多少條數據
 6             //有多少條數據就建立多少個li
 7             $('<li>'
 8                 +'<a href="'+$(arr).get(index).href+'">'
 9                     +'<img src="'+$(arr).get(index).img+'" />'
10                     +'<p>'+$(arr).get(index).text+'</p>'
11                 +'</a>'
12             +'</li>').appendTo('.ul1');
13         });
14     }
15 });
16 $.ajax({
17     url:'b.txt',
18     success: function(str){
19         var arr=eval('('+str+')');        //把字符串轉成數組
20 
21         $(arr).each(function(index, element) {    //循環有多少條數據
22             //有多少條數據就建立多少個li
23             $('<li>'
24                 +'<a href="'+$(arr).get(index).href+'">'
25                     +'<img src="'+$(arr).get(index).img+'" />'
26                     +'<p>'+$(arr).get(index).text+'</p>'
27                 +'</a>'
28             +'</li>').appendTo('.ul2');
29         });
30     }
31 });

這樣寫兩遍相同的代碼，代碼就過於冗長。這時就須要把兩段代碼封裝起來。

封裝須要制定函數的名字（方便調用），須要指定給函數傳那些參數（obj和url）。

封裝以後的寫法：

 1 <script>
 2 function newsList(obj,url){
 3     $.ajax({
 4         url:url,
 5         success: function(str){
 6             var arr=eval('('+str+')');        //把字符串轉成數組
 7             
 8             $(arr).each(function(index, element) {    //循環有多少條數據
 9                 //有多少條數據就建立多少個li
10                 $('<li>'
11                     +'<a href="'+$(arr).get(index).href+'">'
12                         +'<img src="'+$(arr).get(index).img+'" />'
13                         +'<p>'+$(arr).get(index).text+'</p>'
14                     +'</a>'
15                 +'</li>').appendTo(obj);
16             });
17         }
18     });
19 }
20 newsList('.ul1','a.txt');
21 newsList('.ul2','b.txt');
22 </script>

封裝了函數，若是想執行，就調用並向裏面傳參數obj和url，傳兩次就執行了兩次。

—————————————拓展完畢—————————————

*版本2：每行有多個標題，在數據庫中兩個新聞的標題和內容是寫在一個json裏面的，把這一個json拆分，並分紅多個標題顯示在頁面上。

假數據庫a.txt寫法：（不容許手動換行，只能自動換行，這裏爲了閱讀方便使用了手動換行）

　[{href:"http://www.baidu.com/",text:"男子被騙子追債"},
　　{href:"http://www.baidu.com/",text:"男子被騙子追債"},
　　{href:"http://www.baidu.com/",text:"男子被騙子追債"},
　　{href:"http://www.baidu.com/",text:"男子被騙子追債"},
　　{href:["http://www.baidu.com/","http://www.jd.com/","http://www.taobao.com/"],text:["男子被騙子追債","男子被騙子追債2","男子被騙子追債3"]}]

jQ代碼：

 1 $.ajax({
 2     url:'a.txt',
 3     success: function(str){
 4         var arr=eval('('+str+')');                  //把字符串轉成數組
 5         
 6         $(arr).each(function(index, element) {     //循環有多少條數據
 7             //有多少條數據就建立多少個li
 8             var oLi=$('<li></li>').appendTo('ul');
 9 //            alert(typeof $(arr)[index].href);   彈出每項的數據類型，若是隻有一項就是字符串，有兩項就是object
10             if(typeof $(arr)[index].href=='string'){
11                 $('<a href="'+$(arr)[index].href+'">'+$(arr)[index].text+'</a>').appendTo(oLi);
12             }else{
13                 var arrHref=$(arr)[index].href;
14                 for(var i=0; i<arrHref.length; i++){   //循環下標
15                     $('<a href="'+$(arr)[index].href[i]+'">'+$(arr)[index].text[i]+'</a>').appendTo(oLi);
16 
17                 }
18             }
19         });
20     }
21 });

在14行循環下標的時候使用了js的for循環，而沒有使用jQ的each循環，由於for循環更容易看懂，使用each會添加i , k兩個新變量，理解起來的難度會增長一些。使用each的寫法以下：

 1 $.ajax({
 2     url:'a.txt',
 3     success: function(str){
 4         var arr=eval('('+str+')');
 5         
 6         $(arr).each(function(index, element) {
 7             var oLi=$('<li></li>').appendTo('ul');
 8             
 9             if(typeof $(arr)[index].href=='string'){
10                 $('<a href="'+$(arr)[index].href+'">'+$(arr)[index].text+'</a>').appendTo(oLi);
11             }else{
12                 var arrHref=$(arr)[index].href;
13                 $(arrHref).each(function(i, k) {
14                     $('<a href="'+k+'">'+$(arr)[index].text[i]+'</a>').appendTo(oLi);
15                 });
16             }
17         });
18     }
19 });

2.仿愛奇藝banner圖部分（簡版）

3.仿微博熱門話題的部分（簡版）

要點：點擊換一換按鈕以後，要從數據庫中隨機抽出一些內容來展現，須要用到隨機數的方法。

HTML代碼：

<input class="change" type="button" value="換一換" />
<ul></ul>

jQ代碼：

 1 function change(){
 2     $.ajax({
 3         url:'b.txt',
 4         success: function(str){
 5             $('ul').html('');    //先清空，在添加，不然每次添加都會添加到原有內容的後面了  6             
 7             var arr=eval('('+str+')');
 8             
 9             arr.sort(function (){
10                 return Math.random()-0.3;
11             });
12             
13             for(var i=0; i<3; i++){
14                 $('<li><a href="'+$(arr)[i].href+'">'+$(arr)[i].text+'</a><span>'+$(arr)[i].count+'</span></li>').appendTo('ul');
15             }
16             
17             
18         }
19     });
20 }
21 change();   //這句的意思是：在打開網頁的時候就運行一次change函數，不然在剛打開網頁的時候頁面是空白的，須要點擊一下才能夠加載內容。 22 $('.change').click(change);

3、jsonp基礎語法

jsonp的做用：從別人的服務器獲取數據，就用jsonp方法

　　例如：讓用戶經過微信帳戶登陸本身的APP、讓用戶經過微博帳號登陸本身的網站，咱們就能夠用jsonp的方法來從微博/微信的服務區獲取須要的信息。

舉例：在百度的搜索框，輸入關鍵詞以後，會自動彈出其餘推薦的聯想詞。咱們來看看這個聯想詞的數據是從哪裏調用出來的。

經過su?wd=……這個文件咱們能夠看到，好比咱們搜索關鍵字a，百度就會從 https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&json=1&p=3&sid=1452_21125_19898_20929&req=2&csor=1&cb=jQuery110209266088668740502_1490508233752&_=1490508233755

這個地址來調用a相關的聯想詞。

打開這個網址，顯示的信息以下：

精簡一下這個網址，提取出咱們想要的聯想詞信息。

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&json=1&p=3&sid=1452_21125_19898_20929&req=2&csor=1&cb=jQuery110209266088668740502_1490508233752&_=1490508233755

其中，wd=a的意思是關鍵詞是a，刪除藍字部分，讓最後的cb=show

網址精簡成：

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=show

cb就是callback的縮寫，是返回的數據，這裏咱們把這個返回的數據命名爲show

訪問這個網址，顯示以下：

讓頁面彈出聯想詞，咱們可使用以下語句：

1 <script>
2 function show(json){
3     alert(json.s);
4 }
5 </script>
6 <script src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=show"></script>

第六行的做用就是調用show函數，至關於在線版本的show（）。

幾個json原生寫法及jQ寫法的例子

1.顯示關鍵字成龍的聯想詞

1 <script>
2 window.sogou={
3     sug:function (){
4         alert(arguments[0][1]);
5     }
6 }
7 </script>
8 <script src="https://www.sogou.com/suggnew/ajajjson?key=成龍&type=web"></script>

2.利用搜狗的數據，製做一個實時的搜索聯想詞顯示頁面

 1 <body>
 2     <input type="text" value="" id="txt" />
 3     <ul id="ul"></ul>
 4 <script>
 5 var oTxt=document.getElementById('txt');
 6 var oUl=document.getElementById('ul');
 7 
 8 window.sogou={
 9     sug:function (arr){
10         for(var i=0; i<arr[1].length; i++){
11             var oLi=document.createElement('li');
12             oLi.innerHTML=arr[1][i];
13             oUl.appendChild(oLi);
14         }
15     }
16 };
17 
18 oTxt.oninput=function (){
19     oUl.innerHTML='';
20     var oS=document.createElement('script');
21     oS.src='https://www.sogou.com/suggnew/ajajjson?key='+oTxt.value+'&type=web';
22     document.body.appendChild(oS);
23 }
24 </script>
25 </body>

3.利用jQ彈出百度搜索的a的聯想詞

 1 $.ajax({
 2     url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
 3     data:{
 4         wd:'a'
 5     },
 6     jsonp:'cb',
 7     dataType:'jsonp',
 8     success: function(json){
 9         alert(json.s);
10     }
11 });

4.利用jQ彈出搜狗的聯想詞

 1 $.ajax({
 2     url:'https://www.sogou.com/suggnew/ajajjson',
 3     data:{
 4         key:'a',
 5         type:'web'
 6     },
 7     dataType:'jsonp',
 8     jsonp:'callBack',
 9     success:function(){
10     },
11     error:function (){
12     }
13 });

4、字符串和json相互轉換

4.1字符串轉json

 1 <script>
 2 var str='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=show';
 3 var arr=str.split('?');
 4 
 5 var url=arr[0];
 6 
 7 var arr2=arr[1].split('&');
 8 
 9 var json={};
10 
11 for(var i=0; i<arr2.length; i++){
12     var arr3=arr2[i].split('=');
13     
14     json[arr3[0]]=arr3[1];
15 }
16 
17 console.log(json);
18 </script>

4.2json轉字符串

 1 <script>
 2 //a=1&b=2
 3 var json={a:1,b:2};
 4 
 5 var arr=[];
 6 
 7 for(var name in json){
 8     arr.push(name+'='+json[name]);
 9     //a=1,b=2
10 }
11 
12 var str=arr.join('&');
13 
14 alert(str);
15 </script>