网站首页 > 知识剖析 正文
1、$.ajax
jquery调用ajax方法:
格式:$.ajax({});
参数:
type:请求方式GET/POST
url:请求地址url
async:是否异步,默认是true表示异步
data:发送到服务器的数据
dataType:预期服务器返回的数据类型
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("<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。
// 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请求
$.getJSON('js/cuisine_area.json',{name:"tom",age:100},function(data){
console.log(data); // 要求返回的数据格式是JSON格式
});
本文是全套java入门到架构师教程之前端开发部分-jQuery的教学文档,如需全套前端或java入门到架构师教程请留言或私信。
猜你喜欢
- 2024-11-15 AJAX教程(ajax教程 csdn)
- 2024-11-15 php手把手教你做网站(二十四)jquery ajax上传大的附件
- 2024-11-15 前端开发之用以处理表单的jQuery控件之AJAX请求
- 2024-11-15 Ajax异步操作集合啦(ajax异步处理)
- 2024-11-15 前端面试题《AJAX》(ajax面试题2020)
- 2024-11-15 Python | Django 通过 form 表单和 ajax 上传文件
- 2024-11-15 前端监控 SDK 开发分享(前端监控 sdk 开发分享方案)
- 2024-11-15 Ajax请求时,请求类型,常用的几种 Content-Type json form-data xml
- 2024-11-15 [前端请求]Ajax知识点 Jquery接口封装 fetch原生js请求
- 2024-11-15 Ajax 请求方式(1)(ajax请求数据的方式有几种)
- 最近发表
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)