不学jQuery可以学ajax吗,愈来愈少人用JQuery,但你就不学了吗?(5)

如须要跟多资料请点击下方图片⬇(扫码加好友→备注66)

a98328b87f4c48d3b44670f231eaa59a.pnghtml

Jquery Ajax

$.ajax

​ jquery调用ajax方法:jquery

​ 格式:$.ajax({});ajax

​ 参数:json

​ type:请求方式GET/POST服务器

​ url:请求地址urlapp

​ async:是否异步,默认是true表示异步异步

​ data:发送到服务器的数据async

​ dataType:预期服务器返回的数据类型ide

​ contentType:设置请求头函数

​ success:请求成功时调用此函数

​ error:请求失败时调用此函数

get请求

$.ajax({

type:"get",

url:"js/cuisine_area.json",

async:true,

success : function (msg) {

var str = msg;

console.log(str);

$('div').append("

for(var i=0; i

$('ul').append("

");

$('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("

for(var i=0; i

$('ul').append("

");

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

}

},

error : function (errMsg) {

console.log(errMsg);

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

}

});

$.get

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

​ 请求成功时可调用回调函数。若是须要在出错时执行函数,请使用 $.ajax。

// 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);

});

$.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);

});

$.getJSON

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

$.getJSON('js/cuisine_area.json',{name:"tom",age:100},function(data){

console.log(data); // 要求返回的数据格式是JSON格式

});

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值