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

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

javascript jquery ajax

Javascript 如何在使用Ajax提交成功后重新加载特定表单？,javascript,jquery,ajax,Javascript,Jquery,Ajax,我目前正在尝试重新加载一个特定的表单，即提交按钮的表单，纯粹是为了即时反馈。我正在创建一个收藏夹按钮。这是我当前的设置。ajax可以工作，但我仍然需要重新加载页面，以便显示新的样式，甚至更改方法类型，这是不喜欢favorite所必需的 $.ajax({ type: method, url: url, data: form.serialize(), success: function() { form.reload(); } }); 所以我

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

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

所以我会这样做

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

//mainpage.php
// ... 剪html。。。
$（“表格”）.1（‘提交’、功能（evt）{
evt.preventDefault（）；
var$this=$（this）；
$.ajax({
url:$this.attr（'action'），
方法：$this.attr（'method'），
}).done（功能（数据、状态、xhr）{
var$newForm=$（数据）；
$this.html（$newForm.html（））；
$this.attr（“方法”），$newForm.attr（“方法”）；
});
});
// ... 剪更多的html。。。

然后表单页面只返回

html

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

//form.php
我想您可以清除所有字段：
$.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');
    }
});

摘自此
编辑：
正如评论中所指出的，也许你应该让你的服务器从新创建的项目发回信息
然后，您可以填充现有的“模板”，并用它替换表单：
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);
    }
});

var newItem=$（“”）；
$.ajax({
类型：方法，
url:url，
数据：form.serialize（），
成功：功能（数据）{
//从服务器获取响应，如：{'name'：'name'，'attribute'：'attribute'}
for（var输入数据）{
newItem.append（“”+key+”：“+data[key]+””）；
}
表格。替换为（新项目）；
}
});

例如。
通常我要做的是让服务器端为新表单生成html，然后让成功函数重写。否则，您必须在成功后使用更多的javascript
操作DOM。我正在寻找一种技术来重新加载单击提交按钮的特定表单。如果我能做到这一点，那么我所有的问题都会得到解决。这将是迄今为止最清洁的技术。代码越少越好：）您使用的服务器端语言是什么？我使用的是PHP。也就是说，如果我让它工作，它将重新加载父窗体或单击提交的最近的.form。我正在尝试提交收藏夹按钮。在POST之后，它将AJAX发送到服务器，并且可以正常工作。但是风格没有改变，形式也没有改变，所以我无法得到即时反馈并采取行动。如果我想取消对实体的喜爱该怎么办。如果我以某种方式刷新表单中单击提交按钮的部分，那么一切都将正常工作。新方法DELETE和新样式都会显示出来。哦，我明白了，你想用你刚刚发布的新创建元素替换表单。我可以尝试替换该div（包含所有内容）。让我看看。还没完，让我们来吧。