关于ajax进行json的数据后端的交互-优快云博客

在json中
对象—->{}对象
集合list—>[]数组
ajax 的异步请求的格式：
在这个中其实就是在为无论是Android端或者是web 端的提供一个数据的接口最后，最后将数据加工成统一的可识别的格式进行解析，达到数据传输的目的

而这个ajax的传输，相对于表单的传输，具有可以不需要进行页面的切换在当前页面就可以获取数据是否传输的成功的结果，从而提高了用户的体验度。

<script type="text/javascript">
	function ajaxModel(){
		//使用ajax想处理器发起请求
		$.ajax({
			url:"",//请求路径
			data:""//请求参数,不想传递参数时该属性可以省略
			dataType:""//放回值类型text json 返回值为String 就使用text ，返回是实体类或者集合就是用json,该属性可以省略
			type:"", //请求方式 get post
			async:false  //同步和异步 true和false
			success: function(data)//含有参数这个变量可以接受来自服务器返回的json数据
			{
				//执行成功是的回调函数：根据状态码来判断：200
			},
			error:function(){
				
				//执行时发生错误：500
			}
			
			
		});
	}


</script>

对于同步异步的解释：
同步就是将资源一直把持住，而不是放资源，而异步就是当这个资源进入一种等待或者休眠的状态的时候，他会释放当前的资源交给下一个线程进行执行。
这个是全部的属性。
当采用ajax的时候，就不可以使用form表单来进行提交而是在表单中指定一个id，通过button的属性历来进行获取jq的serilize的方法获取一系列的参数

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">

	<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>

处理器的书写：

@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";
		}
		
		
		
	}