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. ThinkPHP CURD方法盘点：data方法

    data方法也是模型类的连贯操作方法之一,用于设置当前要操作的数据对象的值,可能大家不太习惯用这个方法,今天来讲解下如何用好data方法. 用法 写操作 通常情况下我们都是通过create方法或者赋值 ...

  2. 声明：function FileSetAttr ( const FileName : string

    对文件和文件夹都有效  FileSetAttr('D:\Administrator\Desktop\patcher\Win32\Release\config\element\update',faHid ...

  3. 兼容：判断 iframe 是否加载完成

    判断 iframe 是否加载完成其实与 判断 JavaScript 文件是否加载完成 采用的方法很类似 var iframe = document.createElement("iframe ...

  4. PHP 开发者该知道的5个 Composer 小技巧

    Composer是新一代的PHP依赖管理工具.其介绍和基本用法可以看这篇<Composer PHP依赖管理的新时代>.本文介绍使用Composer的五个小技巧,希望能给你的PHP开发带来方 ...

  5. [020]转--C++ swap函数

    原文来自:http://www.cnblogs.com/xloogson/p/3360847.html 1.C++最通用的模板交换函数模式:创建临时对象,调用对象的赋值操作符 template < ...

  6. HDU 4259 - Double Dealing（求循环节）

    首先将扑克牌进行一次置换,然后分解出所有的循环节,所有循环节的扑克牌个数的最小公倍数即为答案 #include <stdio.h> #include <string.h> #i ...

  7. MySQL之事务隔离级别--转载

    转自:http://793404905.blog.51cto.com/6179428/1615550 本文通过实例展示MySQL事务的四种隔离级别. 1 概念阐述 1)Read Uncommitted ...

  8. Android（java）学习笔记135：Android中assets文件夹资源的访问

    Android资源文件分类: Android资源文件大致可以分为两种: 第一种是res目录下存放的可编译的资源文件: 这种资源文件系统会在R.java里面自动生成该资源文件的ID,所以访问这种资源文件 ...

  9. Android之HTTP网络通信--GET传递

    说明 在做一个项目的时候难免会与服务器打交道,这里我就做一个小的Demo来简单的说明一下HTTP的使用,我这里使用的是图灵的接口,你也可以登陆www.tuling123.com进行申请.我使用的是上面 ...

  10. 线程本地变量ThreadLocal

    一.本地线程变量使用场景 并发应用的一个关键地方就是共享数据.如果你创建一个类对象,实现Runnable接口,然后多个Thread对象使用同样的Runnable对象,全部的线程都共享同样的属性.这意味 ...