$.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. Linux系统初学-第三课 Linux网络配置1

    Linux系统初学-第三课 Linux网络配置 1.动态IP配置 配置文件路径 /etc/sysconfig/network-scripts/ ls查看网卡eth0,其中HWADDR值得获取:ifco ...

  2. 初学Ajax(二)

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

  3. 初学Ajax(一)

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

  4. ajax 三种数据格式

    1.JSON(格式要正确,可以引jar包操作) servlet代码 package com.hsp.action; import java.io.IOException; import java.io ...

  5. AJAX三种返回值方式

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

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

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

  7. Shell初学(三)传参

    一. 脚本代码:test.sh echo "Shell 传递参数实例!"; echo "执行的文件名:$0"; echo "第一个参数为:$1&quo ...

  8. [jquery-ajax] jquery ajax 三种情况对比

    <button class="btn1">async:false</button> <button class="btn2"> ...

  9. JavaScrip——初学(三个常用对话框及方法调用)

    一. 三个常用对话框: 1.都必须写在<scrip></scrip> <body> <font>alert("报错")</fo ...

随机推荐

  1. ASP.NET 在 Windows Azure 环境中使用基于 SQLServer 的 Session

    Session 嘛,占一点儿服务器资源,但是总归比 ViewState 和 Cookie 安全点儿,所以还是要用的. Windows Azure 环境中的 Web 服务器经由负载均衡调度,根本无法保证 ...

  2. java使用tomcat7的maven插件发布到服务器

    服务器容器使用tomcat7的maven插件,使用该插件不需要使用tomcat服务器.以下示例均以paycore项目为例. 一.使用tomcat7-maven-plugin 首先在主pom(payco ...

  3. android 数据库操作

    做android的数据库方面用的很少,所以用的时候记录下来,下次碰到直接copy,一下代码是最基本的实现: 首先是继承helper类: package com.create.rycreateim.db ...

  4. bzoj 1467: Pku3243 clever Y 扩展BSGS

    1467: Pku3243 clever Y Time Limit: 4 Sec  Memory Limit: 64 MB[Submit][Status][Discuss] Description 小 ...

  5. .Net MVC 4 Web Api 输出Json 格式

    1.Global 中增加json输出 GlobalConfiguration.Configuration.Formatters.JsonFormatter.MediaTypeMappings.Add( ...

  6. 【原】实战-Java如何使用Redis

    实战-Java如何使用Redis Redis的Client支持的语言非常丰富,如下: ActionScript Bash C C# C++ Clojure Common Lisp Crystal D ...

  7. ubuntu 100M 到 10M

    浅析ubuntu下如何修改网卡网速--将100M网卡改为10M网卡 公司的路由器可能比较陈旧,机器启动之后,默认网卡是100M的,但是登录QQ经常出现掉线现象,后来得知原来需要将100M网卡降频到10 ...

  8. 关于栈和堆的定量分析(★firecat推荐★)

    文章来源:http://blog.csdn.net/bigbug_zju/article/details/39525281 计算机系统中的堆和栈是跟程序员最密切的两个概念.如果没有栈和堆的概念,下面程 ...

  9. Java 学习 第四篇;面向对象(1)

    1:关于继承为了保证父类的良好封装性,不会被子类随意改变,设计父类时通常隐藏父类的内部数据,把父类属性改为private如果父类中可以被重写,但不希望被其他类自由访问可用protected修饰;2:什 ...

  10. Struts1——离BeanUtils看struts其原理1

    在Struts中非常典型的特点就是使用了ActionForm来搜集表单数据,可是搜集到的表单数据所有都是String类型的.假设我们直接拿来使用我们会面临一个非常麻烦的问题就是频繁的类型装换. Str ...