Servlet实现前后端交互

8 篇文章 0 订阅
4 篇文章 0 订阅
原理:通过ajax调用HttpServlet来实现前后端数据交互
1.前端方面,通过ajax实现调用(别忘记引用jQuery)

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
	</script>
</head>
<body>
	name:<input id="div_name" name="name" type="text"/>
	age:<input id="div_age" name="age" type="text"/>
	sex:<input id="div_sex" name="sex" type="text"/>
	<input id="sub_1" type="button" value="提交"/>
</body>

	<script type="text/javascript">
	function postTest(){
		
		var data={
				"name":$("#div_name").val(),
				"age":$("#div_age").val(),
				"sex":$("#div_sex").val()
		}
		 $.ajax({
		        type: "post",
		        url: "http://localhost:8080/zscg/myser",
		        data: data,
		        cache: false,
		        async : false,
		      //  dataType: "JSON",
		        success: function (data ,textStatus, jqXHR)
		        {
		        
		        	changeData(data);
		        },
		        error:function (XMLHttpRequest, textStatus, errorThrown) {      
		           
		        }
		     });
		
	}
	$("#sub_1").bind("click",function(){
		
		postTest();
	});
	function changeData(da){
		$("#div_name").val(da.name);
		$("#div_age").val(da.age);
		$("#div_sex").val(da.sex);
	}
	</script>
	
</html>
2.后台通过继承HTTPservlet实现后台调用

即运行一下servlet获得地址放到前台的url中

package ser;

import java.io.IOException;
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 myser
 */
@WebServlet("/myser")
public class myser extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public myser() {
        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
		response.getWriter().append("Served at: ").append(request.getContextPath());
	}

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

		
		String rep = "xfgxf";
		rep="{\"name\":\"小王\",\"age\":22,\"sex\":\"男\"}";
		//doGet(request, response);
		response.setCharacterEncoding("utf-8");
		response.setContentType("application/json; charset=utf-8");
		response.getWriter().write(rep);
		
		String name=request.getParameter("name");
		String age=request.getParameter("age");
		String sex=request.getParameter("sex");

		System.out.println(name+""+age+""+sex);
		
	}

}
  • 0
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值