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



1.前段页面效果

2.前段页面代码

[html] view plaincopyprint?

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 plaincopyprint?

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 plaincopyprint?

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>