jquery里的Ajax解析

现在对Jquery的Ajax进行详细的解析。

顺带，我会在后面把我整理的一整套CSS3，PHP,MYSQL的开发的笔记打包放到百度云，有需要可以直接去百度云下载，这样以后你们开发就可以直接翻笔记不用百度搜那么麻烦了。

笔记链接：http://pan.baidu.com/s/1qYdQdKK 密码：pvj2

二、Jquery的ajax使用
1.get方式提交数据

$(document).ready(function(){

// load的get方式提交
$('#b1').click(function(){

// 使用jquery提供的方法来发出ajax的请求
// 1.第一个参数表示把ajax请求发送给url
// 2.第二个参数表示是否发送数据data ，如果要发送数据则数据的格式应当是{"username":"hello"}
// 如果你不发送数据，则填入null,如果你发送有数据给服务器文件，默认load用post方式提交,如果没数据用get方式提交
// 3.第三个参数是函数（回调函数）
/*
data表示从服务器回送的数据(string)
textStatus表示状态有四个 succuss,error,notmodify,timeout
xmlHttpRequest 表示XMLHttpRequest对象
*/
var user = $('#user').val();
var pass = $('#pass').val();
$('#one').load("loadController.php?date"+Math.random()+"&username="+user+"&pass="+pass,null,function(data,textStatus,xmlHttpRequest){

alert("服务器返回:"+data);
});
})

2.post方式，发送数据
<script type="text/javascript">
$(document).ready(function(){

$('#sub').click(function(){
var user=$('#user').val();
var pass=$('#pass').val();
var sendData={
'user':user,
'pass':pass
};
$("#test").load('loadTest.php',sendData,function(data,textStatus,xmlHttpRequest){
// 输出数据
});
});
});
</script>

HTML传数据的部分：

<form action="" method="">
用户名:<input type="text" name="user" id="user"><br>
密码:<input type="text" name="pass" id="pass"><br>
<input type="button" value="登录" id="sub">
</form>
<div id="test"></div>

后台php代码:

<?php
header("content-type:text/html;charset=utf-8");
$user = $_POST['user'];
$pass = $_POST['pass'];
if($user == "hello" && $pass == "123"){
echo "账号密码正确";
}else{
echo "账号密码不正确";
}

3. ajax中的$.post()方法的使用

$(document).ready(function(){

$('#sub').click(function(){
var user=$('#user').val();
var pass=$('#pass').val();
var sendData={
'user':user,
'pass':pass
};
$.post('loadTest.php',sendData,function(data,ts){
// alert("hello");
alert(data);
});
});
});

4. ajax的 $.ajax()的使用

$(document).ready(function(){
$("#b1").click(function(){
$.ajax({
url:'loadController.php?query=123&id=45&num[]=45&num[]=78&data[uid]=1001',
type:'post',
datatype:'json',
data:{
name:"test",
uid:1523
},
success:function(e) {
console.log(typeof e,e);
// console.log(e.get.data.uid);
console.log(e[0].title);
},
error:function(e) {
console.log(e);
}
});
});

});

php代码:

数组一:可以获取$_POST 和 $_GET 内的数据
$arr=[
"post"=>@$_POST,
"get"=>@$_GET,
];
数组二:二维数组，也可以返回
/*	$arr=array(
array('title'=>'hello','ba'=>'say'),
array('title'=>'hello2','ba'=>'say2'),
array('title'=>'hello23','ba'=>'say23')
);*/
// 对数据进行 json编码
echo json_encode($arr);

三、js跨域请求
跨域:跨域名
一个域名下的文件去请求了和他不一样的域名下的资源，叫做跨域。

//跨域请求问题
window.onload=function(){
var oBtn = document.getElementById("btn");
oBtn.onclick=function(){
var xml = new XMLHttpRequest();
xml.onreadystatechange=function(){
if(xml.readyState == 4){
if(xml.status == 200){
console.log("hello");
alert(xml.responseText);
}
}
}

xml.open("get",'http://api.douban.com/labs/bubbler/wall/irachex',true);
xml.send();
}
}

跨域解析：
JSONP : JSON with Padding
1. script标签
2.用script标签加载资源是没有跨域问题的

在资源加载进来之前定义好一个函数，这个函数接受一个参数（数据），函数里面利用这个参数做一些事情
然后需要的时候通过script标签加载对应远程文件资源，当远程的文件资源被加载进来的时候，
就会去执行我们前面定义好的函数，并且把数据当做这个函数的参数传入进去
html代码:
<script>
function fn(data){
var oUl1 = document.getElementById('ul1');
var html="";
for(var i=0;i<data.length;i++){
html +="<li>"+data[i]+"</li>";
}
oUl1.innerHTML=html;
}
function fn1(data){
var oUl2 = document.getElementById('ul2');
var html="";
for(var i=0;i<data.length;i++){
html +="<li>"+data[i]+"</li>";
}
oUl2.innerHTML=html;
}

</script>

<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById("btn");
var oBtn2 = document.getElementById("btn2");

oBtn.onclick = function(){

// 当按钮点击的时候再去加载远程资源，让他执行
var oScript = document.createElement('script');
oScript.src = 'test.php?t=num&callback=fn1';
document.body.appendChild(oScript);
}
oBtn2.onclick = function(){
// 当按钮点击的时候再去加载远程资源，让他执行

var oScript = document.createElement('script');
oScript.src = 'test.php?t=str&callback=fn1';
document.body.appendChild(oScript);
}

}
</script>

　HTML代码：　

<input type="button" value="获取数字" id="btn">
<input type="button" value="获取字母" id="btn2">
<ul id="ul1"></ul>
<ul id="ul2"></ul>

php代码：

<?php
$t = isset($_GET['t'])?$_GET['t']:'num';
$callback = isset($_GET['callback'])?$_GET['callback']:'fn1';

$arr1=array("1111","2222","3333","444");
$arr2=array("aaaa","bbb","ccc","ddd");

if($t == 'num'){
$data = json_encode($arr1);
echo $callback."(".$data.")";
}else{
$data = json_encode($arr2);
echo $callback."(".$data.")";
}


关于jsonp的跨域应用百度搜索提示实例：

window.onload=function(){
var oSo = document.getElementById("so");
var oUl = document.getElementById("ul1");

oSo.onkeyup=function(){

if(this.value != ''){
oUl.style.display="block";
var oScript = document.createElement("script");
// 这里是请求的链接
oScript.src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+this.value+"&cb=soso>";
document.body.appendChild(oScript);
// 可以试着移除加载的script，不影响使用jsonp跨域请求
oScript.remove();
}else{
oUl.style.display="none";
}
}
oSo.onblur=function(){
oUl.style.display="none";
}
}
// soso是回调函数
function soso(data){
var oUl = document.getElementById('ul1');
if(data.s.length >0){
var html = '';
oUl.style.display="block";
for(var i=0;i<data.s.length;i++){
html +='<li><a href="">'+data.s[i]+'</a></li>';
}
oUl.innerHTML = html;
}else{
oUl.style.display="none";
}
}

关于封装好的js跨域jsonp方法使用：

window.onload=function () {
var oQ = document.getElementById("q");
var oUl = document.getElementById("ul1");
oQ.onkeyup = function(){
if(this.value.length>0){
ajax({
url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+this.value,
// jsonp需要填回调函数cb=
jsonp:"cb",
// 这里是回调函数，可以不设置
callback:"soso",
// 成功返回
success:function(data){
console.log(data);
oUl.innerHTML="";
var html="";
if(data.s.length){
oUl.style.display="block";
for(var i=0;i<data.s.length;i++){
html +='<li><a href="">'+data.s[i]+'</a></li>';
}
oUl.innerHTML = html;
}else{
oUl.style.display="none";
}
},
error:function(e){
console.log("错误：",e);
}
});
}
}
}

　　最后附上实例开发教程。一个简单的豆瓣获取对应信息的开发案例。

豆瓣获取对应信息的开发：

window.onload = function(){
var oQ = document.getElementById("q");
var oBtn = document.getElementById("btn");
var oMsg = document.getElementById("msg");
var oList = document.getElementById("list");

oBtn.onclick=function(){
if(oQ.value != ''){
var oScript = document.createElement("script");
oScript.src = "http://api.douban.com/book/subjects?q="+oQ.value+"&alt=xd&callback=fn1";
document.body.appendChild(oScript);
oScript.remove();
}
}

}

function fn1(data){
var oMsg = document.getElementById("msg");
var oList = document.getElementById("list");
console.log(data);

oMsg.innerHTML = data.title.$t + " : " + data['opensearch:totalResults'].$t;

var aEntry = data.entry;
var html = '';
for(var i=0;i<aEntry.length;i++){
html += "<dl><dt>"+aEntry[i].title.$t+"</dt><dd><img src="+aEntry[i].link[2]['@href']+" /></dd></dl>"
}
list.innerHTML = html;
}

　　HTML代码：

<input type="text" name="d" id="q">
<input type="button" value="搜索" id="btn">
<p id="msg"></p>
<hr/>
<div id="list"></div>

希望对你们开发起到帮助。　　

笔记链接：http://pan.baidu.com/s/1qYdQdKK 密码：pvj2

posted @ 2017-06-16 16:11 琉忆光年阅读(178) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

琉忆光年

琉忆-PHP面试系列书籍作者。《PHP程序员面试笔试算法宝典》、《PHP程序员面试笔试真题库》、《PHP程序员面试笔试宝典》、《PHP程序员面试笔试真题解析》已上市。

jquery里的Ajax解析

公告