$.pjax.submit重复提交怎么解决？

普通表单提交是正常的，想利用pjax实现区域刷新，但使用$.pjax.submit后出现多次请求的问题，见下图：

image.png

<form data-pjax class="form-inline"  action="/admin/specialty" >
   <select class="form-control" name="departId">
      <option value="-1">请选择学院</option>
      #for(x:departs)
      <option value="#(x.id??)" #if(x.id == departId??-1 )selected#end>#(x.name??)</option>
      #end
   </select>
   <button type="submit" class="btn btn-primary btn-sm"><i class="fa fa-search"></i> 搜索</button>
</form>

<script type="text/javascript">
   $(function () {
        $(document).on('submit', 'form[data-pjax]', function(event) {
            $.pjax.submit(event, '#pjax-container');
        });
    })
</script>


项目：JFinal
1

评论区

JFinal

2018-05-24 13:33

先解除 form 表单中的提交按钮， 也就是 type="submit" 改成button ，然后绑定的 submit 事件改成绑定 click 事件

原因是，表单本省有一次提交，再加上你的 js 代码又提交一次，一共就是两次了

解除掉表单提交的那次即可
 回复

小胖

2018-05-24 14:23

@JFinal
这样的话会导致$.pjax.submit没法用了，其中的event变了
jquery.pjax.js:120 Uncaught $.pjax.submit requires a form element
 回复

JFinal

2018-05-24 16:35

$(document).on('submit', 'form[data-pjax]' 这段改成：
$(document).on('click', 'form[data-pjax]',

type="submit" 改成 type="bottom"
 回复

JFinal

2018-05-24 16:35

如果还是不行，在 $.pjax.submit(event, '#pjax-container'); 这行代码前添加一行代码：
event.preventDefault();
 回复

小胖

2018-05-25 15:56

@JFinal
都不行，我把form都去掉了，直接改成button的点击事件里面调用 $.pjax方法（我看了一下源码， $.pjax.submit也是调用了$.pjax） 结果还是一样
 回复

小胖

2018-05-25 15:59

@JFinal
我就是想列表页面上加个form用于条件查询，普通表单请求没问题的，想也改成pjax请求，这样避免刷整个页面
 回复

小胖

2018-05-25 21:19

@JFinal
我新建了一个工程，里面只加了jquery和pjax，官方用法是正常的，但加在club里面就不行了
 回复

JFinal

2018-05-25 22:39

@小胖 那就有可能绑定了多个事件，一个事件请求一次，加起来就是多次

基本上可以确定是 js 写得有问题，用 chorme 的开发者工具调试一下 js

最后，还要小心浏览器缓存问题，使用 Ctrl + F5 强制刷新一下浏览器
 回复

JFinal

2018-05-25 22:41

再看了一下你的贴子，表单提交用 ajax 就可以了，这个不是用 pjax 的场景

具体用的时候用 jquery form 来实现，回看一下 jfinal club 的表单提交代码
 回复

JFinal

2018-05-25 22:59

@小胖 加在 club 里面不行，很可能是与原有的绑定重复了，原有的 jfinal-admin.js 中是有 pajx 绑定的
 回复

小胖

2018-05-26 09:14

@JFinal
谢谢波总，确实是重复绑定了，与jfinal-admin.js无关，自己js功底太差，忘了$.on重复绑定的事了。加上off解决
$(document).off('submit', 'form[data-pjax]').on('submit', 'form[data-pjax]', function(event) {
$.pjax.submit(event, '#pjax-container')
});
 回复

JFinal

2018-05-26 10:01

@小胖 如果是这样的话，将 form 标签上的 data-pjax 属性去掉，然后换个选择器就可以了：
$(document).on('submit', '.form-inline', function(event) {
$.pjax.submit(event, '#pjax-container')
});

jfinal-admin.js 中的绑定是通过识别 data-pjax 属性进行的，去掉该属性则可以避免被绑定。 剩下的就是你自己的代码使用另外的选择器来绑定了
 回复
我要反馈

热门反馈

扫码入社