jquery ajax mysql例子_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的处理：

}else{echo "用户名或者密码错误";

}?>

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

1.2上传数据：onload

HTML:

JAVASCRIPT:

1 window.οnlοad=function(){2 var oInp=document.body.children[0];3

4 oInp.οnchange=function(){5 SomeJavaScriptCode;6 }7 };

1.3  ajax交互分4步

1)填写地址

2)返回结果

3)解析结果

4)展示数据

二、ajax的应用

1.仿爱奇艺官网『今日焦点』板块的红框部分(简版)

制作要求：用ajax方式传输数据到页面(自制一个假数据库)

涉及部分知识点：eval  字符串转数组   *eval 解析json有问题  必须加括号

HTML代码如下：

*版本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代码如下(写在

• 下面，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 $('

'

9 +''

10 +''

11 +'

'+$(arr).get(index).text+'

'

12 +''

13 +'

').appendTo('.ul1');14 });15 }16 });

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

如果HTML里面有多个 

1 $.ajax({2 url:'a.txt',3 success: function(str){4 var arr=eval('('+str+')'); //把字符串转成数组

5 $(arr).each(function(index, element) { //循环有多少条数据

6 //有多少条数据就创建多少个li

7 $('

'

8 +''

9 +''

10 +'

'+$(arr).get(index).text+'

'

11 +''

12 +'

').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 $('

'

24 +''

25 +''

26 +'

'+$(arr).get(index).text+'

'

27 +''

28 +'

').appendTo('.ul2');29 });30 }31 });

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

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

封装之后的写法：

1

2 functionnewsList(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 $('

'

11 +''

12 +''

13 +'

'+$(arr).get(index).text+'

'

14 +''

15 +'

').appendTo(obj);16 });17 }18 });19 }20 newsList('.ul1','a.txt');21 newsList('.ul2','b.txt');22

封装了函数，如果想执行，就调用并向里面传参数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=$('

').appendTo('ul');9 //alert(typeof $(arr)[index].href); 弹出每项的数据类型，如果只有一项就是字符串，有两项就是object

10 if(typeof $(arr)[index].href=='string'){11 $(''+$(arr)[index].text+'').appendTo(oLi);12 }else{13 var arrHref=$(arr)[index].href;14 for(var i=0; i

15 $(''+$(arr)[index].text[i]+'').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=$('

').appendTo('ul');8

9 if(typeof $(arr)[index].href=='string'){10 $(''+$(arr)[index].text+'').appendTo(oLi);11 }else{12 var arrHref=$(arr)[index].href;13 $(arrHref).each(function(i, k) {14 $(''+$(arr)[index].text[i]+'').appendTo(oLi);15 });16 }17 });18 }19 });

2.仿爱奇艺banner图部分(简版)

3.仿微博热门话题的部分(简版)

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

HTML代码：

jQ代码：

1 functionchange(){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 $('

'+$(arr)[i].text+' '+$(arr)[i].count+'').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

2 functionshow(json){3 alert(json.s);4 }5

6

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

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

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

1

2 window.sogou={3 sug:function(){4 alert(arguments[0][1]);5 }6 }7

8

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

1

2

3

4

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

18 oTxt.οninput=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

25

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

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

14 json[arr3[0]]=arr3[1];15 }16

17 console.log(json);18

4.2json转字符串

1

2 //a=1&b=2

3 var json={a:1,b:2};4

5 var arr=[];6

7 for(var name injson){8 arr.push(name+'='+json[name]);9 //a=1,b=2

10 }11

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

14 alert(str);15