使用Ajax请求并接受后台数据以及数据的简单处理

 假设数据库中有这样一张表用来记录文章信息，其中picturepath是记录的文章中的图片，不同图片用;隔开

 后台返回json数据：

/**
	 * 查询所有文章
	 * 
	 * @author xuLiang
	 * @since 0.0.1
	 */
	@GetMapping("/articles")
	@ResponseStatus(HttpStatus.OK)
	@ResponseBody
	@Override
	public GetArticleResp getAllArticles() {
		GetArticleResp getArticleResp = new GetArticleResp();
		getArticleResp.setCode(1);
		getArticleResp.setMessage("查询成功");
		getArticleResp.setArticles(usersService.getAllArticles());
		return getArticleResp;
	}

public class GetArticleResp {
	private int code;
	private String message;
	private VoGetArticleResp voGetArticleResp;
	private List
 articles;

	public int getCode() {
		return code;
	}

	public void setCode(int code) {
		this.code = code;
	}

	public String getMessage() {
		return message;
	}

	public void setMessage(String massage) {
		this.message = massage;
	}

	public VoGetArticleResp getVoGetArticleResp() {
		return voGetArticleResp;
	}

	public void setVoGetArticleResp(VoGetArticleResp voGetArticleResp) {
		this.voGetArticleResp = voGetArticleResp;
	}

	public List
 getArticles() {
		return articles;
	}

	public void setArticles(List
 articles) {
		this.articles = articles;
	}
}

当前端收到数据后如何对json进行处理？

先新建一个页面index.html

 
 
 
 
 
 
 
  
 
使用 AJAX 修改该文本内容
 

 

 ***********************************************分隔符*******************************************
  

 读取数据
  
 

 打开localhost/index后如下：

 接下来的重点就在LoadXmlHttp()方法里：

首先要用ajax发送请求，具体用法可以百度，也可以直接用postman来生成代码，这里介绍用postman来生成。

打开postman先在地址栏中输入访问的地址，注意请求方法是GET，点击send

 可以看到返回的json：

点击右上角橙色字体的Code,代码语言选择Javascript XHR，

可以看到自动生成的代码了，接下来对代码进行修改，首先在if (this.readyState == 4)里加上条件&& this.status==200，因为只有后台返回状态码为200时才意味着读取成功了，否则就是没有读取到数据

然后就要对读取到的json进行进一步操作，因为此处收到的json只是一个字符串，要先用JSON.parse()函数将他转换为json对象，转换为对象后就可以直接读取里面的数据了，比如：

 var obj=JSON.parse(this.responseText);
 alert(obj.message);

完整代码：

 function LoadXmlHttp(){
				var data = null;
				var xhr = new XMLHttpRequest();
				xhr.withCredentials = true;
				xhr.addEventListener("readystatechange", function () {
				  if (this.readyState == 4&& this.status==200) {			
                            var obj=JSON.parse(this.responseText);
                                    alert(obj.message);
                                console.log(this.responseText);				 
				  }
				});
				xhr.open("GET", "http://localhost/articles");
				xhr.setRequestHeader("Content-Type", "application/json");
				xhr.setRequestHeader("cache-control", "no-cache");
				xhr.send(data);

}

这时候页面就会提示：

对于复杂json对象，需要以数组的形式来选择

var response="
"+obj.articles[0].type+"
"+obj.articles[0].title+"
"+obj.articles[0].content;

在图片路径中储存了多个图片的路径，并用；隔开了，在这里用split()方法进行分割

 var picture=obj.articles[0].picturepath;
		function ReadPic(){
		var str=picture.split(';');
		var d1=document.getElementById("myDiv2");
		var d2=document.getElementById("myDiv3");
		var img=document.createElement("img");							
		img.src=str[0];
		d1.appendChild(img);
		var img2=document.createElement("img");	
		img2.src=str[1];
	        d2.appendChild(img2);								
							}

整个script代码：

其中这两行代码POST请求才会用到，GET可省略

var data = null;
xhr.send(data);

现在打开页面进行测试：

点击按钮“读取数据”：

可以看到所有数据都能正常展示，还可以用CSS来进行排版美化。