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. 【Android开发】完美解决Android完全退出程序

    背景:假说有两个Activity, Activity1和Activity2, 1跳转到2,如果要在2退出程序,一般网上比较常见的说法是用 System.exit(0) 或是 android.os.Pr ...

  2. Android Settings 导入eclipse

    1.加载源码 Android Project from Existing Code 选择源码工程Settings: 2.加载所需要的jar包 (改下名字) out/target/common/obj/ ...

  3. PHP为fopen,file_get_contents等函数请求web地址时增加Http头的方法

    我们在使用fsockopen时可以方便的自定义自己请求的http头内容来访问某些对客户端请求头有特殊限制的网站,但是使用fopen,file_get_contents等函数请求web地址时怎么来灵活定 ...

  4. Java基础知识强化之网络编程笔记10：TCP之客户端读取文本文件服务器控制台输出

    1. TCP之客户端读取文本文件服务器控制台输出 (1)客户端:(发送数据到服务端) package cn.itcast_10; import java.io.BufferedReader; impo ...

  5. Android界面刷新

    Android的invalidate与postInvalidate都是用来刷新界面的,用法区别在于: 1)invalidate():实例化一个Handler对象,并重写handleMessage方法调 ...

  6. FastDFS为什么要结合Nginx

    FastDFS为什么要结合Nginx? 我们在使用FastDFS部署一个分布式文件系统的时候,通过FastDFS的客户端API来进行文件的上传.下载.删除等操作.同时通过FastDFS的HTTP服务器 ...

  7. CentOS7安装RabbitMQ集群

    实验环境 RabbitMQ 集群 server1.example.com    IP: 10.10.10.11    Node: diskserver2.example.com    IP: 10.1 ...

  8. Leetcode 104. Maximum Depth of Binary Tree（二叉树的最大深度）

    Given a binary tree, find its maximum depth. The maximum depth is the number of nodes along the long ...

  9. oracle中decode()函数

    简单写写,后续继续补充

  10. C#实现快速排序法

    现在有数组{ 3, 6, 2, 1, 9, 5, 4, 7 }; 然后用快速排序法把他们排序 1.首先 ,取出3作为比较数据 2.从最右边往左边比较找到第一个比3小的数据,把3在数组中的位置赋值为那个 ...