JavaScript 云鸠自学笔记专区—001

y9info · 2021年11月25日 · 143 次阅读

问题描述:

rails 前端通常有很多列表,譬如 books 的 index 页面,查询后的显示结果页面等等,都有多个实例,如果要从多个实例中选取一部分实例,提交到后台进行进一步的处理,譬如提交到后台进行删除、作为附件转发等等,就会利用 check_box 从前端选取实例,这个时候要把 check_box 的 value 值的集合,作为参数,通过 form 提交到后端,让后端的 controller 读取。 通常的做法是利用 form 包裹参数,通过 form 的 submit 提交,在 form_tag 中指明提交的路径、method 等等。这个时候就有一个问题: 如果选取的实例,有时候是提交到后台删除,有时候是提交到后台作为附件转发,有时候是提交到后台批量下载,每个 form 对应的路径、method 等相关内容都不相同,难道要使用多个 form_tag?而且 form_tag 的 submit 按钮通常在底部,如果要把按钮设置在 form 外面,譬如页面顶部,这样也存在一些页面处理问题。

总之,处理不好会导致前端结构混乱,能否实现实例选取功能和提交功能分开,不同的 button 按钮,自动提交到不同的后台处理?

解决方案:

搜索了很多的解决方案,包括 button_to 等都不理想,解决一个 form_tag 提交还好说,一个页面解决多个提交,就会出现页面处理混乱。 最终决定用 JavaScript 来解决,思路是:使用 JavaScript 读取页面所有的 check_box 的 value,如果不为空,就存在一个数组里边,然后将该数组作为参数,由不同的 form_tag 提交。

读取 check_box 的 value 并实现 form 提交的代码


function submitform(form_name){
   var obj = document.getElementsByName("patent[files][]");
 //check_box被命名为了"patent[files][]"
   var check_val = [];
    for (k in obj) {
        //判断复选框是否被选中
        if (obj[k].checked)
            //获取被选中的复选框的值
            check_val.push(obj[k].value);
    }
    document.getElementById("files_id").setAttribute('value', check_val);
//将files_id在form中设置一个不显示的input数据,其value值设置为使用JavaScript读取页面所有的check_box的value的数组集合值,该值随着form提交
    document.getElementsByName(form_name)[0].submit();
  //为什么不用form_id来查找元素?因为form_tag中的form的id的值,用JavaScript不好读取,存在一个rails变量和JavaScript变量相互读取的难题

}

</script>

新建一个 form,专门用于指明提交的路线,方法,该 form 不设置 submit 按钮(这样的 form 可以根据需要建很多个,对在前端页面的位置也没有太高的要求)

<%= form_for(@patent, url: destroy_files_patent_path(@patent), html: { name: "destroy_files_submit", method: "delete",}) do |form| %>
 <input type="hidden" id="files_id" name="files_id" value= ""  >    
<% end %> 

新建一个 button,专门用于提交

<button onclick="submitform('destroy_files_submit')" class="btn btn-outline-secondary">删除选中</button>
//onclick= 用于执行submitform这个函数

小结

通过上述处理,用 JavaScript 函数来读取 check_box 参数值给到 form_tag 用于提交(其实也可以根据需要,通过调整 document.getElementById,调整为读取其他的前端页面所需要的值),然后再根据需要传递到后端,解决了 form_tag 与前端页面部分太过于深度耦合的问题,灵活性大大增加。从此打通前后端参数搜集传递的任督二脉,浑身舒爽,而涉及到的 JavaScript 代码并不多,难度也能理解,甚至在 JavaScript 代码中也能进一步增加参数的校验功能。

以上是几天来的摸索结果,以为记。

暂无回复。
需要 登录 后方可回复, 如果你还没有账号请 注册新账号