Question

我目前正在尝试重新加载特定表单，这是提交按钮的形式，纯粹是为了即时反馈。我正在创建一个收藏夹按钮。这是我目前的设置。 ajax工作但我仍然需要重新加载页面以显示新样式，甚至更改METHOD类型，这是不喜欢的最喜欢的。

$.ajax({
    type: method,
    url: url,
    data: form.serialize(),
    success: function() {
        form.reload();
    }
});

Answer 1

所以我会这样做

//mainpage.php
<html>
// ... snip html ...
<?php include("form.php") ?>
<script>
$("form").one('submit', function (evt) {
   evt.preventDefault();
   var $this = $(this);
   $.ajax({
     url: $this.attr('action'),
     method: $this.attr('method'),
   }).done(function (data, status, xhr) {
      var $newForm = $(data);
      $this.html($newForm.html());
      $this.attr("method", $newForm.attr("method"));
   });
});
</script>

// ... snip more html ...

然后表单页面只返回<form> html

//form.php
<form method="<?php $method ?>" action="form.php">
   <input name="foo">
   <input type="submit" value="submit">
</form>

注意：您可能需要在提交后重新绑定表单，您必须仔细检查。

Answer 2

我想你可以清除所有字段：

$.ajax({
    type: method,
    url: url,
    data: form.serialize(),
    success: function() {
        form.find('input:text, input:password, input:file, select, textarea').val('');
        form.find('input:radio, input:checkbox')
             .removeAttr('checked').removeAttr('selected');
    }
});

取自answer。

编辑：

如评论中所述，也许你应该让你的服务器从新创建的项目发回信息。

然后你可以填充你拥有的“模板”，并用它替换表格：

var newItem = $("<div class='newItem'></div>");

$.ajax({
    type: method,
    url: url,
    data: form.serialize(),
    success: function( data ) {
        //Get response from server like : {'name':'Name', 'attribut':'Attribut'}
        for( var key in data ) {
            newItem.append("<p>" + key + " : " + data[key] + "</p>");
        }
        form.replaceWith(newItem);
    }
});

示例JSFiddle。

如何在使用Ajax提交成功后重新加载特定表单？

2 个答案: