$.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

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 属性进行的,去掉该属性则可以避免被绑定。 剩下的就是你自己的代码使用另外的选择器来绑定了