Question

我在我的网站项目中使用PJAX，当我提交表单时，PJAX实际处理它，相关的东西进来并在PJAX容器中替换，但在此默认操作发生之后 - 表单即将提交以传统的方式和整个页面再次加载

表格HTML在这里

<form  class="form_class"><input type="text" name="search" id="search_query" class="basic_input" value="" /><button onclick="this.form.submit();" >Find</button></form>

这是我调用表单的pjax代码

$(document).on('submit', '.form_class', function(event) {
          $.pjax.submit(event, '#container_id');
        });

它有效 - 但是默认表单提交也发生了，我想要唯一的PJAX方式，我不想要完整页面重新加载（传统提交）

Answer 1

只需使用事件对象取消默认提交行为：

age

如果这不起作用那么也许你太迟了取消它。尝试：

$(document).on('submit', '.form_class', function(event) {
    event.preventDefault(); // stop default submit behavior

    $.pjax.submit(event, '#container_id');
});

Answer 2

通过PJAX，preventDefault()收听您想要提交的提交事件，最后将事件传递给$.pjax.submit(event)。

例如：

$(document).on('submit', 'form[data-pjax]', function(event) {
    event.preventDefault();
    $.pjax.submit(event, '#pjax-container', {
        'push': true,
        'replace': false,
        'timeout': 5000,
        'scrollTo': 0,
        'maxCacheLength': 0
    });
});

Answer 3

刷新的原因是因为他添加了一个容器而不添加片段。

更改：

$.pjax.submit(event, '#container_id');

到

$.pjax.submit(event, '#container_id', {fragment:'#container_id'});

我认为这应该在pjax中修复，如果未设置fragment，则使用容器...但是由他们自己决定如何解决。

用PJAX提交表格

3 个答案: