【java web】Ajax例子（servlet提交json类型数据，jQuery解析数据）

一效果说明

最终能够实现在界面上点击按钮，就可以通过jQuery访问后台，拿到json类型的数据，然后显示在主界面上。

非常简单的效果，但是也算是本人一个比较重大的成长过程，所以特地记录于此。

因为这样做能够实现MVC的真正分离，各个模块之间更加松散，降低耦合度。

二实现过程

1. Servlet

package cn.smileyan.demo.servlet;

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 com.google.gson.Gson;

import cn.smileyan.test.Person;

/**
 * Servlet implementation class TestServlet
 */
@WebServlet("/TestServlet")
public class TestServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		System.out.println("this is visited!");
		// 借助Gson包实现转换成json数据类型
                Gson gson=new Gson();  	
		Person p = new Person();
		p.setId("1234");
		p.setName("smileyan");
		String str=gson.toJson(p);  
                // 注意此过程没有进行编码的设置，所以不支持中文，要想支持中文设置一下就好了
		response.getWriter().append(str);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

Person类

package cn.smileyan.test;

public class Person {
	private String id;
	private String name;
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
}

2 前端代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax json 例子</title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		$.get("./TestServlet",function(data,status){
			var obj = eval ("(" + data + ")");
			
			 $("#name").html(obj.name);
			 $("#id").html(obj.id);
			 
		});
	});
});
</script>
</head>
<body>
<button>发送一个 HTTP GET 请求并获取返回结果</button>
<p id="name">name</p>
<p id="id">id</p>
</body>
</html>

三总结

点击按钮之后，便借助于jQuery访问后台的Servlet，然后Servlet使用append方法提交数据，jQuery拿到数据后进行解析。

另外，说明一下，“明明可以使用jsp文件中的很多资源来简化这个读数据过程，为什么要用html文件来显示反而造成更大麻烦了？” 因为我们想要实现的绝对不只是效果，我们希望我们的页面可以多次使用，我们希望做前端的完全可以不懂java，我们希望分工更加明确。试想，好好的html前端代码我们往里面各种添加EL表达是，Struts2标签，jsp标签，那这个界面给php开发者使用得修改一些时间，如果有50个界面呢？

【java web】Ajax例子（servlet提交json类型数据，jQuery解析数据）

一 效果说明

二 实现过程

三 总结

猜你喜欢

一效果说明

二实现过程

三总结