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

- 日理万妓 2023-10-16 19:01 18阅读 0赞

1.前段页面效果

![0_1321067854XbbX.gif][]

2.前段页面代码

**\[html\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

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

3.服务器端代码

**\[java\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  public void doPost(HttpServletRequest request, HttpServletResponse response)
2.  throws ServletException, IOException \{
3.  
4.  int param1 = Integer.parseInt(request.getParameter("param1"));
5.  int param2 = Integer.parseInt(request.getParameter("param2"));
6.  response.setHeader("pragma", "no-cache");
7.  response.setHeader("cache-control", "no-cache");
8.  PrintWriter out = response.getWriter();
9.  
10. out.println(String.valueOf(param1+param2));
11. out.flush();
12. \}

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][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  <script type="text/javascript">
2.  $(function()\{
3.  $("\#button1").click(function()\{
4.  $.ajax(\{ //no need to judge the browser type
5.  type: "POST", //类型
6.  url: "MyServlet", //请求访问的servlet
7.  dataType: "html",
8.  data: \{ 'param1':$("\#param1").val(),'param2':$("\#param2").val()\}, //传递的参数
9.  success: function(returnedData)\{ //成功返回的回调函数
10. $("\#result").val(returnedData);
11. \}
12. \});
13. \});
14. \});
15. </script>

[0_1321067854XbbX.gif]: http://hi.csdn.net/attachment/201111/12/0_1321067854XbbX.gif
[view plain]: http://blog.csdn.net/yyywyr/article/details/6962400#