前端与后端异步传递json数据

前端传递json数据给后端服务器

 $.ajax({
                        url: "http://127.0.0.1:8080/web1/find",
                        type: "POST",
                        contentType:"application/json;charset=utf-8",
                        crossDomain: true,
                        data: {"BH":val},
                        dataType:"json",
                        success:function(data){
                            console.log(data);
                            $.each(data, function(k,value){
                                var tr = $("<tr></tr>");
                                for(var i=0;i< key.length; i++){
                                    var index = key[i];
                                    // json不能用 value.index
                                    console.log(value);
                                    // 对传递的数据进行json处理  传递的数据实质为json字符串 要进行json的处理(转为json对象)
                                    var td = $("<td>"+ value[index]+ "</td>");
                                    tr.append(td);
                                }
                                $("tbody").append(tr);
                            });

后端服务器接受前端发送的json数据，此数据为key=value的形式存储，加入只是简单的json数据我们可以自己分割字符串"="获得他的value,若传递的是对象，或者数组需要用第三方插件fastjson 将其转为java可以使用的对象

//	produces = {"application/json;charset=utf-8","text/html;charset=utf-8"} 与requestbody连用
	@RequestMapping(value="/find", 	produces = {"application/json;charset=utf-8","text/html;charset=utf-8"}) 
	public String find(@RequestBody String BH){
		System.out.println("输出请求参数");
		System.out.println(BH);
//		JSON数据从前端转发到后端被接受  后端要加requesbody注解接受json
//		json数据接受后 为key=value的方式存储  所以我们要分割  遇到复杂的json需要用fastjson转成java	
		
		//json字符串要解析  因为其是字符串为key=value的方式分割  ，简单的自己分割 复杂的交割fastjson
		
		List<XiangMu> list = xiangMuService.findByCondition(BH.split("=")[1]);
		
//		将java对象变成json字符串传递给前端
		String jsonString = JSON.toJSONString(list);
		 
		System.out.println(jsonString);
		return  jsonString;
	}

后端传递的json数据传给前端后，前端处理(js对象与json一样)

后端传递的数据乱码的问题 在requestmapping注解加入属性就行了

@RequestMapping(value="/find", 	produces = {"application/json;charset=utf-8","text/html;charset=utf-8"})

注意跨域问题
当使用ajax发送请求时，由于域名不同那个会造成无法请求，在web.xml文件配置

<filter>
		<filter-name>CORS</filter-name>
		<filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
		<init-param>
			<param-name>cors.allowOrigin</param-name><!--这个标签是关键, *代表所有源都能访问 -->
			<param-value>*</param-value>
		</init-param>
		<init-param>
			<param-name>cors.supportedMethods</param-name>
			<param-value>GET, POST, HEAD, PUT, DELETE</param-value>
		</init-param>
		<init-param>
			<param-name>cors.supportedHeaders</param-name>
			<param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modified</param-value>
		</init-param>
		<init-param>
			<param-name>cors.exposedHeaders</param-name>
			<param-value>Set-Cookie</param-value>
		</init-param>
		<init-param>
			<param-name>cors.supportsCredentials</param-name>
			<param-value>true</param-value>
		</init-param>
	</filter>

	<filter-mapping>
		<filter-name>CORS</filter-name>
		<url-pattern>/*</url-pattern>
	</filter-mapping>