jQuery的$.post方法与$.get方法的异步提交

首先是一个简单的表单：

<form id="form1">
	姓名：<input type="text" name="username" id="username" /><br />
	评论：<input type="text" name="content" id="content" /><br />
	<input type="button" id="send" value="提交"/>
</form>

<p>已有的评论：</p>
<div id="resText" style="color:red;"></div>

 接下来，演示 POST的提交方式：返回普通的字符串

<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
	$(function(){
		//方法
		//$.post(url,params,function(data,status){});
		$("#send").click(function(){
			var url = "post1.jsp";
			//var params = {"username":$("#username").val(),"content":$("#content").val()};
			var params = $("#form1").serialize();  //会自动转码，适合表单参数多的时候
			$.post(url,params,function(data,status){
				if(status=="success"){
					$("#resText").html(data);  //加载数据
				}else{
					alert("数据加载失败");
				}
			});
		});
	});
</script>

 后台的数据处理：

<%@page contentType="text/html; charset=UTF-8" %>
<%
request.setCharacterEncoding("utf-8");
String username = request.getParameter("username");
String content = request.getParameter("content");
out.println(username+"说："+content);
%>

 这样就完成了一个post方式的异步请求。

 

接下来，演示 POST的提交方式：返回XML

前台：

<script type="text/javascript">
	$(function(){
		//方法
		//$.post(url,params,function(data,status){});
		$("#send").click(function(){
			var url = "post2.jsp";
			var params = $("#form1").serialize();  //适合表单参数多的时候
			$.post(url,params,function(data,status){
				if(status=="success"){
					var username = $(data).find("comment").attr("username");
					var content = $(data).find("comment content").text();
					$("#resText").html(username+"说："+content);
				}else{
					alert("数据加载失败");
				}
			});
		});
	});
</script>

 后台：

<%@page contentType="text/html; charset=UTF-8" %>
<%
String username = request.getParameter("username");
String content = request.getParameter("content");

//这里要设置Content-Type为text/xml
response.setContentType("text/xml;charset=utf-8");  

out.println("<?xml version='1.0' encoding='UTF-8'?>");
out.println("<comments>");
out.println("<comment username='"+username+"'>");
out.println("<content>"+content+"</content>");
out.println("</comment>");
out.println("</comments>");
%>

 注意：设置Content-Type一定是：text/xml

 

以上是POST方法的请求方式，下面看看GET请求方式的处理。

GET请求方式的处理，稍稍麻烦一下，因为编码问题。

 

表单还是之前的表单；看下jQuery的写法。

首先还是返回普通的文本：

<script type="text/javascript">
	$(function(){
		
		//方法
		//$.get(url,params,function(data,status){});
		
		$("#send").click(function(){
			var url = "get1.jsp";
			//var params = {"username":encodeURI( $("#username").val() ),"content": encodeURI( $("#content").val() )};
			var params = $("#form1").serialize();  //适合表单参数多的时候，会自动转码
			$.get(url,params,function(data,status){
				if(status=="success"){
					$("#resText").html( decodeURI( data ) ); 
				}else{
					alert("数据加载失败");
				}
			});
		});
	});
</script>

 

<%@page contentType="text/html; charset=UTF-8" %>
<%

String username = request.getParameter("username");
String content = request.getParameter("content");
//GET转码
username = new String(username.getBytes("iso-8859-1"),"utf-8");
content = new String(content.getBytes("iso-8859-1"),"utf-8");

out.println(username+"说："+content);
%>

 接下来是GET请求的XML处理方式：

<script type="text/javascript">
	$(function(){
		//方法
		$("#send").click(function(){
			var url = "get2.jsp";
			var params =$("#form1").serialize();
			$.get(url,params,function(data,status){
				if(status=="success"){
					username = decodeURI(  $(data).find("comment").attr("username") );
					content  = decodeURI(  $(data).find("comment content").text() );
					$("#resText").html(username+"说："+content);
				}else{
					alert("数据加载失败");
				}
			});
		});
	});
</script>

 

<%@page contentType="text/html; charset=UTF-8" %>
<%
String username = request.getParameter("username");
String content = request.getParameter("content");

//这里要设置Content-Type为text/xml
response.setContentType("text/xml;charset=utf-8");  

out.println("<?xml version='1.0' encoding='UTF-8'?>");
out.println("<comments>");
out.println("<comment username='"+username+"'>");
out.println("<content>"+content+"</content>");
out.println("</comment>");
out.println("</comments>");

%>

 通过对比：可以看出，还是POST的请求处理更简单一些。