关于ajax进行json的数据后端的交互

1
2
3
4
5
6
7
8
9
10

body>
	<form  id="editForm">
	<input type="text" name="name">
	<input type="text" name="age">
	<button type="button" onclick="addStu()">提交</button>
	</form>
	
	<button type="button" onclick="ajaxModel()">ajax操作json的实体类</button><br>
	<button type="button" onclick="ajaxList()">ajax操作json的list集合</button>
	<script type="text/javascript">

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

<script type="text/javascript">

	function ajaxModel(){
		
		//使用ajax想处理器发起请求
		$.ajax({
			url:"/Day21/jsonModel",//请求路径
			data:"",//请求参数,不想传递参数时该属性可以省略
			dataType:"json",//放回值类型text json 返回值为String 就使用text ，返回是实体类或者集合就是用json,该属性可以省略
			type:"post", //请求方式 get post
			async:false,  //同步和异步 true和false
			success: function(data)//含有参数这个变量可以接受来自服务器返回的json数据
			{
				//执行成功是的回调函数：根据状态码来判断：200
				//回调函数中的变量可以接受处理器的json数据
				//操作json的方式与实体类基本一致(于el表达数基本一致，只不过没有了)
				alert(data.name);
				alert(data.age);
			},
			error:function(){
				
				//执行时发生错误：500
			}
			
			
		});
	}
	function ajaxList(){
		
		$.ajax({
			url:"/Day21/jsonModelList",
			success:function(data)
			{
				for(var i=0;i<data.length;i++)
					{
						alert(data[i].name);
						alert(data[i].age);//获取到数组中的元素
					}
				//2.each循环
				//第一个参数，用来技术使用，当前循环是的第几次
				//第二个参数每次循环的数组中的真正的元素
				$.each(data,function(key,i){
					alert(i.name);
					alert(i.age);
					
				}); 
			}
			
			
		});
	}
	function addStu(){
		$.ajax({
			url:"/Day21/addStu",
			data:$("#editForm").serialize(),
			success:function(data){
				
				if(data=="success")
					{
					alert("成功插入了");
					}
				else{
					alert("插入失败了");
				}
			}
			
		})
		
	}

</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

@ResponseBody//注意：在ajax进行数据传输的过程中一定要加上这条注解，这样他的返回的不会经过视图解析器了
	@RequestMapping("/addStu")
	public String addStu(stuModle stumodle){
		System.out.println(stumodle);
		Random random =new Random();
		//可以更具返回的结果
		if (random.nextBoolean()) {
			
			return "success";//通过return给出一个结果
		}else {
			
			return "fail";
		}
		
		
		
	}