码迷,mamicode.com
首页 > 编程语言 > 详细

6、jQuery的Ajax与Java通过POST方式交互

时间:2016-05-07 08:10:46      阅读:142      评论:0      收藏:0      [点我收藏+]

标签:

1. jQuery.post( url, [data], [callback], [type] ) :使用POST方式来进行异步请求

         1.1  参数
              url (String) : 发送请求的URL地址.
             data (Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示。
             callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。
             type (String) : (可选)官方的说明是:Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)
         1.2  jQuery的Ajax与Java通过POST方式交互 
             1.2.1  html代码
<body>
	<div id="main">
		<button id="myBut">Ajax获取数据</button>
		<div id="container"></div>
	</div>
</body>
         1.2.2 style代码
<style type="text/css">
#main {
	margin: 0 auto;
	width: 400px;
}
#container {
	width: 400px;
	height: 300px;
	border: 1px dashed #666;
	text-align: center;
	line-height: 300px;
}
</style>

        1.2.3 Javsscript代码
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
	$(function() {
		$('#myBut').click(function() {
			$.post("JqueryAjaxServlet", {
				age : 18,
				name : "zhang"
			}, function(data, textStatus) {
				var container = $('#container');
				var resultData = $.parseJSON(data);
				var age = resultData.age;
				var name = resultData.name;
				container.html("name:" + name + "," + "age:" + age);
			});
		});
	});
</script>
          1.2.4    JqueryAjaxServlet.java代码
public class JqueryAjaxServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		String age = request.getParameter("age");
		String name = request.getParameter("name");

		String personJSON = "{\"name" + "\":\"" + name + "\"," + "\"age"
				+ "\":" + age + "}";
		System.out.println(personJSON);
		response.getWriter().write(personJSON);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		doGet(request, response);

	}

}
  1.2.5  web.xml代码
<servlet>
    <servlet-name>JqueryAjaxServlet</servlet-name>
    <servlet-class>com.jquery.ajax.com.JqueryAjaxServlet</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>JqueryAjaxServlet</servlet-name>
    <url-pattern>/JqueryAjaxServlet</url-pattern>
  </servlet-mapping>	
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>

6、jQuery的Ajax与Java通过POST方式交互

标签:

原文地址:http://blog.csdn.net/zbw18297786698/article/details/51334103

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!