如何在Wordpress的同一頁面上提交Ajax表單

Question

我是wordpress的新手，我想要一個自定義表單，因此我創建了此表單，用戶可以在其中輸入前端數據。 但是，當我提交此表單時，如果成功，在<div id="feedback"></div> ，將再次顯示整個頁面。 因為我獲得了ajax成功或錯誤功能中的所有“數據”。 如何僅獲取回聲中的數據？

<?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 "...."; witch將在這一行停止您的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>