精华内容
下载资源
问答
  • 这篇文章是记录一下实现基于SSM框架下页面表单删除连带数据库相应数据的批量删除ajax批量删除)的实现思路和源码 1.需求 能在前端页面点击按钮对勾选的数据实现批量删除,同时对应数据库的数据也要删除 2...

    这篇文章是记录一下实现基于SSM框架下页面表单的删除连带数据库相应数据的批量删除(ajax批量删除)的实现思路和源码

     

    1.需求

    能在前端页面点击按钮对勾选的数据实现批量删除,同时对应数据库的数据也要删除

     

    2.开发环境

    Jdk1.8

    Tomcat 8.5

    Idea 2019

    mysql 5.5

    所需jar包:SSM必备jar包 此处spring版本4.24

    前端jquery:jquery-1.7.1.js

    maven Jar包(全)

    3.思路

    1.表单数据前面要有一个单选框提供选择

    2.通过所选取的单选框节点获取相应的id值

    3.通过jquery.ajax将id传到服务器端

    4.服务器端完成数据库操作

    5.ajax内success完成相应表单数据的移除

    4.实现

    4.1

    我们先来看前端页面的代码(jsp):将id值赋给了单选框的值,直接传递单选框的值给服务器

    <%
        String path = request.getContextPath();
        String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
                + path + "/";
    
    %>
    <%--批量删除--%>
        <script>
            function delAll() {
                var checkedNum = $("input[name='IDCheck']:checked");
                //判断至少写了一项
                //var checkedNum = $("input[name='IDCheck']:checked").length;
                if (checkedNum.length == 0) {
                    alert("请至少选择一项!");
                    return false;
                }
                if (confirm("确定删除所选项目?")) {
                    var checkedList = new Array();
    
                    $("input[name='IDCheck']:checked").each(function () {
                        //将单选框的值(将id值同样赋给了单选框)传入数组中
                        checkedList.push($(this).val());
                    });
                    /*"html": 返回纯文本 HTML 信息;包含的 script 标签会在插入 dom 时执行。*/
                    $.ajax({
                        type: "POST",
                        url:  "<%=basePath%>/batchDeletes.action",,
                        data: {"id": checkedList.toString()},
                        datatype: "html",
                        success: function (data) {
                            alert("删除成功");
                            for (var i = 0; i < checkedNum.length; i++) {
                                //此处需要注意的是父节点对子节点的移除
                                checkedNum[i].parentNode.parentNode.remove();
                            }
                        },
                        error: function (data) {
                            alert("删除失败");
                        }
                    });
                }
            }
        </script>
    
    <table class="table" cellspacing="0" cellpadding="0" width="100%"
                           align="center" border="0">
                        <tr>
                            <th width="30"><input type="checkbox" id="all"
                            //调用commonAll.js的全选反选方法,导入就可以使用,此处可以忽略
                                                  onclick="selectOrClearAllCheckbox(this);"/></th>
                            <th>编号</th>
                            <th>姓名</th>
    
                        </tr>
                       
                        <tbody>
                        <c:forEach items="${传入的pojo对象}" var="test">
                            <tr>
                                <td><input type="checkbox" name="IDCheck"
                                           value='${test.id}' /></td>
                                <td name="callListId">${test.id}</td>
                                <td>${test.name}</td>
    
                            </tr>
    
                        </c:forEach>
                        </tbody>
                    </table>

    5.2 Service

    public int batchDeletes(List delList);

    5.3 ServiceImpl

    @Autowired
        private Mapper mapper;
    
    @Override
    	public int batchDeletes(List delList) {
    		return mapper.batchDeletes(delList);
    	}

    5.4 Mapper

    /**
    	 * 批量删除
    	 */
    	int batchDeletes(List delList);

    5.5 Mapper.xml 

    <!--批量删除 -->
    	<delete id="batchDeletes" parameterType="java.util.List">
    		DELETE FROM 表名 where id in
    		<foreach collection="list" index="index" item="id" open="(" separator="," close=")">
    			#{id}
    		</foreach>
    	</delete>

     

     

     

    6.结果

     

     

    符合需求

    8. 遇到的问题

    一开始对jquery父节点和子节点的取值一直取不到id的值,实在想不出办法就把id的值传给了单选框,但是更优的还是能通过父子节点找到id的值

     

     

    展开全文
  • 摘要:脚本资源,Ajax/JavaScript,Ajax,无刷新 运用jQuery实现的Ajax无刷新删除和添加数据的表单,可适时删除表格、修改表格内容、添加内容,实现了前端的功能,当然如果需要全部实现,则需要后台脚本语言的支持。...
  • jquery之表单插件(通过Ajax提交表单之二)

    jquery之表单插件(通过Ajax提交表单之二)

    ----------

    拦截表单提交

    我们常常想要进行常规的表单提交并且拦截它。(把表单提交作为Ajax请求发送到服务器,而不是像通常那样,在提交表单之后引起整个页面的刷新)

    我们可以利用事件处理和ajaxSubmit()命令的知识来使提交重路由。但无需那样做,因为表单插件预料到这个需求并且提供ajaxForm()方法。这个方法会设置表单,当表单通过普通语义事件提交时阻止通过正常语义事件(比如点击提交按钮,或在表单拥有焦点时按下回车键)来提交表单,并发起模拟普通web请求的Ajax请求。

    ajaxForm()在其表面之下使用ajaxSubmit(),因此它们语法相似。

    ---

    ajaxForm()语法:

    ajaxForm(options)

    设置目标表单以便在触发表单提交时,把提交重路由为ajaxSubmit()命令所发起的Ajax请求,传递给这个方法的参数options被传递给ajaxSubmit()调用。

    参数

    options   (对象|函数)一个散列对象(可选),包含与ajaxSubmit()所使用的同样的参数。如果想要的选项只是成功回调函数,可以传递成功回调函数而不必传递散列对象

    返回

    包装集

    ---

    一般来说,在就绪处理程序里把ajaxForm()命令应用到表单上,然后可以放心地让命令替我们设置目标表单而使表单提交重路由。

     

    ===

    如果给表单绑定ajaxForm()之后的某个时刻必须删除设置,以便让表单正常提交,则ajaxFormUnbind()命令将会完成这个任务。

    ajaxFormUnbind()语法:

    ajaxFormUnbind()

    删除应用到包装集里表单上的设置,以便表单提交能够以正常方式进行

    参数

    返回 

    包装集

     

    展开全文
  • ','${map.data_code}', '${map.type_code}')" >删除   修改 (2)function代码 function update_sql_ctd(data_code, type_code,data_name,ODR) {  var data_name_td = $("#" + type_code +

    (1)JS 代码段

    <c:forEach items="${resultList}" var="map" varStatus="cnt">

    <td > <a href="#" οnclick="delete_sql_ctd('<%=path %>','${map.data_code}', '${map.type_code}')" >删除</a>&nbsp;&nbsp;
    <a href="#" οnclick="update_sql_ctd('${map.data_code}', '${map.type_code}','${map.data_name }')" >修改</a>
    </td>

    (2)function代码

    function update_sql_ctd(data_code, type_code,data_name,ODR) {
     var data_name_td = $("#" + type_code +"_"+data_code);
     jQuery(data_name_td).html('<input name="data_name_new" value="'+data_name+'" οnblur="changeSqlctd(\''+data_code+'\',\''+type_code+'\',this)" />');
     
    }
    function changeSqlctd(data_code, type_code,obj){
    var data_name_td = $("#" + type_code +"_"+data_code); 
    var data_name_val = obj.value;
    jQuery.ajax({
      type: "post",
      url:  "update_sql_ctd.do",
      data: {data_code: data_code, type_code: type_code, data_name:data_name_val},
      success: function(msg){
      jQuery(data_name_td).html(data_name_val + ' ');
     
      window.location.reload(true); 
      }
    });  
    }

    function delete_sql_ctd(path,data_code, type_code){
      
    if(confirm("确认要删除?")){
           
    var form0 = document.forms[0];
    form0.action = path+"/delete_sql_ctd.do?data_code="+data_code+"&type_code="+type_code; 
    form0.submit();
    }
    }



    展开全文
  • ajax回填表单获取json中的某个值

    千次阅读 2016-12-16 09:33:09
    function erpValue(id) { //回调控制器中的方法  var url = __ctx + '/chongqing/erp/bookInfo/getResource.ht';  $.post(url,  {Id:id},  function(data

    <script type="text/javascript">


     var code =1;//作者回填的标记
    //选择需求名称
            function add(){
              var url = __ctx + '/chongqing/erp/bookInfo/dialog.ht';  
                /* var arrys = '' ; */
                DialogUtil.open({
                    height:600,
                    width: 900,
                    title : '图书选择器',
                    url: url,
                    isResize: true,//是否改变大小
                    /*  //自定义参数
                    arrys: arrys,  */
                    //回调函数,其实也是以自定义参数的方式传过去
                    sucCall:function(rtn){
                      //alert('您选择的需求是:' + rtn.dmdNames+';部门是:'+rtn.departments);
                        var id = rtn.ids;
                      alert(id);
                     //调用下面方法获取json数组
                      erpValue(id);

                     $("#erpId").val(id);
                      //var name = rtn.names;
                      //var seriesname = rtn.seriesnames;  
                      //$("#bookName").val(id);
                      
                      
                      //$("#csmc").val(seriesname);
                      
                }
            });
            }
             //重置回填数据
            function del(){
                $("#bookNameErp").val('');$("#bookNameErp").trigger('blur');
                $("#seriesName").val('');$("#seriesName").trigger('blur');
                $("#introduction").html('');$("#introduction").trigger('blur');
                $("#sellRange").val('');$("#sellRange").trigger('blur');
                $("#copyright").val('');$("#copyright").trigger('blur');
                $("#chartCount").val('');$("#chartCount").trigger('blur');
                $("#wordCount").val('');$("#wordCount").trigger('blur');
                $("#otherInfo").html('');$("#otherInfo").trigger('blur');
                $("#printCount").val('');$("#printCount").trigger('blur');
                $("#entrustCount").val('');$("#entrustCount").trigger('blur');
                $("#bookSizeName").val('');$("#bookSizeName").trigger('blur');
                $("#bindingName").val('');$("#bindingName").trigger('blur');
                $("#createUser").val('');$("#createUser").trigger('blur');
                $("#coverPath").val('');$("#coverPath").trigger('blur');
                $("#firstclass").val('');$("#firstclass").trigger('blur');
                $("#firstName").val('');$("#firstName").trigger('blur');
                $("#zpnr").val('');$("#zpnr").trigger('blur');
                $("#chartCount").val('');$("#chartCount").trigger('blur');
                $("#name").val('');$("#name").trigger('blur');
                delAuthorTable();
            
            }

    function erpValue(id)

    {

    //回调控制器中的方法

               var url = __ctx + '/chongqing/erp/bookInfo/getResource.ht';  

      $.post(url,
                             {Id:id},
                        function(data){
                          //var d = data;

                          //alert(d);

                          //获取json数组

                          var json = eval('(' + data + ')');
                          var name = json.Name;
                          var seriesName = json.SeriesName;
                          var introduction = json.Introduction;
                          var sellRange = json.SellRange;
                          var copyright = json.Copyright;
                          var chartCount = json.ChartCount;
                          var wordCount = json.WordCount;
                          var otherInfo = json.OtherInfo;
                          var printCount = json.PrintCount;
                          var entrustCount = json.EntrustCount;
                          var bookSizeName = json.BookSizeName;

                          var bindingName = json.BindingName;

                          //获取json中的集合

                          var authors = json.AuthorList;
                          var createUser = json.CreateUserID;
                          var coverPath = json.CoverPath;

                         var firstclass=json.FirstClass;

                          //获取json中的集合

                          var zp=json.AttachmentList;
                          var firstName=json.FirstName;
                          var secondName=json.SecondName;
                           var chartCount = json.ChartCount;
                          var remark = json.Remark;
                           var urlpath=json.UrlPath;
                          var dir=json.Dir;
                 //获取json数组中的json数组具体字段
                          var path=eval(zp)[0].Path;
                          
                            var files=json.files;//文件id
                          var fileId=eval(files)[0].fileId;
                          
                         
                           
                          
                          //
                          var zname=path.lastIndexOf("/");
                          var zpname="";
                          if(zname > 0){  
                            zpname = path.substring(zname+1);}
                         var urlPath = urlpath.substring(0, urlpath.lastIndexOf("/"));
                           var tr = downnr(urlPath,dir,path,fileId,zpname);
                          //清除原来的样式
                             $("#divc").css("display","none");
                          //回填下载控件。把值赋给整个td
                          $("#zpnrtd").append(tr);
                          // 回填数据并进行验证;
                    
                          $("#bookNameErp").val(name);$("#bookNameErp").trigger('blur');
                          $("#seriesName").val(seriesName);$("#seriesName").trigger('blur');
                          $("#introduction").html(introduction);$("#introduction").trigger('blur');
                          $("#sellRange").val(sellRange);$("#sellRange").trigger('blur');
                          $("#copyright").val(copyright);$("#copyright").trigger('blur');
                          $("#chartCount").val(chartCount);$("#chartCount").trigger('blur');
                          $("#wordCount").val(wordCount);$("#wordCount").trigger('blur');
                          $("#otherInfo").html(otherInfo);$("#otherInfo").trigger('blur');
                          $("#printCount").val(printCount);$("#printCount").trigger('blur');
                          $("#entrustCount").val(entrustCount);$("#entrustCount").trigger('blur');
                          $("#bookSizeName").val(bookSizeName);$("#bookSizeName").trigger('blur');
                          $("#bindingName").val(bindingName);$("#bindingName").trigger('blur');
                          $("#createUser").val(createUser);$("#createUser").trigger('blur');
                           $("#coverPath").val(coverPath);$("#coverPath").trigger('blur');
                          $("#firstclass").val(firstclass);$("#firstclass").trigger('blur');
                           $("#firstName").val(firstName);$("#firstName").trigger('blur');
                           $("#chartCount").val(chartCount);$("#chartCount").trigger('blur');
                           $("#secondName").val(secondName);$("#secondName").trigger('blur');
                          //#代表表单中td的id
                          $("#zpnr").val(zpname);$("#zpnr").trigger('blur');
                          //先删除原来的Author
                          delAuthorTable();
                          //添加新的Author
                          var authorList =  json.AuthorList ;
                          var name=eval(authorList)[0].Name;
                          $("#name").val(name);
                         
                          for(var i=0,l=authorList.length;i<l;i++){
                            $("#btn").trigger("click");// 若存在作者信息,添加数据;
                           
                            $("div.block").children("table").attr("id","author"+code);//标记要添加的子表控件
                            
                            var author = authorList[i];//获取每一位作者信息
                            var sex = author.Sex;
                            $("#author"+code).find("input[name='s:zzxx:xm']").val(author.Name);
                            $("#author"+code).find("input[name='s:zzxx:xm']").trigger('blur');//添加作者名字并验证
                            if(sex.toString()=='1'){
                               $("#author"+code).find("input[name='s:zzxx:xb']").val('女');
                            }else if(sex.toString()=='0'){
                               $("#author"+code).find("input[name='s:zzxx:xb']").val('男');
                            }
                            $("#author"+code).find("input[name='s:zzxx:xb']").trigger('blur');//添加作者性别并验证
                           // if(null != author.Remark){
                           //   $("#author"+code).find("input[name='s:zzxx:jg']").val(author.Remark);
                           // }else{
                                $("#author"+code).find("input[name='s:zzxx:jg']").val(remark);
                          //  }
                            $("#author"+code).find("input[name='s:zzxx:jg']").trigger('blur');//添加作者籍贯并验证
                            
                            $("#author"+code).find("textarea").val(author.Introduction);
                            $("#author"+code).find("textarea").trigger('blur');//添加作者籍贯并验证
                            
                              code = code+1;//标记每一个作者
                            
                          }
                        
                        },"json");

    }

    </script>

    展开全文
  • 在写老师布置的酒店管理系统,在添加桌名的地方想添加验证,去网上看了下大概,... function trim(str) { //删除左右两端的空格 return str.replace(/(^\s*)|(\s*$)/g, ""); } $(function (){ $("#bName").blu
  • 请大神告诉具体步骤,或者超链接的地址供参考,最好是要正确的,避免走弯路。 首先,我在Struts2里的action里面写了往数据库插入数据的方法。 ... ...public class PreorderAction extends BaseAction { ...
  • 今天遇到个问题,就是在使用ajax提交表单时却忘记了删除submit属性,导致了ajax异步执行的时候又submit提交表单了,从而使ajax返回一直进入error。
  • 项目中,目前都尽量采用 ajax 上传表单,然后根据返回值进行提示,感觉用户体验好点。 最近出现一个问题: 苹果部分型号的手机,在微信中,完善个人信息页面,ajax上传表单时,未选择头像,出现失败问题。 查看 ...
  • ajax实现删除,修改

    千次阅读 2018-11-04 19:03:40
    只说思路,删除的话让表单的数据隐藏,修改的话用jquery让表单内的内容改变,在和ajax实现。其实就是前端改变。再用ajax实现后端改变
  • 使用ajax实现文件下载,方便,快捷,时尚,多么有挑战的一个功能,首先获取url和data然后把参数组装成form的input再利用request发送请求,也就是动态渲染表单,提交表单后再删除,本例将实现文件下载功能,感兴趣的...
  • ajax提交form表单,后台接收参数

    千次阅读 2018-09-08 23:05:27
    //批量删除delBatch @RequestMapping("delBatch.do") public void delBatch(Integer[] ids,HttpServletResponse response) throws IOException{ String str = productService.delBatch(i...
  • 这样请求的时候只用传需要的参数,然后请求成功后也不用整体刷新页面,只用局部刷新,这样节省了带宽,比如我们采用ajax删除的时候。所以当需要整体刷新的时候,那么就可以采用表单提交。当要局部刷新的时候,我们...
  • ①、建立form表单,在表单上添加一个全选/反选按钮,并给按钮添加鼠标单击事件 ②、在函数中通过name获取对象数组 var check=document.getElementsByName('check'); ③、在循环中判断复选框...
  • Django-file-form可帮助您编写带有漂亮ajax上传的表单。 阅读的文档 特征: 您可以轻松地将ajax文件上传添加到表单Ajax上传与html上传相同。 这意味着您无需更改代码即可支持ajax上传。 支持单文件和多文件...
  • ajax同步请求 和 表单验证submitHandler

    千次阅读 2015-09-24 17:12:03
    ajax异步请求可能会改变程序的运行顺序,今天接触来这个问题,请外也使用了submitHandler进行表单提交前的验证:
  • 创建简单(几乎是魔术)的AJAX表单。 为什么是魔术形式? 几乎每天我们都会为客户,个人项目等制作表格 有时我们需要添加或删除字段,更改验证,存储数据,并且在某些时候这可能很无聊且重复。 因此,目标是找到一...
  • HTML5中的表单+Ajax+localStorage+Cookie

    千次阅读 2015-09-24 21:19:09
    HTML5中的表单验证+简单的Ajax+简单的localStorage的使用+简单的Cookie的使用
  • 背景:页面表单post请求后,不管是成功与否,都希望有相应的数据返回,提示用户操作成功,失败,禁止等等,但是在之前的文章form和ajax表单提交方式的区别中有提到过这两种请求方式的一些区别,这篇文章将讲一讲两种...
  • ajax上传form表单(type='file')FormData

    千次阅读 2017-02-20 22:32:46
    当然既然可以添加 那自然可以删除,查找,遍历 form .append ( "staticData" , "suonidafahao!" ) ; form .append ( "keyName" , "Value111111" ) ; form .get ( "keyName" ) ;//Value111111 form .delete ...
  • AJAX

    千次阅读 多人点赞 2019-08-25 12:55:49
    表单验证(增强用户体验) Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术 本质:是在HTTP协议的基础上以异步的方式通过XMLHttp...
  • SSM使用ajax实现图片上传与删除功能

    千次阅读 热门讨论 2018-12-10 20:18:22
    图片上传与删除1.上传文件2.删除数据,并且删除对应的文件 之前写了一篇博客记录了关于修改资料中的图片上传(传送门),这次用到了直接上传图片的功能,对上一篇...直接使用ajax上传图片。 1.上传文件 下面贴...
  • Devsphere 公司的一名高级 Java 开发人员和顾问,该公司专门提供定制 Java EE 开发服务以及 Ajax/JSF 顾问服务。您可以通过 www.devsphere.com 的联系表单与 Andrei 联系。 简介: 在这个包含两部分的系列文章...
  • IE8下struts2 采用ajax提交表单,返回json字符串,解析不了,直接保存json字符串。提示下载action. 但是在火狐 chrome下能够解析。 因为表单FORM是multipart-form方式提交的(enctype="multipart/form-data")。中间...
  • ajax提交找不到JS函数对象 解决过程: 1、检查发现没有引入jquery.form.js----没有解决 2、在ajaxOptions参数,最后一个删除那个“,”问题改善,可以找到js函数对象了----这说明,该对象内部是数组引用方法,其实...
  • 浏览器和服务器的数据交互方式主要有六种: 1.表单提交; 2.超链接; 3.js/jquery方式 3.1 地址栏的替换 location.href="地址栏";(本文有) 3.2 js提交表单(本文有) 3.3 ajax(本文有) 前台页面代码如下:

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 46,636
精华内容 18,654
关键字:

ajax删除表单