$.ajax()

$.ajax()是所有ajax方法中最底层的方法,所有其他方法都是基于$.ajax()方法的封装。这个方法只有一个参数,传递一个各个功能键值对的对象。

$.ajax()方法对象参数表

参数 类型 说明
url String 发送请求的地址
type String 请求方式:POST或GET,默认GET
timeout Number 设置请求超时的时间(毫秒)
data Object或String 发送到服务器的数据,键值对字符串或对象
dataType String 返回的数据类型,比如html、xml、json等
beforeSend Function 发送请求前可修改XMLHttpRequest对象的函数
complete Function 请求完成后调用的回调函数
success Function 请求成功后调用的回调函数
error Function 请求失败时调用的回调函数
global Boolean 默认为true,表示是否触发全局Ajax
cache Boolean 设置浏览器缓存响应,默认true。如果dataType类型为script或jsonp则为false
content DOM 指定某个元素为与这个请求相关的所有回调函数的上下文
contentType String 指定请求内容的类型,默认为application/x-www-form-urlencoded
async Boolean 是否异步处理。默认为true,false为同步处理
processData Boolean 默认为true,数据被处理为URL编码格式。如果为false,则阻止将传入的数据处理为URL编码的格式
dataFilter Function 用来筛选响应数据的回调函数
ifModified Boolean 默认为false,不进行头检测。如果为true,进行头检测,当相应内容与上次请求改变时,请求被认为是成功的
jsonp String 指定一个查询参数名称来覆盖默认的jsonp回调参数名callback
username String 在HTTP认证请求中使用的用户名
password String 在HTTP认证请求中使用的密码
scriptCharset String 当远程和本地内容使用不同的字符集时,用来设置script和jsonp请求所使用的字符集
xhr Function 用来提供XHR实例自定义实现的回调函数
traditional Boolean 默认为false,不使用传统风格的参数序列化。如果为true,则使用。

html(部分)代码如下:

<input type="button" value="异步加载数据" />

post方式接受的test.php:

<?php
    if($_POST['url'] == 'ycku') {
        echo "瓢城Web俱乐部";
    } else {
        echo "木有!";
    }
?>

jQuery代码如下:

$("input").click(function() {
    $.ajax({
        type:"post", //这里可以换成GET
        url:"test.php",
        data:{
            url:"ycku"
        },
        success:function(response, status, xhr) {
            $("#box").html(response);
        }
    });
});

注意:对于data属性,如果是GET模式,可以使用三种之前说所的三种形式。如果是POST模式可以使用之前的两种形式。

表单序列化

Ajax用的最多的地方莫过于表单操作,而传统的表单操作是通过submit提交将数据传输到服务器端。如果使用Ajax异步处理的话,我们需要将每个表单元素逐个获取方才能提
交,这样工作效率就大大降低。

有html代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Ajax</title>
    <script type="text/javascript" src="jquery-1.12.3.js"></script>
    <script type="text/javascript" src="demo.js"></script>
</head>
<body>
    <form>
        用户名:<input type="text" name="user" />
        邮 件:<input type="text" name="email" />
        <input type="button" value="提交" />
    </form>

    <div id="box">

    </div>
</body>
</html>

post方式接受的user.php:

<?php
    echo $_POST['user'].' - '.$_POST['email'];
?>

常规形式的表单提交:

$("form input[type=button]").click(function() {
    $.ajax({
        type:"post",
        url:"user.php",
        data:{
            user:$("form input[name=user]").val(),
            email:$("form input[name=email]").val()
        },
        success:function(response, status, xhr) {
            $("#box").html(response);
        }
    });
});

以上方法的缺点:表单元素特别多的情况下,写起来非常麻烦,容易出错,复制提交的JS内容时,data属性需要修改的非常多。而使用表单序列化方法.serialize(),会智能的获取指定表单内的所有元素。这样,在面对大量表单元素时,会把表单元素内容序列化为字符串,然后再使用Ajax请求。

使用.serialize()序列化表单内容:

$("form input[type=button]").click(function() {
    $.ajax({
        type:"post",
        url:"user.php",
        data:$("form").serialize(), //一句话搞定
        success:function(response, status, xhr) {
            $("#box").html(response);
        }
    });
});
alert($("form").serialize()); //字符串形式的键值对,并且还对url进行了编码

.serialize()方法不但可以序列化表单内的元素,还可以直接获取单选框、复选框和下拉列表框等内容。

如html代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Ajax</title>
    <script type="text/javascript" src="jquery-1.12.3.js"></script>
    <script type="text/javascript" src="demo.js"></script>
</head>
<body>

    <form>
        用户名:<input type="text" name="user" />
        邮 件:<input type="text" name="email" />
        <input type="radio" name="sex" value="男" />男
        <input type="radio" name="sex" value="女" />女
        <input type="button" value="提交" />
    </form>

    <div id="box">

    </div>
</body>
</html>

使用序列化得到单选框中的元素内容:

$("form input[name=sex]").click(function() {
    $("#box").html(decodeURIComponent($(this).serialize())); //返回 sex=男/女
});

除了.serialize()方法,还有一个可以返回JSON数据的方法:.serializeArray()。这个方法可以直接把数据整合成键值对的JSON对象。

$("form input[name=sex]").click(function() {
    //console.log($(this).serializeArray()); //控制台输出Array[Object] 即{name:"sex",value:"男"}/{name:"sex",value:"女"}
    var json = $(this).serializeArray();
    $("#box").html(json[0].name + "=" + json[0].value);
});

有时,我们可能会在同一个程序中多次调用$.ajax()方法,而它们很多参数都相同,这个时候我们可以使用jQuery提供的$.ajaxSetup()方法请求默认值来初始化参数。

//初始化重复的属性
$.ajaxSetup({
    type:"post",
    url:"user.php",
    data:$("form").serialize()
});
$("form input[type=button]").click(function() {
    $.ajax({
        success:function(response, status, xhr) {
            $("#box").html(response);
        }
    });
});

在使用data属性传递的时候,如果是以对象形式传递键值对,可以使用$.param()方法将对象转换为字符串键值对格式。

alert($.param({  // 返回,如:user=123&email=123%40163.com
    user:$("form input[name=user]").val(),
    email:$("form input[name=email]").val()
}));
$("form input[type=button]").click(function() {
    $.ajax({
        type:"post",
        url:"user.php",
        data:$.param({
            user:$("form input[name=user]").val(),
            email:$("form input[name=email]").val()
        }),
        success:function(response, status, xhr) {
            $("#box").html(response);
        }
    });
});

注意:使用$.param()将对象形式的键值对转为URL地址的字符串键值对,可以更加稳定准确的传递表单内容。因为有时程序对于复杂的序列化解析能力有限,所以直接传递obj对象要谨慎。

初学Ajax(三)的更多相关文章

  1. 初学Ajax(二)

    $.get()和$.post() .load()方法是局部方法,因为它需要一个包含元素的jQuery对象作为前缀.而$.get()和$.post()是全局方法,无须指定某个元素.对于用途而言,.loa ...

  2. 初学Ajax(一)

    以下文字根据李炎恢——jQuery教程整理而成. Ajax全称为:“Asynchronous JavaScript and XML”(异步JavaScript和XML),它并不是JavaScript的 ...

  3. AJAX三种返回值方式

    (一)TEXT方式 该方式返回的是拼接字符串,想要取到其中的值,需要先将返回值进行拆分 (二)JSON方式 该方式返回的是数组,想要取到其中的值,可用索引项进行提取 (三)XML方式 XML:可扩展标 ...

  4. Python爬虫初学(三)—— 模拟登录知乎

    模拟登录知乎 这几天在研究模拟登录, 以知乎 - 与世界分享你的知识.经验和见解为例.实现过程遇到不少疑问,借鉴了知乎xchaoinfo的代码,万分感激! 知乎登录分为邮箱登录和手机登录两种方式,通过 ...

  5. maven初学(三) SNAPSHOT

    使用场景: 通常一个大型软件是由多个模块组成的,不同的组使用相同应用的不同版本. 在开发阶段,可能经常需要修复bug和优化. 这种情况下就会导致其他组频繁更新代码和pom文件 SANPSHOT SNA ...

  6. html初学(三)

    <!-- 我就是我,不一样的烟花 piu piu piu 干啥子 如来神掌 -- --- ----- .======. ***********啊啊啊啊啊啊 | INRI | | | | | .= ...

  7. PHP初学留神(三)

    星期一进行面试结束后,意味着我的考研日子也结束了,以及我的2013.在好好总结之后还不能停止学习,心想着要把算法继续学下去,还有Linux.不过呢,始终都要记住尼采老师的这句当头棒喝:“不加选择的知识 ...

  8. C语言初学 比较三个数中最大值的问题

    #include<stdio.h> #include<math.h> main() { int x,y,n,m ,z; scanf("%d%d%d",&am ...

  9. scss 初学笔记 三 继承

    //继承 .btn{ padding: 4px 10px; font-size: 14px; } .primary{ background:red; @extend .btn; } //%placeh ...

随机推荐

  1. db2 日期时间格式

    db2日期和时间常用汇总 1.db2可以通过SYSIBM.SYSDUMMY1.SYSIBM.DUAL获取寄存器中的值,也可以通过VALUES关键字获取寄存器中的值. SELECT 'HELLO DB2 ...

  2. Spark中决策树源码分析

    1.Example 使用Spark MLlib中决策树分类器API,训练出一个决策树模型,使用Python开发. """ Decision Tree Classifica ...

  3. 玩 perf

    有一个进程happy在执行,另一个进程spy发送了一个信号把happy给杀死了 我怎么能通过perf抓到spy进程? happy进程一直执行 在spy进程中调用kill(happy's pid) ,发 ...

  4. winpcap抓包原理

    winpcap抓包原理 WinPcap 是由伯克利分组捕获库派生而来的分组捕获库,它是在Windows 操作平台上来实现对底层包的截取过滤.WinPcap 是 BPF 模型和 Libpcap 函数库在 ...

  5. Pyqt 获取windows系统中已安装软件列表

    开始之前的基础知识 1. 获取软件列表 在Python的标准库中,_winreg可以操作Windows的注册表.获取已经安装的软件列表一般是读去windows的注册表: SOFTWARE\Micros ...

  6. MySQL性能参数详解 - max_connect_errors

    max_connect_errors是一个MySQL中与安全有关的计数器值,它负责阻止过多尝试失败的客户端以防止暴力破解密码的情况.max_connect_errors的值与性能并无太大关系. 默认情 ...

  7. Android IOS WebRTC 音视频开发总结(四七)-- 深度解读国内首届WebRTC大会背后的真相

    本文主要解读国内首届WebRTC大会背后的真相,文章来自博客园RTC.Blacker,支持原创,转载必须说明出处,更多详见www.rtc.help -------------------------- ...

  8. iOS 应用首次开启 出现引导页面

    关于引导页面 ,可以是独立的一个视图控制器控制的滚动视图. 重点是处理 如何判断app是首次开启 而调用这个视图控制器得方法. 逻辑如下: -(BOOL)isFirstLoad { if(!标记第一次 ...

  9. selenium python 第一个脚本

    为什么选择python?我的回答很简单,简单易学,功能强大! 下面看看python和selenium 2的结合是什么样子吧 一.第一个selenium python脚本: #coding = utf- ...

  10. solaris bind 符号未定义

    ld: fatal: Symbol referencing errors Recently, I am learning the Unix C and come to know that Socket ...