Jquery ajax 提交表单Demo

最新推荐文章于 2022-04-11 08:27:30 发布

passport_daizi

最新推荐文章于 2022-04-11 08:27:30 发布

阅读量7k

点赞数

分类专栏： 12 Jquery 10 JavaEE

本文链接：https://blog.csdn.net/kalision/article/details/9626035

版权

10 JavaEE 同时被 2 个专栏收录

46 篇文章 0 订阅

订阅专栏

12 Jquery

9 篇文章 0 订阅

订阅专栏

利用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>