您的位置：首页 > Web前端 > JQuery

jQuery中ajax异步操作 （包括$.ajax() load() $.get() $.post()等）

2016-05-29 14:00 621 查看
注意load()不是jQuery的静态方法，而是实例方法，所以要绑定到一个对象上

下边测试，jsp作为服务端、html作为客户端

一、load测试

load.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!");

%>


load.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-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(){
/*
* $(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>


二、get/post测试

get.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.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(){
//			/*
//			 * $.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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航