springmvc 结合ajax批量新增的实现方法_AJAX相关

来源:脚本之家  责任编辑:小易  

ajax的url是client/lookfor,问题解决了吗?同样访问不到?,不知道你是不是在xML文件中配置了视图处理,你在后台打个断点,看看有没有走到lookfor对应的方法里面!追问试过了,没有到lookfor去是不是我的url写的不对??追答你用的什么浏览器调试的?如果是chrome或Firefox,打开F12,看看控制台有没有报什么404 not find之类的错误;如果有这错误,你调一下url,如果没错,你看看你的配置文件有没有对路径扫描的配置,是不是不支持JavaScript啊,试下右键项目名--->Project Facets------->选中JavaScript 1.0建议不要用Eclipse自带的浏览器测试,下个火狐或者谷歌浏览器测试追问支持js啊,会不会是我的url写的不对?几个xml我都配置了啊追答路径不应该是/Test/client/lookfor吗?你在Controller上面也加了一个@RequestMapping("/client"),改下ajax里面url试试,你可以在ajax里面加上success:function(data) { if(data == "success") { document.location = location; } }, error:function() { alert("更新失败!"); } ajax中data是json类型的,要指定:contentType : 'application/json',dataType : 'json'Controller中的lookfor(String etype)应该给参数加上@RequestBody注解lookfor( @RequestBody String etype)http://what-is-javascript.iteye.com/blog/1735691本回答被网友采纳www.zgxue.com防采集请勿采集本网。

1. 需要注意的问题 mvc框架的处理日期问题 @ResponseBody响应对象是自定义对象,响应不是json @ResopnseBody响应自定义对象时,日期为是long类型的数 结束数据方法的参数,该如何定义?接收多个对象?

html页面通过 ajax请求的response返回 return mapper.toJson();//json字符串 然后html通过ajax返回值获取进行处理类似 Java code? $.ajax({ url : "${pageContext.request.contextPath}/admin/wxflowMainNodeLog/view.do", async : true, data

2. 页面代码

后台解析ajax传递的数据,这主要看前端传递数据的格式,主要有以下几种常见的。 1、前端ajax传递表单数据,类似{name:'zhangsan',age:'17'} 后台只需利用request.getParameter("name")形式即可获取对应的value值。 2、前端传递json数据格式。后

<%@ page language="java" isELIgnored="false" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>ajax批量新增操作</title><script type="text/javascript" src="js/jquery-3.4.1.js"></script></head><body><form id="myForm"><table border="1" ><tr><td>姓名</td><td>身份证</td><td>时间</td><td>direction</td><td>type</td><td>操作</td></tr><tbody id="tbody"><tr><td><!-- 集合为自定义实体类中的结合属性,有几个实体类,改变下标就行了。 --><input type="text" name="visitorList[0].name"/></td><td><input type="text" name="visitorList[0].cardNo"/></td><td><input type="date" name="visitorList[0].visitorTime"/></td><td><input type="radio" value="1" name="visitorList[0].direction"/>进入<input type="radio" value="2" name="visitorList[0].direction"/>离开</td><td><input type="radio" value="1" name="visitorList[0].type"/> 内部<input type="radio" value="2" name="visitorList[0].type"/> 外部</td><td><input class="remove" type="button" value="移除"></td></tr></tbody><tr><td colspan="6"><input id="add" type="button" value="新增visitor" /><input id="save" type="button" value="保存"/></td></tr></table></form><script>$(function() {var index_val = 0;$("body").on('click', '.remove', function() {// 移除当前行, 通过父级来绑定...// $(this).parent().parent().remove();$("#tbody tr").remove();// 覆盖,生成行if (index_val > 0) {var data_str = "";for (var i = 0; i < index_val; i++) {data_str += "<tr>" +"<td>" +"<input type='text' name='visitorList[" + i + "].name'/>" +"</td>" + "<td>" + "<input type='text' name='visitorList[" + i + "].cardNo'/>" +"</td>" + "<td>" + "<input type='date' name='visitorList[" + i + "].visitorTime'/>" +"</td>" +"<td>" +"<input type='radio' value='1' name='visitorList[" + i + "].direction'/>进入" +"<input type='radio' value='2' name='visitorList[" + i + "].direction'/>离开" +"</td>" +"<td>" + "<input type='radio' value='1' name='visitorList[" + i + "].type'/> 内部" +"<input type='radio' value='2' name='visitorList[" + i + "].type'/> 外部" +"</td>" +"<td>" +"<input class='remove' type='button' value='移除'>" +"</td>" +"</tr>";}$("#tbody").append(data_str);}// 把下标减少一 就行了,就是移除了。index_val --;console.log("remove: ", index_val);});$("#add").click(function() {// 自增1index_val ++;var data_str = "<tr>" +"<td>" +"<input type='text' name='visitorList[" + index_val + "].name'/>" +"</td>" + "<td>" + "<input type='text' name='visitorList[" + index_val + "].cardNo'/>" +"</td>" + "<td>" + "<input type='date' name='visitorList[" + index_val + "].visitorTime'/>" +"</td>" +"<td>" +"<input type='radio' value='1' name='visitorList[" + index_val + "].direction'/>进入" +"<input type='radio' value='2' name='visitorList[" + index_val + "].direction'/>离开" +"</td>" +"<td>" + "<input type='radio' value='1' name='visitorList[" + index_val + "].type'/> 内部" +"<input type='radio' value='2' name='visitorList[" + index_val + "].type'/> 外部" +"</td>" +"<td>" +"<input class='remove' type='button' value='移除'>" +"</td>" +"</tr>";$("#tbody").append(data_str);console.log("add==>" + index_val);});$("#save").click(function() {var form_data = $("#myForm").serialize();// console.log(form_data)$.ajax({url: "visitor/batchAdd",type: "post",data: form_data,success: function(data) {console.log(data);},error: function(e) {console.log(e);}});});});</script></body></html>

在Spring框架4.2版本后,Spring给出了注解的方式解决问题。即在Controller控制器中,在Controller注解上方添加@CrossOrigin注解。 1. 最近别人需要调用我们系统的某一个功能,对方希望提供一个api让其能够更新数据。由于该同学是客户端开发,于

js学得terrible… 能够移除,我的移除是先移除所有的行,重新生成行,比较之前生成的行,少一行。

两种方式:1、通过response写回去,例如response.getWriter().write("1111111");2、可以通过注解@ResponseBody写回去,例如:@ResponseBody@RequestMapping("/findById.do")public Person findById(String id,HttpServletResponse response) {P

3. controller定义参数接收

ajax和springmvc没关系。 springmvc是java的框架,ajax是前端的异步通信的方式。 springmvc可以暴露出接口,ajax来访问该接口,实现前后端数据传输。

批量新增实体类BatchVisitor ,定义集合接收多个对象

package cn.bitqian.entity;import java.util.ArrayList;import java.util.List;/** * 批量新增 visitorInfo * @author echo lovely * */public class BatchVisitor {private List<VisitorInfo> visitorList = new ArrayList<>();public List<VisitorInfo> getVisitorList() {return visitorList;}public void setVisitorList(List<VisitorInfo> visitorList) {this.visitorList = visitorList;}public BatchVisitor() {}}

controller方法,放实体类,实体类里面套VisitorInfo的集合

@RequestMapping(value="/batchAdd", method=RequestMethod.POST)@ResponseBodypublic VisitorInfo batchAddVisitor(BatchVisitor batchVisitor) {List<VisitorInfo> visitorList = batchVisitor.getVisitorList();// System.out.println(batchVisitor);for (VisitorInfo visitorInfo : visitorList) {System.out.println(visitorInfo);visitorInfoService.save(visitorInfo);}return new VisitorInfo(1, "dd", "bb", new Date(), 1, 2);}

对于上面响应了对象到页面,会报错,需要导入json的依赖。

<!-- json 用于响应 responseBody --><!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind --><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId><version>2.9.6</version></dependency>

接收页面的参数,需要字符串转型为日期,需要

mvc自定义日期转换器

或者加上注解,mvc会将字符串转换为对应格式的日期

响应对象有日期时,解决:

在这里插入图片描述

到此这篇关于springmvc 结合ajax批量新增的文章就介绍到这了,更多相关springmvc批量新增内容请搜索真格学网以前的文章或继续浏览下面的相关文章希望大家以后多多支持真格学网! 您可能感兴趣的文章:SpringMVC+Ajax实现文件批量上传和下载功能实例代码Springmvc ajax跨域请求处理方法实例详解利用 FormData 对象和 Spring MVC 配合实现Ajax文件下载功能spring mvc利用ajax向controller传递对象的方法示例SpringMVC环境下实现的Ajax异步请求JSON格式数据

第一种方来式:通过源request.getParameter方式获取;第二种方式:参bai数中添加du@zhiRequestParam,代dao码:@RequestMapping(value="/test")public ModelAndView assign(@RequestParam String email,@RequestParam String password) {return null;}内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 浅谈ajax请求技术
  • ajax给全局变量赋值问题解决示例
  • 浅析ajax乱码及错误解决方案
  • ajax验证用户名是否存在的实例代码
  • 有关ajax跨域问题的两种解决方法
  • 非常实用的ajax用户注册模块
  • 基于jquery.history解决ajax的前进后退问题
  • ajax实现异步用户名验证功能
  • javascript如何控制session实现原理及代码
  • ajax jsonp跨域请求实现方法
  • springmvc与ajax
  • springMvc 用ajax调用controller中的方法
  • springmvc前台ajax中url怎么写
  • 求java spring mvc框架下的ajax局部刷新的案例
  • Ajax怎么访问springmvc后台方法,并返回数据
  • SpringMVC中使用List数据绑定,ajax怎么传输包含数...
  • springmvc用@crossorigin解决跨域 ajax怎么写
  • 如何在springmvc+mybatis中做ajax请求
  • spring mvc怎么实现ajax
  • 用ajaxAjax和springmvc写项目,然后再页面上输入网...
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全javascriptasp.netphp编程ajax相关正则表达式asp编程jsp编程编程10000问css/htmlflex脚本加解密web2.0xml/rss网页编辑器相关技巧安全相关网页播放器其它综合dart首页springmvc+ajax实现文件批量上传和下载功能实例代码springmvc ajax跨域请求处理方法实例详解利用 formdata 对象和 spring mvc 配合实现ajax文件下载功能spring mvc利用ajax向controller传递对象的方法示例springmvc环境下实现的ajax异步请求json格式数据浅谈ajax请求技术ajax给全局变量赋值问题解决示例浅析ajax乱码及错误解决方案ajax验证用户名是否存在的实例代码有关ajax跨域问题的两种解决方法非常实用的ajax用户注册模块ajax实现异步用户名验证功能javascript如何控制session实现原理及代码ajax jsonp跨域请求实现方法jquery ajax 向后台传递数组参数ajax readystate的五种状态详解ajax中的async属性值之同步和异步jquery实现ajax定时刷新局部页面ajax传递多个参数具体实现ajax获取数据中文乱码问题最简单jquery ajax中使用serialize()方ajax获取数据然后显示在页面的实自己动手打造ajax图片上传(网上没ajax 缓存问题的两种解决方法(ie使用ajax异步提交表单的几种方法总结django使用ajax post数据出现403错误如何ajax实例入门代码jquery中ajax提交表单几种方法(get、post原生ajax封装的简单实现菜鸟蔡之ajax复习第三篇(ajax之无刷新登录ajax留言本源码 提供下载了[asp.net ajax]function对象及type类的方javascript请求servlet实现ajax示例(分享详解ajax +jtemplate实现动态分页
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved