使用jQuery实现ajax数据请求实现增删改查

一,关于

关于原生的的ajax数据请求,我上一篇博客已经叙述了,这一篇来讲一讲通过jQuery封装的ajax简化了数据请求的方式。

二,写法

相对于原生的ajax,jquery实现的方法少了原生的写法的四大步骤,直接通过封装的方法$.ajax({}),实现数据请求,通过url拿到服务端的地址,通过接口找到后端数据的地址,如果有跨域,可以通过jsonp去实现,通过url找到数据的地址,再通过data找到数据的对象,然后找到相应的的数据,找到数据后,通过请求的数据,通过数据的返回值,如果成功就通过success,去实现数据的拿出再实现数据的渲染,失败就通过error返回失败的信息。

接下来通过代码的实现,上面是通过文字的阐述:

$.ajax({
    //请求的地址
    url : '',
    //请求类型,get,post
    type:'GET',
    // 请求的数据类型,可以是html,json,xml等
    dataType:'json',
    //传输的数据
    data:{
        num1:num1,
        num2:num2
    },
    //选择是否支持异步刷新,默认为true
    async:true,
    success:function(res){
         console.log('very good 请求成功' + res);
    },
    error:function(e){
         console.log('对不起,请求失败' + e);
    }
})

关于jsonp的认识

JSON 是一种轻量级的数据交换格式而JSONP它是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问。
JSONP的实现模式–CallBack

//回调函数
 function callback(data) {
     alert(data.message);
}

//调用callback函数,并以json数据形式作为阐述传递,完成回调
callback({message:"success"}); 

这其实就是JSONP的简单实现模式,或者说是JSONP的原型:创建一个回调函数,然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递,完成回调。

你可能感兴趣的:(jquery)