(Jquery 功能篇) Jquery ajax异步加载

阿里阅读：576 2021-04-01 10:03:34 评论：0

1.前段页面效果

2.前段页面代码

[html] view plain copy print ?

<input type="text" id="param1"/> +
<input type="text" id="param2"/> =
<input type="text" id="result"><input type="button" value="get content from server" id="button1">

3.服务器端代码

[java] view plain copy print ?

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
int param1 = Integer.parseInt(request.getParameter("param1"));
int param2 = Integer.parseInt(request.getParameter("param2"));
response.setHeader("pragma", "no-cache");
response.setHeader("cache-control", "no-cache");
PrintWriter out = response.getWriter();
out.println(String.valueOf(param1+param2));
out.flush();
}

public void doPost(HttpServletRequest request, HttpServletResponse response) 
			throws ServletException, IOException { 
 
		int param1 = Integer.parseInt(request.getParameter("param1")); 
		int param2 = Integer.parseInt(request.getParameter("param2")); 
		response.setHeader("pragma", "no-cache"); 
		response.setHeader("cache-control", "no-cache"); 
		PrintWriter out = response.getWriter(); 
		 
		out.println(String.valueOf(param1+param2)); 
		out.flush(); 
	}

4.前段页面脚本处理代码

[javascript] view plain copy print ?

<script type="text/javascript">
$(function(){
$("#button1").click(function(){
$.ajax({ //no need to judge the browser type
type: "POST", //类型
url: "MyServlet", //请求访问的servlet
dataType: "html",
data: { 'param1':$("#param1").val(),'param2':$("#param2").val()}, //传递的参数
success: function(returnedData){ //成功返回的回调函数
$("#result").val(returnedData);
}
});
});
});
</script>

标签:ajax

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。