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. 【《Objective-C基础教程 》笔记ch05】（六）OC中的复合机制Composition

     1.复合通过包括作为实例变量的的对象指针实现的.        @interface Unicycle : NSObject        {           Pedal*pedal;     ...

  2. [MODx] 6. Cache '!' with login package

    1. Install login package. 2. Create a Template called 'login': [[!Login? &loginResourceId=`13` / ...

  3. 信号之sigsetjmp和siglongjmp函数

    在信号处理程序中经常调用longjmp函数以返回到程序的主循环中,而不是从该处理程序返回. 但是,调用longjmp有一个问题.当捕捉到一个信号时,进入信号捕捉函数,此时当前信号被自动地加到进程的信号 ...

  4. c++ 模运算

    在数学里,"模运算"也叫"求余运算",用mod来表示模运算. 对于 a mod b 可以表示为 a = q(商)*b(模数) + r(余数),其中q表示商,b表 ...

  5. Cummins INSITE locked and ask for verification code

    Some Cummins INSITE users turn to our engineer with a same question: INSITE has detected an invalid ...

  6. 按字母顺序排序的 arcpy.mapping 类列表

    arcpy.mapping 类可使用地图文档 (.mxd) 或图层文件 (.lyr) 中的不同对象类型的各种方法和属性.此文档可专门用作快速参考.有关详细信息,请使用链接跳转至各帮助页面. arcpy ...

  7. html5 list属性、autocomplete属性、pattern属性

    list属性的值为某个datalist元素的id,datalist也是html5中新增的属性,类似于选择框select,或者android中的autocomplete textview控件.datal ...

  8. mfc模态对话框

    Mfc模态对话框: 创建模态对话框: [模态对话框:具有独占行为,必须由用户完成对当前对话框的响应,才能对本对话框所属的进程进行其他操作] 例如: 我们创建一个加法计算器.点击计算之后,弹出一个对话框 ...

  9. Linux编程简介

    Linux编程可以分为Shell(如BASH.TCSH.GAWK.Perl.Tcl和Tk等)编程和高级语言(C语言,C++语言,java语言等)编程,Linux程序需要首先转化为低级机器语言即所谓的二 ...

  10. 【推理】UVa 10771 - Barbarian tribes

      Barbarian tribes  In a lost land two primitive tribes coexist: Gareds and Kekas. Every summer sols ...