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>
