php和jq的ajax交互,jQuery数据交互ajax

一、load方法：

$(document).ready(function() {

$('#content').load('./dat.html', function (data, status) {

if (status == 'error') {

$('#content').text('404，你要的页面去火星啦')

}

});

$('#content').load('./data.html .header,.header1', function (data) {

console.log(data);

})

//我们可以在请求的URL字符串后拼接一个选择器，使用空格隔开URL和选择器，这样当load方法

//把指定的数据请求下来后，会根据选择器匹配对应的标签，只把匹配上的标签拼接进DOM文档流。

//如果需要使用多个选择器作为过滤器，则多个选择器之间使用“，”隔开。

$('#content').load('./data.html?user=张三&pass=123 h1', function (data, status, xhr) {

console.log(xhr);

})

});

load()：由页面中的标签对象调用，该方法被用来加载存放在服务器中的静态文件(一般指html代码片段)，当请求到这份文件后，会把文件中的数据拼接进调用的标签中。

参数一：必选

要引入的静态文件路径，字符串类型，如果要发送get请求则将请求参数拼接在路径后。

参数二：可选

使用post请求时，该参数放的是传递的数据，使用的是对象类型。

参数三：可选

请求结束时的回调函数(不管请求是否成功，都会触发该函数)；

回调函数中有两个参数：在请求成功时，第一个参数保存的是请求到的数据，第二个参数保存的是“success”字符串；在请求失败时，第一个参数保存的是失败原因，第二个参数保存“error”字符串。我们可以根据第二个参数内容，判断该次请求是否成功。第二个参数总共有四个状态：

success：数据从服务器成功获取到；

error：因为服务器响应了错误码。导致数据无法获取到；

notmodified：数据从缓存中获取到；

timeout：因为超时，数据无法获取到。

二、get和post方法：

//访问json数据

$.get('./data.json',{

user:'张三',

pass:'123456'

},function(data,status,xhr){

console.log(data);

console.log(status);

console.log(xhr);

});

//访问xml数据

$.get('./data.xml',{

user:'张三',

pass:'123456'

},function(data,status,xhr){

console.log(data);

console.log(status);

console.log(xhr);

});

get()：发送get请求的方法。

get方法直接绑定在jQuery函数中，由$直接调用。

get()方法中的参数：

参数一：必选，请求的接口地址(不能添加传递的参数)；

参数二：可选，接口所需的参数，对象类型；

参数三：可选，回调函数，只有在请求成功时才会触发；

回调函数中的三个参数：

1、请求下来的数据(json/xml)，参数会根据请求接口类型转化数据，json转为object类型，xml自动转为DOM类型。

2、请求状态(success)。

3、发送当前get请求的请求对象。

参数四：可选，要求请求的接口返回该参数指定的数据类型(xml/json/script/text)；如果该接口有能力返回指定格式的数据，则返回，如果没能力，则请求失败，不触发回调函数。

post()方法参数情况和get一致，返回数据也和get一致。

三、ajax方法：

ajax()使用方法：

$.ajax({

method:"get",

url:"./data.json",

data:"user=zs&passwod=123",

success:function(data){

console.log(data);

},

error:function(err){

console.log(err);

},

async:true

});

ajax()函数是jQuery中所有和ajax请求相关方法的底层方法，该方法内部封装的是原生ajax请求。

该方法的参数是对象类型。

URL：接口字符串。

data：接口参数字符串。

method：请求方法字符串。

success：当请求成功时执行的回调函数，该函数参数存放请求结果。

error：当请求失败时执行的回调函数，该函数的参数存放ajax请求对象，可以通过该对象下的status、readyState属性值判断失败的原因。

使用jQuery中的ajax()方法实现跨域：

$.ajax({

method:"get",

url:"http://10.0.156.213/data.php",

data:'cb=?',

dataType:'jsonp',

jsonp:'cb',

success:function(data){

console.log(data);

}

});

参数：

url:要请求的跨域接口

method：请求方法，ajax请求跨域接口用的是jsonp实现的，所以该值一定是get(可省)。

data：请求的跨域接口参数，入股该接口不需要传参，则该属性和jsonp属性二选一即可；该属性值中包含一个回调函数字段，key是服务器指定的回调函数key,value是“？”

dataType：告诉ajax方法，发送的请求是jsonp请求，而不是ajax请求，必须指定该属性值为“jsonp”

jsonp：值是服务器指定的回调函数的key值(可以和data二选一存在)

success：请求成功回调函数。

四、getJSON方法：

用法：

$.getJSON('http://10.0.156.213/data.php?cb=?',function(data){

console.log(data);

})

getJSON()发送get请求，接受json数据

第一个参数：接口url(如果接口需要参数，则参数拼接在接口之后)。

第二个参数：回调函数，当请求成功时，触发回调函数，函数的第一个形参保存的是请求到的数据。