JQuery（三） Ajax相关
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
- Servlet response可接收可发送
- 服务器端写到session中
- struts 2支持stream类型的Result，可直接向浏览器生成二进制响应。
- Struts 2支持JSON插件。
- Struts 2支持Dojo插件。
$().ajax(options)
JQuery（三） Ajax相关的更多相关文章
- 从零开始学习jQuery (六) AJAX快餐
一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 本篇文章讲解如何使用jQuery方便快捷的实现A ...
- Struts2 使用jQuery实现Ajax
在jQuery中将Ajax相关的操作进行封装,使用时只需在合适的地方调用Ajax相关的方法即可,相比而言,使用jQuery实现Ajax更加简洁,方便 1.$.Ajax()可以通过发送Http请求加载远 ...
- Jquery第三篇【AJAX 相关的API】
前言 前面我们已经学了讲解了Jquery的选择器,关于DOM 的API还有事件的API.本博文需要讲解Jquery对AJAX的支持- 我们在开始使用JavaScript学习AJAX的时候,创建异步对象 ...
- jQuery中Ajax(三)
1. jQuery.ajaxSetup([options]), 设置全局 AJAX 默认选项. 参数见 'jQuery.ajax(url,[settings])' 说明. 2. jQuery.ajax ...
- 第十六章：Python の Web开发基础(三) jQuery与Ajax
本課主題 jQuery 介绍 Ajax 介绍 jQuery 介绍 选择器 jQuery 的选择器分不同的种类,主要目的是用来查找目标的 HTML 标签,方便对目标标签进行操作,比如找到 <li& ...
- 详解Ajax请求（三）——jQuery对Ajax的实现及serialize()函数对于表单域控件参数提交的使用技巧
原生的Ajax对于异步请求的实现并不好用,特别是不同的浏览器对于Ajax的实现并不完全相同,这就意味着你使用原生的Ajax做异步请求要兼顾浏览器的兼容性问题,对于java程序员来讲这是比较头疼的事情, ...
- jquery中ajax的相关事件汇总
Jquery ajax事件分类 (一) 局部事件 local events 局部事件:在单个Ajax请求对象中绑定的事件,每个 Ajax 请求对象能够依据须要绑定自己的局部事件 .局部事件仅仅会被那个 ...
- jquery的ajax可以传入的三种参数类型
在jquery的ajax函数中,可以传入3种类型的数据 1.文本:"uname=alice&mobileIpt=110&birthday=1983-05-12" 2 ...
- JQuery的ajax方法获取返回值得到了值还包含了不要的html源码 （Ajax相关知识）
因为后台使用了response.Write():这个方法,当输出完了以后,没有结束掉会继续输出,所以需要用到response.End():这样问题就解决了 jquery的ajax 除了通过url传值, ...
- 对jquery的ajax进行二次封装以及ajax缓存代理组件：AjaxCache
虽然jquery的较新的api已经很好用了, 但是在实际工作还是有做二次封装的必要,好处有:1,二次封装后的API更加简洁,更符合个人的使用习惯:2,可以对ajax操作做一些统一处理,比如追加随机数或 ...
随机推荐
- ios开发——实战OC篇&SQLite3的实际应用
SQLite3的实际应用 前面的文章中介绍了SQlite,并且介绍了他的各种语法及使用方法. 但是没有正在项目中使用特,今天就开始做一个小小的实例,就是使用SQLite3来实现数据库的相应操作并且把他 ...
- android学习日记13--数据存储之SQLite
2.SQLite 开源轻量级数据库,支持92-SQL标准,主要用于嵌入式系统,只占几百K系统资源此外,SQLite 不支持一些标准的 SQL 功能,特别是外键约束(FOREIGN KEY constr ...
- 应用：ValueStack
理解ValueStack的基本机制!对各种现象作出解释. ValueStack实际上就是对OGNL的封装,OGNL主要的功能就是赋值与取值,Struts2正是通过ValueStack来进行赋值与取值的 ...
- String使用equals方法和==分别比较的是什么？
equals方法和==的区别 首先大家知道,String既可以作为一个对象来使用,又可以作为一个基本类型来使用.这里指的作为一个基本类型来使用只是指使用方法上的,比如String s = &quo ...
- iOS之事件穿透
前言 小伙伴们在开发中是否遇到过这样的需求呢,一个控件的某个部分被另外一个控件遮挡住,当点击这个重叠部分时,需要响应被遮盖控件的点击事件,就如下图所示 当我们点击区域3时,响应蓝色按钮的点击事件, ...
- arcgis 绝对、相对、UNC 和 URL
您每天都通过路径浏览至数据和工具箱.在共享数据和工具之前,您对此可能没有做太多考虑,其实您也无需考虑.本部分将详细讨论以下方面内容:路径.定义不同类型的路径以及 ArcGIS 对路径的管理方式. 路径 ...
- struts2的action从request获取参数值的几种方式
使用jquery框架的ajax能够方便的向后台传递参数,以$.post为例,参数有2种方式字符串和键值对:$.post(url, "name=aty&age=25")和$. ...
- （转）（contant的一些用法）
主要就是增加约束的 以下几种约束 .并 一一列举: 1.主键约束:要对一个列加主键约束的话,这列就必须要满足的条件就是分空因为主键约束:就是对一个列进行了约束,约束为(非空.不重复)以下是代码 要对 ...
- Orchard 学习-安装Orchard
前段时间使用一个ABP的框架进行了一个简单CMS开发.但感觉自己开发CMS不够灵活和通用,所以还是学习一下Orchard.学习的第一步,阅读官方的文档.由于是英文,所以我对其进行了翻译和记录,方便自己 ...
- ASP判断文件地址是否有效
<% Response.Write("<head><style><!--span{ font-size: 9pt }--></style> ...