Jquery-ajax

Jquery Ajax

1.1 $.ajax

• jquery调用ajax方法:
  • 格式: $.ajax({});
  • 参数:
    • type: 请求方式get/post 普通/加密 post请求需要服务器支持
    • url: 请求地址url
    • async: 是否异变,默认是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);

});