如何在wordpress的同一页面上提交ajax表单

Question

我是 wordpress 新手，我想要一个自定义表单，所以我创建了这个表单，用户可以在其中从前端输入数据。但是当我提交这个表单时，如果成功，在<div id="feedback"></div>内，整个页面又被显示出来了。因为我在 ajax 成功或错误函数中获得了所有“数据”。如何仅获取 echo 中的数据？

<?php
/*
Template Name: Complain
*/
get_header();
?>

<?php

if($_POST['submit']) {
    global $wpdb;

    $complain_name = $_POST['complain_name'];  

    if($wpdb->insert(
            'wp_complain',
            array(
                'name'=>$complain_name                   
            )
        )==false) {
        echo 'Database insertion failed';
    }
    else {
        echo 'Database insertion successful';
    }
}
else {
    ?>
    <form action="" method="POST" role="form" class="form-horizontal">

           Name <input type="text" id="complain_name" class="form-control" name="complain_name" required="required" autocomplete="off"/>            

            <input class="btn btn-block" id="submit" type="submit" value="Submit" name="submit">

        <div id="feedback"></div>
    </form>

    <script>
        $(document).ready(function(e){

            $("form").on('submit',(function(e) {
                e.preventDefault();
                //heresome other functions for validation

                    formData =new FormData(this)
                    $.ajax({
                        url:'<?php echo content_url(); ?>/themes/abc/complain-detail.php',
                        type: "POST",
                        data: formData ,
                        contentType: false,
                        cache: false,
                        processData:false,
                        success: function(data)
                        {                               
                                $('#feedback').html(data)                               
                        },
                        error: function(data)
                        {
                            $('#feedback').html(data)
                        }
                    });
                }

            ));

        })
    </script>

    <?php
}
get_footer();
?>

Answer 1

使用die("...."); 代替echo "...."; 女巫会在这一行停止您的PHP 代码，因此您的HTML 将不会显示。

if( isset($_POST["submit"]) && !empty($_POST["submit"]) ){

      if(inserted)
           die("Database insertion successful"); //PHP will stop here
      else
           die("Database insertion failed"); //or here

}

  //Your HTML won't be shown ...

Answer 2

const form = document.querySelector(".form-horizontal");
const ajax = new XMLHttpRequest();
form.addEventListener("submit",function(e){
  e.preventDefault();
  let data = new ForData();
  
  data.append("complain_name",document.querySelector(".form-control").value);
  ajax.open("POST",'<?php echo content_url(); ?>/themes/abc/complain-detail.php');
  ajax.send(data);
  
  if (this.readyState == 4 && this.status == 200){
    
    document.querySelector(".feedback").textContent = "Thanks for your feedback.";
  
  }else{
        document.querySelector(".feedback").textContent = "Sorry,something when wrong,please try again later.";
  }
  
});

    <form action="" method="POST" role="form" class="form-horizontal">

           Name <input type="text" id="complain_name" class="form-control" name="complain_name" required="required" autocomplete="off"/>            

            <input class="btn btn-block" id="submit" type="submit" value="Submit" name="submit">

        <div id="feedback"></div>
    </form>