前端小结--ajax和spring互传json对象,并显示到列表中
发布时间:2020-12-16 03:19:21 所属栏目:百科 来源:网络整理
导读:前端小结–ajax和spring互传json对象,并显示到列表中 通常java后台传给前端参数可以用model,modelmap,modelmapandview等,但是在有些场合ajax提交时,需要利用json传递实体对象,这里给出一个实例记录一下。 完整代码下载链接: http://download.csdn.net/
前端小结–ajax和spring互传json对象,并显示到列表中通常java后台传给前端参数可以用model,modelmap,modelmapandview等,但是在有些场合ajax提交时,需要利用json传递实体对象,这里给出一个实例记录一下。完整代码下载链接: 环境
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.1引入jquere
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>
ajax提交后,返回的jsond对象数组 显示到列表中 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |