Question

我正在尝试使用WordPress默认ajax保存表单数据，但它返回200，但没有保存在数据库中。

好吧，我尝试了所有操作，但是我的表单不存储表单数据，但是成功了，我能够使用控制台日志。

我正在尝试使用wordpress默认ajax添加表单详细信息，以便在管理员端创建表单。对于ajax，我创建了js文件，并作为admin和用于插入添加到php文件中的数据的函数提供。

现在一切正常，我的页面正在使用ajex提交，还打印了表单数据，并在控制台中获取了所有表单数据。

我的ajax正在加载，但无法将数据保存到数据库中。这是下面的一些代码。

PHP代码


function Adduser()
{
    if(isset($_POST["btnsave"]))
    {
        global $wpdb;

        $fname=$_POST["fname"];
        $lname=$_POST["lname"];
        $email=$_POST["eml"];
        $phn=$_POST["phn"];
        $adr=$_POST["adr"];

        $qry="insert user_data values(null,'$fname','$lname','$email','$phn','$adr')";
        $result=$wpdb->query($qry);
        if($result==true)
        {
            echo "<script> alert('Data Inserted'); </script>";
        }
        else
        {
            echo "<script> alert('Enter valid data Please '); </script>";
        }


    }

    ?>
<form action="?page=user-data" class="form" id="form" method="post" >
        <h1>Add Detail</h1>
        <label for="">Name</label>
        <input type="text" placeholder="First Name" name="fname" id="fname">

        <label for="">Last Name</label>
                <input type="text" placeholder="Last Name" name="lname" id="lname">

                <label for="">Email</label>
        <input type="text" placeholder="Email" name="eml" id="eml">

        <label for="">Phone No</label>
                <input type="text" placeholder="Phone" name="phn" id="phn">

                <label for="">Address</label>
        <textarea name="adr" id="adr" cols="30" rows="10" id="adr"></textarea>

        <input type="submit" value="SignUp" name="btnsave" id="btnsave">


    </form>
<?php

}
add_action('wp_ajax_Adduser', 'Adduser');
add_action( 'wp_ajax_nopriv_Adduser', 'Adduser' );

Js代码

jQuery('.form').on('submit', function (e) {
            var ajaxurl = "/genwp/wp-admin/admin-ajax.php";
            e.preventDefault();
            var fname = jQuery('#fname').val();
            var lname = jQuery('#lname').val();
            var eml = jQuery('#eml').val();
            var phn = jQuery('#phn').val();
            var adr = jQuery('#adr').val();
            console.log(fname);
            console.log(lname);
            console.log(eml);
            console.log(phn);
            console.log(adr);

            jQuery.ajax({
              type: 'post',
              url: ajaxurl, 
              data: {
                        action : 'Adduser', // wp_ajax_*, wp_ajax_nopriv_*
                        'fname': fname,
                        'lname': lname,
                        'eml': eml,
                        'phn': phn,
                        'adr': adr,   
                    },
              success: function () {
                alert('form was submitted');
              } 
            });

          });



    });

所以请帮助我，我是wordpress ajax的新手，无法解决此问题

Answer 1

您需要在页面上附加html，然后才能使用ajax调用的成功函数，该函数将ajax调用的结果作为参数，在本例中为html，我使用append将响应添加到页面主体标签

success: function(html) {
   $('body').append(html);//change the selector to your desired element
}

Answer 2

您输入了错误的插入查询。

替换此：

$qry="insert user_data values(null,'$fname','$lname','$email','$phn','$adr')";

与此

$qry="insert into user_data values('$fname','$lname','$email','$phn','$adr')";

或仅使用wordpress标准插入：

$wpdb->insert( 
'user_data', 
array( 
    'column1' => 'value1', 
    'column2' => 123 
)
);

-----------------

编辑：这是执行此操作的正确方法

表格：

<form action="" class="form" id="form" method="post" >
    <h1>Add Detail</h1>
    <label for="">Name</label>
    <input type="text" placeholder="First Name" name="fname" id="fname">

    <label for="">Last Name</label>
            <input type="text" placeholder="Last Name" name="lname" id="lname">

            <label for="">Email</label>
    <input type="text" placeholder="Email" name="eml" id="eml">

    <label for="">Phone No</label>
            <input type="text" placeholder="Phone" name="phn" id="phn">

            <label for="">Address</label>
    <textarea name="adr" id="adr" cols="30" rows="10" id="adr"></textarea>

    <input type="submit" value="SignUp" name="btnsave" id="btnsave">


</form>

更新您的jquery函数：

<script>
jQuery('form#form').on('submit', function(e){
var fname = jQuery('#fname').val();
var lname = jQuery('#lname').val();
var eml = jQuery('#eml').val();
var phn = jQuery('#phn').val();
var adr = jQuery('#adr').val();
// calling ajax
$.ajax({
    type: 'POST',
    dataType: 'json',
    url: "<?php echo admin_url('admin-ajax.php'); ?>", 
    data: { 
        'action' : 'add_new_user',
        'fname': fname,
        'lname': lname,
        'eml': eml,
        'phn': phn,
        'adr': adr,  
    },
    success: function(data){
        if (data.res == true){
            alert(data.message);    // success message
        }else{
            alert(data.message);    // fail
        }
    }
});
});
</script>

将此代码放入functions.php

add_action( 'wp_ajax_nopriv_add_new_user', 'add_new_user' );
add_action( 'wp_ajax_add_new_user', 'add_new_user' );
function add_new_user(){
global $wpdb;

$fname = sanitize_text_field($_POST["fname"]);
$lname = sanitize_text_field($_POST["lname"]);
$email = sanitize_text_field($_POST["eml"]);
$phn = intval($_POST["phn"]);
$adr = sanitize_text_field($_POST["adr"]);

$tableName = 'user_data';
$insert_row = $wpdb->insert( 
                $tableName, 
                array( 
                    'fname' => $fname, 
                    'lname' => $lname, 
                    'email' => $email, 
                    'phone' => $phn,
                    'address' => $adr, 
                )
            );
// if row inserted in table
if($insert_row){
    echo json_encode(array('res'=>true, 'message'=>__('New row has been inserted.')));
}else{
    echo json_encode(array('res'=>false, 'message'=>__('Something went wrong. Please try again later.')));
}
wp_die();
}

如何在数据库中使用Wordpress Ajax存储表单数据

2 个答案: