Ajax 及Jaskson封装

最新推荐文章于 2022-12-21 14:19:54 发布

DOONDO

最新推荐文章于 2022-12-21 14:19:54 发布

阅读量149

点赞数

分类专栏： JAVA-WEB

本文链接：https://blog.csdn.net/weixin_41866744/article/details/87909240

版权

JAVA-WEB 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

标准请求响应时浏览器的动作(同步操作):浏览器请求什么资源,跟随显示什么资源

ajax:异步请求:局部刷新,通过异步请求,请求到服务器资源数据后,通过脚本修改页面中部分内容
ajax 由 javascript 推出的，由 jquery 对 js 中 ajax 代码进行的封装,达到使用方便的效果

jquery 中 ajax 分类:

$.ajax({ 属性名:值,属性名:值}):是 jquery 中功能最全的.代码写起来相对最麻烦的
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.7.2.js""></script>
<script type="text/javascript">
    $(function(){
	/*
		url:请求服务器地址
		data:请求参数
		dataType:服务器返回数据类型
		dataType:服务器返回数据类型 ：xml、html、script、json、jsonp、text
		success:请求成功执行的功能，function(data) data服务器返回的数据
	*/	
	 $("a").click(function(){
            $.ajax({
		url:'demo',
		data:{"name":"张三"},
		dataType:'html',
		error:function(){
		    alert("请求出错")
		},
		success:function(data){
		    alert("请求成功"+data)
		},
		type:'POST'
	    });
	        return false;
	    }) 

</script>

</head>
<body>
<a href="#">跳转</a>
</table>
</body>
</html>
第二层(简化$.ajax):
$.get(url,data,success,dataType))
$.post(url,data,success,dataType)
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.7.2.js""></script>
<script type="text/javascript">
$(function(){
    $.post("demo",{"name":"张三"},function(data){
	alert(data);
    },"html");
    return false; 

});
</script>

</head>
<body>
<a href="#">跳转</a>
</body>
</html>
第三层(简化$.get())
$.getJSON(url,data,success). 相当于设置$.get中dataType=”json”
$.getScript(url,data,success) 相当于设置 $.get 中dataType=”script”

如果服务器返回数据是从表中取出.为了方便客户端操作返回的数据,服务器端返回的数据设置成 json,客户端把 json 当作对象或数组操作.

json:数据格式:

1.JsonObject:json 对象,理解成 java 中对象: {“key”:value,”key”:value}
2.JsonArray:json 数组[{“key”:value,”key”:value},{}]

推荐使用jaskson的jar包，因为SpringMVC就是使用这个工具包转换：

下面的例子是发AJAX填充数据到页面：

通过：ObjectMapper mapper= new ObjectMapper();

String result = mapper.writeValueAsString(userDo); userDo为对象，把对象转为json数组字符串

String result = mapper.writeValueAsString(list); list为集合，把集合转为json数组字符串

把JSON对象或者JSON数组转换为普通对象普通数组的方法，以userDo为例：

mapper.readValue(jsonObject, UserDo.class); json转普通对象

List<UserDo> userDoList = mapper.readValue(result, new TypeReference<List<UserDo>>(){}); json数组转集合
public static void main(String[] args) throws JsonParseException, JsonMappingException, IOException {
		ObjectMapper mapper= new ObjectMapper();
		String jsonObject = "{\"id\":2,\"name\":\"李四\",\"password\":\"654321\"}";
		UserDo userDo = mapper.readValue(jsonObject, UserDo.class);
		System.out.println("userDo:"+userDo);
	}
public static void main(String[] args) throws JsonParseException, JsonMappingException, IOException {
		UserDo userDo = new UserDo();
		userDo.setId(1);userDo.setName("张三");userDo.setPassword("123456");
		
		UserDo userDo1 = new UserDo();
		userDo1.setId(2);userDo1.setName("李四");userDo1.setPassword("654321");
		List<UserDo> list = new ArrayList<UserDo>();
		list.add(userDo);list.add(userDo1);

                ObjectMapper mapper= new ObjectMapper();
                String result = mapper.writeValueAsString(list); //把list转成JSON格式的字符串
    
                //再转回来
                List<UserDo> userDoList = mapper.readValue(result, new TypeReference<List<UserDo>>(){});
                for(UserDo u:userDoList){
			System.out.println(u);
		   }
	    }

DOONDO

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax 及Jaskson封装

标准请求响应时浏览器的动作(同步操作):浏览器请求什么资源,跟随显示什么资源 ajax:异步请求:局部刷新,通过异步请求,请求到服务器资源数据后,通过脚本修改页面中部分内容ajax 由 javascript 推出的，由 jquery 对 js 中 ajax 代码进行的封装,达到使用方便的效果 jquery 中 ajax 分类:$.ajax({ 属性名:值,属性名:值}):是 jq...
复制链接

扫一扫