jquery 和 ajax

jquery的ajax

1.$.ajax()

jquery 调用 ajax 方法：

格式：$.ajax({});

参数：

type：请求方式 GET/POST

url：请求地址 url

async：是否异步，默认是 true 表示异步

data：发送到服务器的数据

dataType：预期服务器返回的数据类型

contentType：设置请求头

success：请求成功时调用此函数

error：请求失败时调用此函数

 

一般使用 type url data success

async一般默认异步

 

get 请求

代码:

$.ajax({ 

type: "get",

url: "../js/cuisine_area.json",

async: true,

success: function(msg) {

var str = msg;

console.log(str)

$('div').append("<ul></ul>");

for(var i = 0; i < msg.prices.length; i++) {

$('ul').append("<li></li>")

$('li').eq(i).text(msg.prices[i])

}

},

error: function(errMsg) {

console.log(errMsg);

$('div').html(errMsg.responseText)

}

});

 

post 请求

代码:

 

$.ajax({

type: "post",

data: "name=tom",

url: "../js/cuisine_area.json",

contentType: "application/x-www-form-urlencoded",

async: true,

success: function(msg) {

var str = msg;

console.log(str)

$('div').append("<ul></ul>");

for(var i = 0; i < msg.prices.length; i++) {

$('ul').append("<li></li>")

$('li').eq(i).text(msg.prices[i])

}

},

error: function(errMsg) {

console.log(errMsg);

$('div').html(errMsg.responseText)

}

});

 

2.$.get()

这是一个简单的 GET 请求功能以取代复杂 $.ajax 。

请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

 

以下 3 4 较为常用

 

1. 请求 json 文件， 忽略返回值

$.get('../js/cuisine_area.json');

 

2. 请求 json 文件， 传递参数， 忽略返回值

$.get('../js/cuisine_area.json', {

name: "tom",

age: 100

});

 

3. 请求 json 文件, 拿到返回值, 请求成功后可拿到返回值

$.get('../js/cuisine_area.json', function(data) {

console.log(data)

});

 

4. 请求 json 文件, 传递参数, 拿到返回值

$.get('../js/cuisine_area.json', {

name: "tom",

age: 100

}, function(data) {

console.log(data)

});

 

 

3. $.post()

这是一个简单的 POST 请求功能以取代复杂 $.ajax。

请求成功时可调用回调函数。 如果需要在出错时执行函数， 请使用 $.ajax。

 

1. 请求 json 文件， 忽略返回值

$.post('../js/cuisine_area.json');

 

2. 请求 json 文件， 传递参数， 忽略返回值

$.post('../js/cuisine_area.json', {

name: "tom",

age: 100

});

 

3. 请求 json 文件, 拿到返回值, 请求成功后可拿到返回值

$.post('../js/cuisine_area.json', function(data) {

console.log(data)

});

 

4. 请求 json 文件, 传递参数, 拿到返回值

$.post('../js/cuisine_area.json', {

name: "tom",

age: 100

}, function(data) {

console.log(data)

});

 

4.$.getJSON()

表示请求返回的数据类型是 JSON 格式的 ajax 请求

5.jsonp

远程跨域时，如果有两个域名，从其中一个域名去访问另一个域名时，使用普通的 ajax 方法是获取不到数据的，那么就可以使用 jsonp 方式发送请求。

添加属性：

jsonp:’callback’

dataType:’jsonp

 

代码:

 

$.ajax({

type: "post",

url: "http://iservice.itshsxt.com/restaurant/find",

dataType: 'jsonp',

jsonp: "callback",

success: function(msg, status) {

if(status == "success") {

var res = msg.result;

$('div').append("<ul></ul>");

for(var i = 0; i < res.length; i++) {

$('ul').append("<li></li>")

$('li').eq(i).text(res[i].name)

}

} else {

alert("请求失败,错误信息：" + msg);

}

},

error: function(errMsg, sta) {

console.log(errMsg.message)

}

});