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

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>

时间: 2024-08-05 06:21:25

6、jQuery的Ajax与Java通过POST方式交互的相关文章

5、jQuery的Ajax与Java通过GET方式交互

1.jQuery.get( url, [data], [callback] ):使用GET方式来进行异步请求 1.1 参数:              url (String) :  发送请求的URL地址.              data (Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示,会做为jQueryString附加到请求URL中.              callback (Function) : (可选) 载入成功时回调函数(只有当Resp

1、Ajax与Java通过GET方式交互

1.关于Ajax交互的步骤 1.1  获取到xmlhttprequest 1.2  设置xmlhttprequest的onreadystatechange响应事件 1.3  准备获取ajax请求 xmlhttp.open("GET", "AjaxServerlet?age=18&name=zhang", true);   //Ajax方法的GET方式请求,参数是通过xmlhttp.open()携带的 1.4  发送ajax请求xmlhttp.send();

2、Ajax与Java通过POST方式交互

1.关于Ajax交互的步骤 1.1  获取到xmlhttprequest 1.2  设置xmlhttprequest的onreadystatechange响应事件 1.3  准备获取ajax请求 xmlhttp.open("POST", "AjaxServerlet", true); 1.4  设置消息头为表单形式,模仿表单的POSt提交xmlhttp.setRequestHeader("Content-type","applicati

7、jQuery的Ajax与Java交互带加载图片

1.jQuery的Ajax与Java交互带加载图片 1.1 html代码 <body> <div id="main"> <button id="myBut">Ajax获取数据</button> <div id="container"> <img src="./img/load.jpg" id="myimg"> </div>

jquery的ajax传递参数两种方式

<script type="text/javascript" src="js/jquery-1.7.js"></script> <script type="text/javascript"> $(function(){ $("#button").click(function(){ $.ajax({ url:'myServlet', type:'post', dataType:'json',

前端jQuery使用ajax与后端Servlet进行数据交互

前端代码: 1 $.ajax({ 2 type : "post", 3 url : "Calculator", //servlet文件名为Calculator,需要提前在web.xml里面注册 4 dataType : "text", 5 data : 6 { 7 "operator1" : operator1, //操作数 8 "operatorSign":operatorSign, //操作符 9 &q

jquery的ajax提交form表单方式总结

方法一: function AddHandlingFeeToRefund() { var AjaxURL= "../OrderManagement/AjaxModifyOrderService.aspx"; alert($('#formAddHandlingFee').serialize()); $.ajax({ type: "POST", dataType: "html", url: AjaxURL + '?Action=' + 'Submit

jQuery与Ajax的应用

Ajax的全称:Asynchronous JavaScript and XML (异步Javascript和XML) 传统模式中,数据提交通过表单方式实现,数据的获取是靠全页面刷新来重新获取整页的内容.而Ajax模式只是通过XMLHttpRequest对象向服务器端提交数据,即按需发送.因为Ajax需要与Web服务器端进行交互,所以用个服务器,我这里用的是Tomcat.  1. 传统Js的Ajax操作 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

【JAVAWEB学习笔记】28_jqueryAjax:json数据结构、jquery的ajax操作和表单校验插件

Ajax-jqueryAjax 今天内容: 1.json数据结构(重点) 2.jquery的ajax操作(重点) 3.jquery的插件使用   一.json数据结构 1.什么是json JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯.这些特性使JSON成 为理想的数据交换语言.易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络