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程序接收并处理对应的数据。

例：

$('.login').click(function (){
    $.ajax({
        url:'post.php',
        data:{
            user:$('.user').val(),
            pass:$('.pass').val()
        },
        type:'POST',
        success:function(str){
            alert(str);
        },
        error:function (err){
            alert(err);
        }
    });
});

此段代码，传输了用户输入的用户名和密码。

PHP的处理：

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

if($user=="abc"&&$pass=="123"){
    echo "登录成功";
}else{
    echo "用户名或者密码错误";
}
?>

校验用户名和密码，并返回对应的结果。

1.2上传数据：onload

　　HTML:

<input type="file" />

　　JAVASCRIPT:

window.onload=function (){
    var oInp=document.body.children[0];
    
    oInp.onchange=function (){
        SomeJavaScriptCode;
    }
};

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里面）：

$.ajax({
    url:'a.txt',
    success: function(str){
        var arr=eval('('+str+')');        //把字符串转成数组
//        alert(typeof str);
        $(arr).each(function(index, element) {    //循环有多少条数据
            //有多少条数据就创建多少个li
            $('<li>'
                +'<a href="'+$(arr).get(index).href+'">'
                    +'<img src="'+$(arr).get(index).img+'" />'
                    +'<p>'+$(arr).get(index).text+'</p>'
                +'</a>'
            +'</li>').appendTo('.ul1');
        });
    }
});

——————————我是拓展内容的分割线——————————

如果HTML里面有多个 <ul></ul> ，现在想在多个 <ul></ul> 里面插入不同的内容，如果不封装的话是这样来实现的：

$.ajax({
    url:'a.txt',
    success: function(str){
        var arr=eval('('+str+')');        //把字符串转成数组
        $(arr).each(function(index, element) {    //循环有多少条数据
            //有多少条数据就创建多少个li
            $('<li>'
                +'<a href="'+$(arr).get(index).href+'">'
                    +'<img src="'+$(arr).get(index).img+'" />'
                    +'<p>'+$(arr).get(index).text+'</p>'
                +'</a>'
            +'</li>').appendTo('.ul1');
        });
    }
});
$.ajax({
    url:'b.txt',
    success: function(str){
        var arr=eval('('+str+')');        //把字符串转成数组

        $(arr).each(function(index, element) {    //循环有多少条数据
            //有多少条数据就创建多少个li
            $('<li>'
                +'<a href="'+$(arr).get(index).href+'">'
                    +'<img src="'+$(arr).get(index).img+'" />'
                    +'<p>'+$(arr).get(index).text+'</p>'
                +'</a>'
            +'</li>').appendTo('.ul2');
        });
    }
});

这样写两遍相同的代码，代码就过于冗长。这时就需要把两段代码封装起来。

封装需要制定函数的名字（方便调用），需要指定给函数传那些参数（obj和url）。

封装之后的写法：

<script>
function newsList(obj,url){
    $.ajax({
        url:url,
        success: function(str){
            var arr=eval('('+str+')');        //把字符串转成数组
            
            $(arr).each(function(index, element) {    //循环有多少条数据
                //有多少条数据就创建多少个li
                $('<li>'
                    +'<a href="'+$(arr).get(index).href+'">'
                        +'<img src="'+$(arr).get(index).img+'" />'
                        +'<p>'+$(arr).get(index).text+'</p>'
                    +'</a>'
                +'</li>').appendTo(obj);
            });
        }
    });
}
newsList('.ul1','a.txt');
newsList('.ul2','b.txt');
</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代码：

$.ajax({
    url:'a.txt',
    success: function(str){
        var arr=eval('('+str+')');                  //把字符串转成数组
        
        $(arr).each(function(index, element) {     //循环有多少条数据
            //有多少条数据就创建多少个li
            var oLi=$('<li></li>').appendTo('ul');
//            alert(typeof $(arr)[index].href);   弹出每项的数据类型，如果只有一项就是字符串，有两项就是object
            if(typeof $(arr)[index].href=='string'){
                $('<a href="'+$(arr)[index].href+'">'+$(arr)[index].text+'</a>').appendTo(oLi);
            }else{
                var arrHref=$(arr)[index].href;
                for(var i=0; i<arrHref.length; i++){   //循环下标
                    $('<a href="'+$(arr)[index].href[i]+'">'+$(arr)[index].text[i]+'</a>').appendTo(oLi);

                }
            }
        });
    }
});

在14行循环下标的时候使用了js的for循环，而没有使用jQ的each循环，因为for循环更容易看懂，使用each会添加i , k两个新变量，理解起来的难度会增加一些。使用each的写法如下：

$.ajax({
    url:'a.txt',
    success: function(str){
        var arr=eval('('+str+')');
        
        $(arr).each(function(index, element) {
            var oLi=$('<li></li>').appendTo('ul');
            
            if(typeof $(arr)[index].href=='string'){
                $('<a href="'+$(arr)[index].href+'">'+$(arr)[index].text+'</a>').appendTo(oLi);
            }else{
                var arrHref=$(arr)[index].href;
                $(arrHref).each(function(i, k) {
                    $('<a href="'+k+'">'+$(arr)[index].text[i]+'</a>').appendTo(oLi);
                });
            }
        });
    }
});

2.仿爱奇艺banner图部分（简版）

3.仿微博热门话题的部分（简版）

要点：点击换一换按钮之后，要从数据库中随机抽出一些内容来展示，需要用到随机数的方法。

HTML代码：

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

jQ代码：

function change(){
    $.ajax({
        url:'b.txt',
        success: function(str){
            $('ul').html('');    //先清空，在添加，否则每次添加都会添加到原有内容的后面了
            
            var arr=eval('('+str+')');
            
            arr.sort(function (){
                return Math.random()-0.3;
            });
            
            for(var i=0; i<3; i++){
                $('<li><a href="'+$(arr)[i].href+'">'+$(arr)[i].text+'</a><span>'+$(arr)[i].count+'</span></li>').appendTo('ul');
            }
            
            
        }
    });
}
change();   //这句的意思是：在打开网页的时候就运行一次change函数，否则在刚打开网页的时候页面是空白的，需要点击一下才可以加载内容。
$('.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

访问这个网址，显示如下：

让页面弹出联想词，我们可以使用如下语句：

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

第六行的作用就是调用show函数，相当于在线版本的show（）。

几个json原生写法及jQ写法的例子

1.显示关键字成龙的联想词

<script>
window.sogou={
    sug:function (){
        alert(arguments[0][1]);
    }
}
</script>
<script src="https://www.sogou.com/suggnew/ajajjson?key=成龙&type=web"></script>

2.利用搜狗的数据，制作一个实时的搜索联想词显示页面

<body>
    <input type="text" value="" id="txt" />
    <ul id="ul"></ul>
<script>
var oTxt=document.getElementById('txt');
var oUl=document.getElementById('ul');

window.sogou={
    sug:function (arr){
        for(var i=0; i<arr[1].length; i++){
            var oLi=document.createElement('li');
            oLi.innerHTML=arr[1][i];
            oUl.appendChild(oLi);
        }
    }
};

oTxt.oninput=function (){
    oUl.innerHTML='';
    var oS=document.createElement('script');
    oS.src='https://www.sogou.com/suggnew/ajajjson?key='+oTxt.value+'&type=web';
    document.body.appendChild(oS);
}
</script>
</body>

3.利用jQ弹出百度搜索的a的联想词

$.ajax({
    url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
    data:{
        wd:'a'
    },
    jsonp:'cb',
    dataType:'jsonp',
    success: function(json){
        alert(json.s);
    }
});

4.利用jQ弹出搜狗的联想词

$.ajax({
    url:'https://www.sogou.com/suggnew/ajajjson',
    data:{
        key:'a',
        type:'web'
    },
    dataType:'jsonp',
    jsonp:'callBack',
    success:function(){
    },
    error:function (){
    }
});

四、字符串和json相互转换

4.1字符串转json

<script>
var str='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=show';
var arr=str.split('?');

var url=arr[0];

var arr2=arr[1].split('&');

var json={};

for(var i=0; i<arr2.length; i++){
    var arr3=arr2[i].split('=');
    
    json[arr3[0]]=arr3[1];
}

console.log(json);
</script>

4.2json转字符串

<script>
//a=1&b=2
var json={a:1,b:2};

var arr=[];

for(var name in json){
    arr.push(name+'='+json[name]);
    //a=1,b=2
}

var str=arr.join('&');

alert(str);
</script>