Jquery Ajax
1.1 $.ajax
- jquery调用ajax方法:
- 格式:
$.ajax({});
- 参数:
type
: 请求方式get/post 普通/加密 post请求需要服务器支持url
: 请求地址urlasync
: 是否异变,默认是true表示异步data
: 发送到服务器的数据dataType
: 预期服务器返回的数据类型contentType
: 设置请求头success
: 请求成功时调用此函数error
: 请求失败时调用此函数
- 格式:
get请求
$.ajax({
type:"get",//请求方式
url:"js/cuisine_area.json",//请求地址
async:true,
data:{
//请求数据,json对象
userName:"123"//如果没有参数 可不设置
},
dataType:"json",//预期返回的数据类型 如果是json格式 在接收返回值时会自动封装成json对象
//请求成功时调用的函数
success:function(data){//data是形参名,代表的是返回的数据
console.log(data);//字符串
//将字符串转换成json对象 json对象不需要转换
//var obj=JSON.parse(data);
//Dom操作
//创建ul
var ul=$("<ul></ul>");
//遍历返回的数据数组
for(var i=0;i<data.length;i++){
//得到数组中的每一个元素
var user=data[i];
//创建li元素
var li="<li>"+user.userName+"</li>";
//将li元素设置到ul元素中
ul.append(li);
}
console.log(ul);
//将ul设置到body标签中
&("body").append(ul);//元素选择器
}
})
1.2. $.get
,$.post
这是一个简单的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);
})
/**
* $.get();
* 语法:
* $.get("请求地址","请求参数",function(形参){
*
* })
* $.post();
* 语法:
* $.post("请求地址","请求参数",function(形参){
*
* });
*/
//请求地址 参数 返回的
$.get("js/data.json",{},function(data){
})
1.3. $.getJSON
/**
* $.getJSON();//要求返回的数据格式必须是json格式
* 语法:
* $.getJSON("请求地址","请求参数",function(形参){
*
* });
*/
//请求地址 参数 返回的
$.getJson("js/data.json",{},function(data){
console.log(data);
});