jQueryMobile Ajax的简单例子程序

最新推荐文章于 2024-08-17 11:31:53 发布

ming-Design

最新推荐文章于 2024-08-17 11:31:53 发布

阅读量228

点赞数

文章标签： java servlet ajax jquery

本文链接：https://blog.csdn.net/m0_61350679/article/details/125806024

版权

jQueryMobile Ajax JQueryServlet POST请求前后端交互

关键词由CSDN通过智能技术生成

jQueryMobile Ajax的简单例子程序，例子程序由JQuery.jsp以及JQueryServlet.java组成

JQuery.jsp


<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
	href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script
	src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>


<script type="text/javascript">
 
	   
	   $(document).ready(function () {
			$("#submitbtn").click(function(){
				
				    
					cache: false,
					$.ajax({
					  type: "POST",
					  url: "<%=request.getContextPath()%>/JQueryServlet",
					  data: $('#fmsgform').serialize(),
					  dataType:'text',
					  success:function(msg){

					    	   alert(msg);
					       					  		
					  },
					  
					 error: function(err){
				            alert(err);
				        }
			  	});
			});
			
			

       });
	   
	   
	
</script>


</head>



<body>

<div data-role="content">


			<form method="post" id="fmsgform" >
			
			  <label >msg:</label> <input type="text" name="fmsg"
					id="fmsg"  >
	         </form>

		</div>
		
		<a href="#"  id="submitbtn" class="ui-btn" data-position-to="window">提交确认</a>
</body>
</html>

JQueryServlet.java

package example;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class JQueryServlet
 */
@WebServlet("/JQueryServlet")
public class JQueryServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public JQueryServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		
		
		
		String msg = request.getParameter("fmsg");
		
		//输出中文，这一句一定要放到response.setContentType("text/html;charset=utf-8"),  response.setHeader("Cache-Control", "no-cache")后面，否则中文返回到页面是乱码 
        response.setContentType("text/html;charset=utf-8");
        response.setHeader("Cache-Control", "no-cache");  
        
        PrintWriter out = response.getWriter();  
		out.write(msg);
		
		
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

运行程序的浏览器效果图