用jquery的ajax 異步提交表單數據demo，
導入相關的兩個jquery的js包。
index.html
- <html>
- <head>
- <script type ="text/javascript" src="jquery.js"></script>
- <script type ="text/javascript" src="jquery.form.js"></script>
- </head>
- <body>
- <script>
- $(function() {
- $("input[type='button']").bind("click", function() {
- $.ajax({
- type : 'post',
- url : 'servlet/ServletDemo',
- dataType : 'text',
- data : $('#f1').serialize(),
- success : function (xmlq) {
- alert(xmlq);
- },
- error : function (xmlq, errq) {
- alert(errq);
- }
- });
- });
- });
- </script>
- <form name="f1" id="f1" action="/servlet/ServletDemo">
- <input type="text" name="username"/>
- <input type="text" name="age"/>
- <input type="button" value="Ajax請求" />
- </form>
- </body>
- </html>
ServletDemo.java(Servlet)
- public void doPost(HttpServletRequest request, HttpServletResponse response)
- throws ServletException, IOException {
- PrintWriter out = response.getWriter();
- out.println(request.getParameter("username"));
- out.println(request.getParameter("age"));
- out.flush();
- out.close();
- }
web.xml
- <servlet>
- <description>This is the description of my J2EE component</description>
- <display-name>This is the display name of my J2EE component</display-name>
- <servlet-name>ServletDemo</servlet-name>
- <servlet-class>com.xiami.demo.servlet.ServletDemo</servlet-class>
- </servlet>
- <servlet-mapping>
- <servlet-name>ServletDemo</servlet-name>
- <url-pattern>/servlet/ServletDemo</url-pattern>
- </servlet-mapping>