前端小结--ajax和spring互传json对象，并显示到列表中

前端小结–ajax和spring互传json对象，并显示到列表中

通常java后台传给前端参数可以用model，modelmap,modelmapandview等，但是在有些场合ajax提交时，需要利用json传递实体对象，这里给出一个实例记录一下。完整代码下载链接：

http://download.csdn.net/download/yhhyhhyhhyhh/9970542

PS: 关于ajax处理返回的json数据，除了html拼接，有没有其他的好用的看着舒服的方法？？？

环境

eclipse4.7.0，jdk1.8，maven，spring4.3.0，jackjson2.8.0。

1.配置

1.1maven添加jackjson jar包

jackson-core，jackson-databind，jackson-annotations

1.2.在springContext中，添加如下关于json解析对象的部分

<!--解析JSON对象 -->
<mvc:annotation-driven />
<!--下面屏蔽的部分不要也行好像，没去深入研究 -->
<!--<bean
class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter">
<property name="messageConverters">
<list>
<ref bean="mappingJacksonHttpMessageConverter" />
</list>
</property>
</bean>-->
<bean id="mappingJacksonHttpMessageConverter"
class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
<property name="supportedMediaTypes">
<list>
<value>text/html;charset=UTF-8</value>
</list>
</property>
</bean>

1.3controller中如下;

/*
* 测试前端向后端传json 对象，并返回json
*/
@RequestMapping(value = "/testJson1", method = RequestMethod.POST)
@ResponseBody
public List<Employeer> testJson1(@RequestBody Employeer employeer)  {
System.out.println(employeer.getName() + " " + employeer.getSex());
// 对前端json数据做其它处理，这里直接返回
List<Employeer> employeerList=new ArrayList<Employeer>();
employeerList.add(employeer);
employeerList.add(employeer);
employeerList.add(employeer);
return employeerList;
}

2.前端

2.1引入jquere

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>

2.2ajax提交数据

ajax函数例子如下：

<script type="text/javascript">
$("#login").click(function() {
var htmlContent = "";
$.ajax({
url : "testJson1",
type : "POST",
dataType : "json",
contentType : "application/json;charset=UTF-8",
data : JSON.stringify({
name : $("#name").val(),
sex : $("#sex").val(),
position : $("#position").val()
})，////这里是json对象数据
success : function(result) {
///////这里是对返回json对象的处理
$("#tb  tr:not(:first)").html("");
alert(JSON.stringify(result));
for (var i = 0; i < result.length; i++) {
htmlContent += "<tr style=‘text-align: center‘> "
htmlContent += "<td style=‘text-align: center‘>"
+ result[i].name
+ "</td>"
htmlContent += "<td style=‘text-align: center'>"
+ result[i].sex
+ "</td>"
htmlContent += "</tr>"
}
$('#tb').append(htmlContent);
},
error : function(result) {
alert("error!");
}
});
});
</script>

3.测试

ajax提交后，返回的jsond对象数组



显示到列表中