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

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>

Answer 2

あなたのHTMLが表示されませんので、代わりにecho "....";魔女の使用die("....");は、このラインでPHPコードを停止します。

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