在 ajax提交后将表单替换为结果 - Replace form with Results after ajaxSubmit

Replace form with Results after ajaxSubmit

本文关键字：替换结果表单 ajax 提交 | 更新日期: 2023-09-27

我正在尝试用 POST 响应的结果动态替换表单。对于此示例，我正在关闭公告，并希望在成功后将"关闭公告"提交按钮/表单替换为简单的"公告已关闭"。POST 工作正常，我可以按预期返回结果，只是不在特定的div 中。

我认为 $post->ID 将是一个唯一的 ID，所以我可以删除该div，但我不知道如何将其传递给 ajaxSubmit 函数。

<div id="<?php echo $post->ID;?>">
  <form action="" method="post" id="openclose">
    <input type="hidden" name="id" value="<?php echo $post->ID;?>"/>
    <input type="hidden" name="action" value="ocVehicleWanted"/>
    <input type="hidden" name="oc" value="close">
    <button type="submit" style="padding:1px;background-color:#c41f1f;" >Close Announcement</button>
  </form>
</div>

这是我当前的jQuery，唯一不起作用的部分是用于替换$post->IDdiv中的表单数据的.html（data）。此当前代码将替换为页面输出的所有表单div。我每页有 25 个。

jQuery('#openclose').submit(ajaxSubmit);
function ajaxSubmit(){
var vehicledata = jQuery(this).serialize();
jQuery.ajax({
type:"POST",
url: "/wp-admin/admin-ajax.php",
data: vehicledata,
success:function(data){
jQuery("#openclose").html(data);
}
});
return false;
}

将 ID

更改为类，因为 ID 在页面中必须是唯一的

您可以通过多种方式替换整个表单，方法是从this开始并遍历到parent()或使用replaceWith()以及其他几种方式

function ajaxSubmit() {
    var $form = jQuery(this);// cache form as jQuery object
    var vehicledata = $form.serialize();
    jQuery.ajax({
        type: "POST",
        url: "/wp-admin/admin-ajax.php",
        data: vehicledata,
        success: function(data) {
            // replace form parent html
            $form.parent().html(data);
            // or replaace form element
            $form.replaceWith(html);
        }
    });
}

文档中不得有多个具有相同value id属性。

您可以改用class选择器。

.bind()将在函数表达式中提供this上下文，该上下文将在调用函数后使用。

试试这个：

jQuery('.openclose').submit(ajaxSubmit);
function ajaxSubmit() {
  var vehicledata = jQuery(this).serialize();
  jQuery.ajax({
    type: "POST",
    url: "/wp-admin/admin-ajax.php",
    data: vehicledata,
    success: function(data) {
      jQuery(this).html(data);
    }.bind(this)
  });
  return false;
}

<div id="<?php echo $post->ID;?>">
  <form action="" method="post" class="openclose">
    <input type="hidden" name="id" value="<?php echo $post->ID;?>" />
    <input type="hidden" name="action" value="ocVehicleWanted" />
    <input type="hidden" name="oc" value="close">
    <button type="submit" style="padding:1px;background-color:#c41f1f;">Close Announcement</button>
  </form>
</div>