$.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

    AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 JavaScript和 ...

  6. jQuery中Ajax(三)

    1. jQuery.ajaxSetup([options]), 设置全局 AJAX 默认选项. 参数见 'jQuery.ajax(url,[settings])' 说明. 2. jQuery.ajax ...

  7. AJAX三

    三.ajax 4.代参数的get方法 ①服务器 ②ajax代码 xhr.open("get",url,true) url="/demo/get_login?uname=& ...

  8. AJAX三种返回值方式

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

  9. Python爬虫初学（三）—— 模拟登录知乎

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

随机推荐

  1. 快速的搭建JFinal的ORM框架示例

    JFinal默认用的是Freemarker作为视图. 所以,打架还是准备好俩个jar包吧! freemarker-2.3.16.jar JFinal-bin-1.5.jar 新建web工程和添加lib ...

  2. iOS学习之UITableView

    一.UITableView的概念 UITabelView继承于UIScrollView,可以滚动. @interface UITableView : UIScrollView <NSCoding ...

  3. ios学习笔记之内存管理

    一,内存管理类型定义      1,基本类型  任何C的类型,eg:      int,short,char,long,long long,struct,enum,union等属于基本类型或结构体   ...

  4. 4 我们的第一个c#程序

    1.       控制台应用程序. 在我们这个培训中主要使用控制台应用程序来讲解知识点和做练习. 什么是控制台程序? 控制台程序运行在dos窗口.没有可视化的界面.可以通过Dos窗口进入输入和输出显示 ...

  5. Actionform

    Actionform 2013年7月8日 15:08 Reset 用actionform是把数据恢复到初始状态 Getter/setter Validate 验证 已使用 Microsoft OneN ...

  6. 莫名戳中"肋骨"的文章

    1 起初,我们总是会害怕,害怕不能得到自己渴望的物质生活,害怕遇不到那个好好爱自己的人,害怕失去青春也换不回事业上的进步,害怕会做下一个让自己悔恨的决定,可这一路,我们就是这样踩着自己的害怕和悔恨走来 ...

  7. Ant学习---第二节：Ant添加文件夹和文件夹集的使用

    一.创建 java 项目(Eclipse 中),结构图如下: 1.创建 .java 文件,代码如下: package com.learn.ant; public class HelloWorld { ...

  8. 关于js with语句的一些理解

    关于js with语句的一些理解   今天看到js的with语句部分,书中写到,with语句接收的对象会添加到作用域链的前端并在代码执行完之后移除.看到这里,我有两点疑问,添加到作用域链前端是不是指对 ...

  9. Kibana4学习<二>

    生产环境部署 Kibana4 是是一个完整的 web 应用.使用时,你需要做的只是打开浏览器,然后输入你运行 Kibana 的机器地址然后加上端口号.比如说:localhost:5601 或者 htt ...

  10. cygwin chmod 失效

    问题背景 为了在 Cygwin 下使用之前最喜爱的 screen 命令, 安装 Cygwin 时就选上了 screen 来运行一把 ganiks.liu@MAMIS-Gaiks-Liu /tmp $ ...