Ajax+Servlet实现简单前后端数据交互

最新推荐文章于 2024-05-12 22:45:54 发布

不坠青云之志

最新推荐文章于 2024-05-12 22:45:54 发布

阅读量3.3k

点赞数 9

分类专栏： Java 文章标签： servlet

本文链接：https://blog.csdn.net/qq_43279637/article/details/83018051

版权

Java 专栏收录该内容

86 篇文章 2 订阅

订阅专栏

前后端数据交互

今天我们来了解一下简单的前后端数据交互。

首先又java编辑器，tomcat服务器环境。

新建一个jave ee网站项目。给项目起好名字一直next最后选中web-xml选项，配置xml文件。如图

然后在你的新建项目下的java resource下的src新建servlet文件。

在webcontent下新建html文件，建议给html新建一个文件夹。

然后编写代码

html代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery.js"></script>
</head>
<body>
姓名：<input id="input_name" type="text" name="name">
<br>
学校：<input id="input_school" type="text" name="school">
<input id="btn1" type="button" value="change">
<div id="div_2" style="width:500px;height:500px;background-color:#ddd;">
<table id="tb_1" style="width:100%;">
</table>
</div>

<script>
$("#btn1").bind('click',function(){
	send();
})
function send(){
	var name1=$("#input_name").val();
	var school1=$("input_school").val();
	var jsON={
		"name2":name1,
		"school2":school1
	}
	$.ajax({
		type:"post",
		url:"//localhost/Practcie/stu",
		data:jsON,
		cache: false,
	    async : false,
	    success: function (data ,textStatus, jqXHR)
        {
        	
        	changeData(data);
        	
        },
        error:function (XMLHttpRequest, textStatus, errorThrown) {      
           
        }
	})
	
}
function changeData(data){
	alert(data.code);
	$("#input_name").val(data.code);
	$("#input_school").val(data.message);
}
</script>
</body>
</html>

java(服务器端代码)

package stu;

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;

import javafx.scene.control.Alert;
import sun.management.counter.Variability;

/**
 * Servlet implementation class stu
 */
@WebServlet("/stu")
public class stu extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public stu() {
        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
		System.out.println(request.getParameter("name2"));
		String s= "{\"code\":\"200\",\"message\":\"鎴愬姛鎻掑叆\"}";
		response.setCharacterEncoding("utf-8");
		response.setContentType("application/json; charset=utf-8");
		response.getWriter().write(s);
	}

}

需要注意一下几点，然后读者可以自己尝试一下。

我们利用的是jquery的ajax，参数有type(传递给服务器的方法),url(服务器处理的servlet.java代码)，data(一般是json数据)。success是成功返回服务器响应的时候会调用的函数。error是失败时调用函数。
注意html页面的编码。注意servelt的处理完返回的编码(response.setCharacterEncoding("utf-8");)和返回的类型(response.setContentType("application/json; charset=utf-8");)后面的编码是指返回之后html解析器解析的编码类型

好的，看一下效果。

前端页面当点击change按钮时，会改变内容。

服务器端会输出从前端获取的"军事对抗"

不坠青云之志

关注

9
点赞
踩
36

收藏

觉得还不错? 一键收藏
0
评论
Ajax+Servlet实现简单前后端数据交互

前后端数据交互今天我们来了解一下简单的前后端数据交互。首先又java编辑器，tomcat服务器环境。新建一个jave ee网站项目。给项目起好名字一直next最后选中web-xml选项，配置xml文件。如图然后在你的新建项目下的java resource下的src新建servlet文件。在webcontent下新建html文件，建议给html新建一个文件夹。然后编写...
复制链接

扫一扫

专栏目录