前端小结–ajax和spring互传json对象,并显示到列表中
通常java后台传给前端参数可以用model,modelmap,modelmapandview等,但是在有些场合ajax提交时,需要利用json传递实体对象,这里给出一个实例记录一下。完整代码下载链接:
http://download.csdn.net/download/yhhyhhyhhyhh/9970542
PS: 关于ajax处理返回的json数据,除了html拼接,有没有其他的好用的看着舒服的方法???@H_301_12@
环境@H_301_12@
eclipse4.7.0,jdk1.8,maven,spring4.3.0,jackjson2.8.0。@H_301_12@
1.配置 |
1.1maven添加jackjson jar包@H_301_12@
jackson-core,jackson-databind,jackson-annotations
1.2.在springContext中,添加如下关于json解析对象的部分@H_301_12@
<!--解析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@H_301_12@
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
@H_301_12@
2.2ajax提交数据@H_301_12@
<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对象数组
@H_301_12@