JQuery大大简化了Ajax通用操作，开发者只需要指定请求URL，回调函数即可。

三个主要方法：

$().param(obj):将obj参数（对象或数组）转化成查询字符串。

{name:"疯狂Java讲义", price:109}转换出的查询字符串为：
name=%E7%96%AF%E7%8B%82Java%E8%AE%B2%E4%B9%89&price=109

serialize()：将表单或表单控件转化成查询字符串。

user=vince&desc=%E4%BB%8B%E7%BB%8D&book=javaee

serializeArray():将表单或表单控件转化成形如{name:namelabel , value:realvalue}的对象。

第0表单控件名为：user,值为：vince
第1表单控件名为：desc,值为：介绍
第2表单控件名为：book,值为：javaee

实例

<!DOCTYPE html>

<html>

<head>

    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />

    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />

    <title> 处理表单 </title>

</head>

<body>

<form id="test">

用户名：<input id="user" name="user" type="text" /><br />

个人介绍：<textarea id="desc" name="desc"></textarea><br />

喜欢的图书：<select id="book" name="book">

    <option value="java">疯狂Java讲义</option>

    <option value="javaee">轻量级Java EE企业应用实战</option>

    <option value="ajax">疯狂Ajax讲义</option>

</select>

</form>

<button id="bn1">查询字符串</button>

<button id="bn2">查询JSON对象</button>

<button id="bn3">将对象转换为查询字符串</button><hr />

<span id="show"></span>

<script type="text/javascript" src="../jquery-1.8.0.js">

</script>

<script type="text/javascript">

    // 为id为bn1的按钮绑定事件处理函数

    $("#bn1").click(function()

    {

        // 将id为test1的表单转换为查询字符串

        $("#show").html($("#test").serialize());

    });

    // 为id为bn2的按钮绑定事件处理函数

    $("#bn2").click(function()

    {

        // 将所有输入元素转换为数组

        var arr = $(":input").serializeArray();

        $("#show").empty();

        // 遍历arr数组

        for (var index in arr)

        {

            $("#show").append("第" + index + "表单控件名为："

                + arr[index].name + ",值为：" + arr[index].value + "<br />");

        }

    });

    $("#bn3").click(function()

    {

        // 调用$.param将对象转换为查询字符串

        $("#show").html('{name:"疯狂Java讲义", price:109}'

            + '转换出的查询字符串为：<br/>'

            + $.param({name:"疯狂Java讲义", price:109}));

    });

</script>

</body>

</html>

load(url[,data][,callback]):向URL异步请求，将相应插入当前DOM。

data格式：{key1:val1,key2:val2}。callback是回调函数。

实例

<!DOCTYPE html>

<html>

<head>

    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />

    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />

    <title> 使用jQuery的load方法 </title>

</head>

<body>

<h3>请输入你的信息：</h3>

<form id="userForm">

    用户名:<input type="text" name="user" /><br />

    喜欢的图书:<select multiple="multiple" name="books">

        <option value="java">疯狂Java讲义</option>

        <option value="javaee">轻量级Java EE企业应用实战</option>

        <option value="ajax">疯狂Ajax讲义</option>

        <option value="xml">疯狂XML讲义</option>

    </select><br />

    <input id="load" type="button" value="Load"/>

</form><hr />

<div id="show"></div>

<script src="jquery-1.8.0.js" type="text/javascript">

</script>

<script type="text/javascript">

    // 为id为load的按钮绑定事件处理函数

    $("#load").click(function()

    {

        // 向pro发送Ajax请求，并自动加载服务器响应

        $("#show").load("pro" , $("#userForm").serializeArray());

    });

</script>

</body>

</html>

服务器端如何接收及响应Ajax

  1. Servlet response可接收可发送
  2. 服务器端写到session中
  3. struts 2支持stream类型的Result，可直接向浏览器生成二进制响应。
  4. Struts 2支持JSON插件。
  5. Struts 2支持Dojo插件。

$().ajax(options)

JQuery（三） Ajax相关的更多相关文章

  1. 从零开始学习jQuery (六) AJAX快餐

    一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些许秘籍. 本篇文章讲解如何使用jQuery方便快捷的实现A ...

  2. Struts2 使用jQuery实现Ajax

    在jQuery中将Ajax相关的操作进行封装,使用时只需在合适的地方调用Ajax相关的方法即可,相比而言,使用jQuery实现Ajax更加简洁,方便 1.$.Ajax()可以通过发送Http请求加载远 ...

  3. Jquery第三篇【AJAX 相关的API】

    前言 前面我们已经学了讲解了Jquery的选择器,关于DOM 的API还有事件的API.本博文需要讲解Jquery对AJAX的支持- 我们在开始使用JavaScript学习AJAX的时候,创建异步对象 ...

  4. jQuery中Ajax(三)

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

  5. 第十六章：Python の Web开发基础(三) jQuery与Ajax

    本課主題 jQuery 介绍 Ajax 介绍 jQuery 介绍 选择器 jQuery 的选择器分不同的种类,主要目的是用来查找目标的 HTML 标签,方便对目标标签进行操作,比如找到 <li& ...

  6. 详解Ajax请求（三）——jQuery对Ajax的实现及serialize()函数对于表单域控件参数提交的使用技巧

    原生的Ajax对于异步请求的实现并不好用,特别是不同的浏览器对于Ajax的实现并不完全相同,这就意味着你使用原生的Ajax做异步请求要兼顾浏览器的兼容性问题,对于java程序员来讲这是比较头疼的事情, ...

  7. jquery中ajax的相关事件汇总

    Jquery ajax事件分类 (一) 局部事件 local events 局部事件:在单个Ajax请求对象中绑定的事件,每个 Ajax 请求对象能够依据须要绑定自己的局部事件 .局部事件仅仅会被那个 ...

  8. jquery的ajax可以传入的三种参数类型

    在jquery的ajax函数中,可以传入3种类型的数据 1.文本:"uname=alice&mobileIpt=110&birthday=1983-05-12" 2 ...

  9. JQuery的ajax方法获取返回值得到了值还包含了不要的html源码 （Ajax相关知识）

    因为后台使用了response.Write():这个方法,当输出完了以后,没有结束掉会继续输出,所以需要用到response.End():这样问题就解决了 jquery的ajax 除了通过url传值, ...

  10. 对jquery的ajax进行二次封装以及ajax缓存代理组件：AjaxCache

    虽然jquery的较新的api已经很好用了, 但是在实际工作还是有做二次封装的必要,好处有:1,二次封装后的API更加简洁,更符合个人的使用习惯:2,可以对ajax操作做一些统一处理,比如追加随机数或 ...

随机推荐

  1. 【48】认识template元编程

    1.TMP(template metaprogramming),模版元编程有两个效力:第一,它让某些事情更容易:第二,可将工作从运行期转移到编译期.

  2. js 如何将无限级分类展示出来

    这个需要运用递归. 案例:将数据以 ul li ul li形式展现在div中. <div id="div"></div> 数据格式为json: var da ...

  3. 查看Linux主机CPU及内存信息

    查看CPU信息(型号)  # cat /proc/cpuinfo | grep name | cut -f2 -d: | uniq -c        8  Intel(R) Xeon(R) CPU ...

  4. [JavaScript]JS对select动态options操作[IE&FireFox兼容]

    <select id="ddlResourceType" onchange="getvalue(this)"></select>     ...

  5. 常用免费的WebServices地址

    天气预报Web服务,数据来源于中国气象局 公用事业http://www.webxml.com.cn/WebServices/WeatherWebService.asmx 中国股票行情分时走势预览缩略图 ...

  6. -----------------------------SpringMVC理解-----------------------------

    1.用户发送请求到前端控制器(DispatcherServlet); 2.前端控制器转发请求到处理器映射器(HandlerMapping): 3.处理器映射器将拦截的Action返回到前端控制器: 4 ...

  7. android studio的里的 content_XXX_xml问题

    遇到这个问题就是androidStudio的版本问题,androidStudio会出现这个问题是在androidStudio1.4以上版本当遇到这个问题的时候建Activity的时候选择EmptyAc ...

  8. Android Sutido 编译速度优化

    虽然Android Studio 此时已经更新到了Android Studio 2.1版本,build 版本android-studio-bundle-143.2739321.但是在安装该版本都是根据 ...

  9. jquery中的index方法

    问题描述:灵活使用jquery中的index方法 方法签名:index([selector|element]) 用法概述:P1.index(P2)  //调用者P1可以为对象或集合 参数为空,返回P1 ...

  10. Scala语言专题

    Scala基础01:基础语法 Scala基础02:函数,懒值,异常 Scala基础03:数组 Scala基础04:类与对象 Scala基础05:包与引用 Scala基础06:继承 Scala基础07: ...