jQuery之ajax資料互動（語法及示例）
一、jajx基礎語法
1.1寫法
$.ajax({
url:'地址',
data:{
引數:xxx,
引數:xxx
},
type:'POST/GET',
success:function(str){ //成功回撥函式
alert(str);
},
error:function (err){ //失敗回撥函式
alert(err);
}
});其中，data:{}是傳輸資料用的，後臺的PHP程式接收並處理對應的資料。
例：
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的處理：
<?php
$user=$_POST["user"];
$pass=$_POST["pass"];
if($user=="abc"&&$pass=="123"){
echo "登入成功";
}else{
echo "使用者名稱或者密碼錯誤";
}
?>
校驗使用者名稱和密碼，並返回對應的結果。
1.2上傳資料：onload
HTML:
<input type="file" />JAVASCRIPT:
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）展示資料
二、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);
三、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 });
四、字串和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>