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

时间:2016-11-06 01:57:51

标签: php jquery ajax wordpress

我是wordpress的新手,我想要一个自定义表单,所以我创建了这个表单,用户可以从前端输入数据。但是当我提交此表单时,如果成功,则在<?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(); ?> 内,整个页面再次显示。因为我得到了所有&#34;数据&#34;在ajax成功或错误功能。我怎样才能获得echo中的数据?

#include "stdafx.h"
#include <iostream>
using namespace std;
int main()
{
    cin;
    return 0;
}

2 个答案:

答案 0 :(得分:2)

使用die("....");代替a.get_allocator() == b.get_allocator()将停止您的PHP代码,因此您的HTML将无法显示。

echo "....";

答案 1 :(得分:-1)

&#13;
&#13;
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.";
  }
  
});
&#13;
    <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>
&#13;
&#13;
&#13;