Jquery ajax 提交表单Demo

最新推荐文章于 2025-03-18 20:02:11 发布

Matrix-

最新推荐文章于 2025-03-18 20:02:11 发布

阅读量3.5k

点赞数

分类专栏： javaScript/jQuery

本文链接：https://blog.csdn.net/luojian520025/article/details/18318509

版权

javaScript/jQuery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用jQuery AJAX进行异步表单提交的示例。通过点击按钮触发AJAX请求，将表单数据发送到服务器端的Servlet，并展示如何在服务器端处理这些数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用jquery的ajax 异步提交表单数据demo，

导入相关的两个jquery的js包。

index.html

[html]view plaincopy 
   
 <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)

[html]view plaincopy 
   
 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

[html]view plaincopy 
   
 <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>  