开发者社区> 技术小阿哥> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

用jQuery实现Ajax

简介:
+关注继续查看

前置知识:ajax原理,json字符串进行信息传递。

  • Ajax主要的功能是实现了浏览器端 异步 访问服务器:通过浏览器的XMLHttpRequest对象发出小部分数据,与服务端进行交互,

服务端返回小部分数据,然后更新客户端的部分页面。

  • json是Ajax发送小部分数据的一种轻量级数据格式,可以简单易懂的给服务器或者浏览器交互数据,包括json对象,json数组对象。

一、jquery.ajax()

jquery 库中已经封装了ajax请求的方法。

jquery.ajax([settings])。发请求并且能得知成功还是失败。

  • type:类型,"POST"或者"GET",默认是"GET"。

  • url:发送请求的地址。

  • data:是一个对象,连同请求发送到服务器的数据

  • dataType:预期服务器返回的数据类型。如果不指定,jQuery将自动根据HTTP包含的MIME信息来智能判断,一般我们采用json个数,可以设置为"json"。

  • success:是一个方法,请求成功后的回调函数。传入返回后的数据,以及包含成功代码的字符串。

  • error:是一个方法、请求失败时调用此函数。传入XMLHttpRequest对象。

jquery初始化。

$(document).ready(function(){

});

error方法中第一个参数是jqXHR,可以通过jqXHR获取status。

二、jquery GET请求

复制代码

$(document).ready(function(){
    $("#searchBtn").click(function(){
        $.ajax({
            type:"GET",
            url:" https://api.passport.xxx.com/checkNickname?username="+mylogin.username+"&token="+mylogin.token+"&nickname="+nickname+"&format=jsonp&cb=?",
            dataType:"json",
            success:function(data){                if(data.errorCode==0){
                                         $("#nickname").val(mylogin.nickname);                             
                                 }else{
                                         $("#nickname").val("用户");                         
                                 }
            },
            error:function(jqXHR){
                console.log("Error: "+jqXHR.status);
            }
        });
    });
});

复制代码

 

三、POST请求

复制代码

function dologin(qrid,username,token){
    $.ajax({
        url:"http://api.passport.pptv.com/v3/login/qrcode.do",
        type:"post",
        dataType:"jsonp",
        data:{from:"clt",qrid:qrid,username:username,token:token},
        success:function(data){             try {                    var p = external.GetObject('@xxx.com/passport;1');
                    p.On3rdLogin2(0,0,data,true);
                } catch (e) {                    return false;
                }
                setTimeout(function () {                    try {                        var wb = external.Get('Signin2Window');
                        wb.OnClose();
                    } catch (e) {
                    }
                }, 200);
        }
    });
}

复制代码

POST请求,不需要去拼url字符串了,只需要指定data,ajax在传递的时候就会自动把它拼成url。

Content-Type是ajax为我们自动加上去的。

Form Data在设置的时候,是用JSON对象的一个方式设置的。

但实际上在传递的时候,jquery已经为我们拼成了url的格式,而且进行了一些转码。

 

 

POST代码demo:

复制代码

$.ajax({
    type:"POST",
    url:"service.php",
    dataType:"json",
    data{
        name:$("#staffName").val(),
        number:$("#staffNumber").val(),
        sex:$("#staffSex").val(),
        job:$("#staffJob").val(),
    },
    success:function(data){        if(data.success){
            $("#createResult").html(data.msg);
        }else{
            $("#createResult").html("出现错误"+data.msg);
        }
    },
    error:function(jqXHR){
        console.log("发生错误:"+jqXHR.status);
    }
});

复制代码



本文转自 sshpp 51CTO博客,原文链接:http://blog.51cto.com/12902932/1926152,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
JQuery实现仿sina新浪微博新鲜事滚动
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
666 0
过去几个月出炉的30款最喜欢的 jQuery 插件
  在这篇文章中,我们收集了一些在过去的几个月里最喜欢的 jQuery 插件。为了使您更容易搜索到自己喜欢的 jQuery 插件,我们已经对插件进行了分类: 页面布局插件,图片和视频插件,滑块和画廊,排版插件等等。
952 0
Web 开发最有用的50款 jQuery 插件集锦——《内容滑块篇》
  今天给大家带来的是在 Web 项目中常用的内容滑块插件。这个系列的文章将向大家分享50款最具创新的,同时也是最有用的 jQuery 插件,这些插件分成以下类别:网页布局插件,导航插件,表格插件,滑块和转盘插件,图表插件,图片特效插件以及视频插件等等,欢迎大家关注我的后续博文。
1261 0
Swipebox – 用于触屏设备的精美 jQuery Lightbox 插件
  Swipebox 是一款可触摸的 jQuery 灯箱效果插件,可用于桌面,移动和平板电脑。它移动设备支持滑动手势导航,桌面电脑上可以用键盘导航,不支持 CSS3 过渡特性的浏览器使用 jQuery 降级处理,支持视网膜显示,能够通过 CSS 轻松定制。
885 0
Unslider – 轻量的响应式 jQuery 内容滑块插件
  Unslider 是一款非常轻量的 jQuery 插件(压缩后只有 1KB),能够用于任何 HTML 内容的滑动。可以响应容器的大小变化,自动排布不用大小的滑块。可以通过整合 jQuery.event.swipe 来让其支持触屏设备的滑动功能。
972 0
jPanelMenu – 创建面板风格菜单的 jQuery 插件
  jPanelMenu 是一款用于创建面板风格的 jQuery 菜单插件。这种风格在移动版的 Facebook 和 Google 以及众多的原生 iPhone 应用中很常见。在支持的设备上使用硬件加速的 CSS3 过渡来实现平滑的动画效果,对于支持的浏览器,使用 jQuery 动画引擎作为降级方案。
799 0
Spoiler Alert – 实现内容模糊隐藏效果的 jQuery 插件
  Spoiler Alert 是一款非常好玩的 jQuery 小插件,可以在您的网站上实现内容模糊隐藏效果。鼠标悬停的时候会有提示,点击一下就可以看到原始的内容了。   我能想到的最好的应用场景是在线测验,先把答案隐藏,等答完题后点击可以核对答案。
872 0
2012年最有用的50款 jQuery 插件集锦——《表单篇》
  这篇文章继续向大家分享一批实用的 jQuery 插件,今天带来的是网站项目中最常用的表单插件。这是一个系列的文章,将向大家分享50款最具创新的,同时也是最有用的 jQuery 插件,这些插件分成以下类别:网页布局插件,导航插件,表格插件,滑块和转盘插件,图表插件,图片特效插件以及视频插件等等,欢迎大家关注。
1020 0
【精心推荐】20款优秀 jQuery Accordion(手风琴)特效插件
  Accordion(手风琴)是网站中常用的效果之一,用于一组内容(图片、文本等)之间的切换显示。使用 jQuery 能够轻松实现 Accordion 效果,今天这篇文章向大家推荐网站开发中常用的20款优秀 jQuery 手风琴效果插件。
1528 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
JavaScript异步编程
立即下载
JavaScript函数
立即下载
低代码开发师(初级)实战教程
立即下载