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. Mac Pro更换SSD后，在Win7下启用ACHI的方法AHCI

    在Mac Pro下更换SSD后,如果安装Win7,要将SSD改为AHCI模式是非常麻烦的.本文介绍如何将Mac的Win7下的SSD改为AHCI方式驱动,及几种常见问题的处理. 一.当Lion与Win7 ...

  2. 在iOS中怎样创建可展开的Table View?(下)

    接上篇:在iOS中怎样创建可展开的Table View?(上) 展开和合拢 我猜这部分可能是你最期望的了,因为本次教程的目标将会在在部分实现.第一次我们设法让顶层的cell,在它们点击的时候展开或者合 ...

  3. android报错及解决2--Sdcard进行文件的读写操作报的异常

    报错描述: 对Sdcard进行文件的读写操作的时候,报java.io.FileNotFoundException: /sdcard/testsd.txt (Permission denied),在往S ...

  4. 五、Socket之UDP异步传输文件-实现传输中取消传送

    上一篇文章四.Socket之UDP异步传输文件中,只实现了传输开始前拒绝接收文件,没有实现文件传输进行的时候取消传送,这篇文章中我们就来介绍怎样实现这个功能. 在传输过程中取消文件的传送,有很多地方要 ...

  5. java_jdbc_反射技术将查询结果封装为对象

    package cn.itcast.Reflect; import java.lang.reflect.InvocationTargetException; import java.lang.refl ...

  6. vs2012新建实体数据模型（EF）时无Mysql数据源

    sql转mysql数据库,用到EF,遇到vs2012新建实体数据模型时无Mysql数据源的问题. 问题截图如下: 解决方法1:(简单的的解决方法,有可能解决问题,如不能解决问题,请看解决方法2): ( ...

  7. Swift和OC相互调

    在项目中不免会有多中语言开发, 不说别的就我个人而言, 之前一直都是用 OC 写的代码, 封装很多工具类, 而苹果新出来 Swift , 现在项目在向 Swift 过渡, 或者新项目是 Swift , ...

  8. AppScan在项目中的使用流程

    AppScan在项目中的使用流程 http://www.docin.com/p-829022229.html

  9. ssh用root直接登录失败的问题

    解决方法: 1) 以root身份,chmod +w /etc/ssh/sshd_config 2) vi /etc/ssh/sshd_config 3) 将PermitRootLogin no改成Pe ...

  10. C语言的一些误用和知识总结

    现在学嵌入式的话,最主要是要把C语言熟悉,比如指针,链表,共用体,结构体等,还是得听老师的话.. 在学习单片机的时候才真正知道C语言是什么它是来干什么的~但是C语言用到嵌入式只是它小小的一部分他的应用 ...