本文介绍如何使用 jQuery 的 AJAX 方法进行客户端与服务器端的交互，包括 $.ajax(), load(), get(), post() 等方法的使用示例，并展示了序列化表单数据的方法。
坚持每天写博文，记录开发中的点点滴滴
本篇使用html作为客户端，jsp作为服务器端演示jQuery中的ajax的实现
- Ajax
*$.ajax()：最复杂、最灵活，最接近原生Ajax的用法
示例HTML：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>get()方法</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div.visible{
display:none;
}
</style>
<!--引入jquery的js库-->
</head>
<body>
<form action="" name="form1" id="form1">
<input type="text" name="username" id="username" value="zhang"><br>
<input type="text" name="psw" id="psw" value="99999"><br>
<input type="button" id="b1" value="登陆">
</form>
<div id="one">
</div>
</body>
<script language="JavaScript">
$(function(){
$("#b1").click(function(){
/*
* $.ajax(options)
* * options:(可选)
* * url:请求路径
* * type:请求类型
* * async:表示是否异步
* * data:发送到服务器端的请求数据,格式是key/value格式
* * success:表示Ajax异步交互请求成功后,回调函数(接收服务器端的响应)
* * function(data, textStatus){}
* * data:请求返回的数据内容
* * textStatus:表示请求的状态,值有success、error、notmodify、timeout等
* * error:表示Ajax异步交互请求失败后,回调函数
* function(XMLHttpRequest, textStatus, errorThrown){}
* XMLHttpRequest对象
* textStatus:表示请求的状态,值有success、error、notmodify、timeout等
* errorThrown:异常对象
* * 返回值:XMLHttpRequest对象
*/
var json = {
username : $("#username").val(),
psw : $("#psw").val()
}
$.ajax({
url : "get.jsp",
type : "get",
async : true,
data : json,
success : function(data, textStatus){
alert(data);
},
error : function(XMLHttpRequest, textStatus, errorThrown){
alert("请求错误啦。。。");
}
});
});
});
</script>
</html>
JSP：
<%@ page language="java" pageEncoding="UTF-8"%>
<%
System.out.println(request.getMethod());
System.out.println("connection server success!");
System.out.println("username = "+request.getParameter("username"));
System.out.println("password = "+request.getParameter("psw"));
out.println("helloworld");
%>*load()：最简单、最不灵活 缺点：
（1）load()不能自定义请求类型,而是由是否向服务器端发送请求数据
（2） load()不能自定义数据交换格式,只能使用文本(HTML)格式
示例：HTML：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>load()方法</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../../../js/jquery.min.js">
</script>
<style type="text/css">
div, span {
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Roman;
}
div.mini {
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family: Roman;
}
div.visible {
display: none;
}
</style>
<!--引入jquery的js库-->
</head>
<body>
<form action="" name="form1" id="form1">
<input type="text" name="username" id="username" value="zhang">
<br>
<input type="text" name="psw" id="psw" value="99999">
<br>
<input type="button" id="b1" value="登陆">
</form>
<div id="one">
</div>
</body>
<script language="JavaScript">
$(function(){
$("#b1").click(function(){
/*
* $(expr).load(url,data,callback)
* * url:请求路径,绝对路径或相对路径
* * data:请求参数,格式必须是key/value格式
* * callback:回调函数,function(data, textStatus, XMLHttpRequest){}
* * data:代表请求返回内容
* * textStatus:代表请求状态,值可能为: succuss, error, notmodify, timeout 4 种
* * XMLHttpRequest对象
*
* jQuery中封装Ajax操作
*
* load()方法的请求类型:
* * (默认情况下)在没有向服务器端发送请求数据的时候,load()方法的请求类型就是GET方式
* * 在向服务器端发送了请求数据的时候，load()方法的请求类型就是POST方法
* load()方法的问题:
* * load()不能自定义请求类型,而是由是否向服务器端发送请求数据
* * load()不能自定义数据交换格式,只能使用文本(HTML)格式
*/
var json = {
username : $("#username").val(),
psw : $("#psw").val()
}
$("#one").load("load.jsp",json,function(data, textStatus, XMLHttpRequest){
alert(data);
});
});
});
</script>
</html>
JSP：
<%@ page language="java" pageEncoding="UTF-8"%>
<%
System.out.println("connection server success!");
System.out.println(request.getMethod());
System.out.println("username = "+request.getParameter("username"));
System.out.println("password = "+request.getParameter("psw"));
out.println("helloworld!");
%>*$.get()：请求类型是GET
*$.post()：请求类型是POST
GET&POST示例 HTML：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>get()方法</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../../../js/jquery.min.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div.visible{
display:none;
}
</style>
<!--引入jquery的js库-->
</head>
<body>
<form action="" name="form1" id="form1">
<input type="text" name="username" id="username" value="zhang"><br>
<input type="text" name="psw" id="psw" value="99999"><br>
<input type="button" id="b1" value="登陆">
</form>
<div id="one">
</div>
</body>
<script language="JavaScript">
$(function(){
$("#b1").click(function(){
// /*
// * $.get(url,data,callback,type)
// * * url:请求路径
// * * data:请求参数,格式是key/value
// * * callback:回调函数,function(data, textStatus){}
// * * data:请求返回的数据内容,可以是HTML代码、XML片段或JSON格式等
// * * textStatus:请求的状态,其值是success、error、notmodify、timeout等
// * * 返回值:XMLHttpRequest对象
// * * type:返回内容格式，xml, html, script, json, text, _default。
// *
// * $.get()方法的请求类型一定是GET方式
// */
// var json = {
// username : $("#username").val(),
// psw : $("#psw").val()
// }
//
// $.get("get.jsp",json,function(data, textStatus){
// //直接接收服务器端的响应数据格式为JSON格式
// console.info(data);
//
// //var json = eval("("+data+")");
// //console.info(json);
// });
/*
* $.post(url,data,callback,type)
* * url:请求路径
* * data:请求参数,格式是key/value
* * callback:回调函数,function(data, textStatus){}
* * data:请求返回的数据内容,可以是HTML代码、XML片段或JSON格式等
* * textStatus:请求的状态,其值是success、error、notmodify、timeout等
* * 返回值:XMLHttpRequest对象
* * type:返回内容格式，xml, html, script, json, text, _default。
*
* $.post()方法的请求类型一定是POST方式
*/
// var json = {
// username : $("#username").val(),
// psw : $("#psw").val()
// }
//序列化元素
var json = $("#form1").serialize();
$.post("get.jsp",json,function(data, textStatus){
//直接接收服务器端的响应数据格式为JSON格式
console.info(data);
//var json = eval("("+data+")");
//console.info(json);
});
});
});
</script>
</html>
JSP：
<%@ page language="java" pageEncoding="UTF-8"%>
<%
System.out.println("conenction server success!");
System.out.println(request.getMethod());
System.out.println("username = "+request.getParameter("username"));
System.out.println("password = "+request.getParameter("psw"));
//响应文本格式
//out.println("helloworld!");
//响应XML格式
//response.setContentType("text/xml");
//out.println("<china><province name='jilinsheng'></province></china>");
//响应JSON格式:jQuery提供的get()或post()方法时,数据格式为JSON格式时,只能使用第三方工具构建JSON格式的数据内容,不能使用手工方式
out.println("[{'province':'jilinsheng'},{'province':'liaoningsheng'},{'province':'shandongsheng'}]");
%>GET和POST方式只是请求方法不一样，上面代码也包含了序列化元素内容，当使用GET和POST类型为JSON时，服务器端需要使用第三方工具构建JSON格式数据
*$.getScript()：获取脚本代码
*$.getJSON()：返回的数据格式是JSON格式
- 序列化元素
*serialize()
（1）序列化的是JSON格式中的key/value格式
（2）返回的是JSON字符串
*serializeArray()
（1）序列化的是JSON格式中的数组格式
（2）返回的是JSON对象
扫一扫
1541
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
