php - 在 wordpress 插件中使用 ajax 将数据插入自定义表的问题

Question

我正在尝试在使用 AJAX 创建插件时在 wordpress 的自定义表中插入数据。但我没能做到。这是我注册脚本的contact.php代码

    add_action('wp_enqueue_scripts', 'setting_up_scripts_contact_form_wp');
function setting_up_scripts_contact_form_wp() {
    wp_register_style( 'contact-custom-style',plugins_url('public/css/style.css', __FILE__) );
    wp_enqueue_style( 'contact-custom-style');
    wp_enqueue_script( 'cfajax-con', plugins_url('includes/submit-form.js', __FILE__),array(),false,true  );
    // wp_enqueue_script( 'wpforajax_con_test', plugins_url('public/js/test.js', __FILE__) );
    // wp_register_script('wpforajax_con_test', plugin_dir_url(__FILE__) . 'test.js', true);
    wp_localize_script(
        'jsforcon-frontend-js',
        'jsforcon_globals',
        [
          'ajax_url'    => admin_url( 'admin-ajax.php' ),
          'nonce'       => wp_create_nonce( 'jsforcon_insert_nonce' )
        ]
      );
}

联系表格是

<div class="container">
    <div class="row display_big justify-content-center">Contact Us</div>
        <div class="row justify-content-center">
            <div class="col-md-6 ">
            <form>
           <input type="text" id="conName" class="txt_trans txt_full " name="conName" placeholder="Name" required><br><br>
           <input type="text" id="conMail" name="conMail" class="txt_trans txt_full" placeholder="Mail" required><br><br>
           <small id="emailHelp" class="form-text text-muted p-0 m-0">We takes your mail id for sending reply to you.</small> 
           <textarea id="conContant" class="txt_a_trans txt_full " name="conContant"cols="30" rows="10" placeholder="content" required></textarea>
           <div class="con_error_msg"></div>
           <button type="button" class="btn_submit" id="saveContact" value="load data" >Contact Us</button><br><br><br><br> 
           </form> 
           </div> </div></div>

<?php echo "<script type='text/javascript'>var ajaxurl = '".admin_url('admin-ajax.php')."'</script>"; ?>

insert.php 文件在这里

<?php

function my_contact_form(){

require( dirname(__FILE__).'/wp-load.php' );
global $wpdb;
$table_name = 'wp_contact_form';

  $wpdb->insert( 
    $table_name, 
    array( 
        'con_name' => $your_name, 
        'con_main' => $your_mail, 
        'contant' => $your_content, 
        'con_status' => 'unview',
        'con_rep_status' => 'notReplied',
        'con_date' => time()
    ), 
    array( 
        '%s', 
        '%s',
        '%s',
        '%s',
        '%s',
        '%s'
    ) 
 );
}
?>

实现ajax的javascript代码

    var cf_saveContact =  document.getElementById("cf_saveContact");
  cf_saveContact.addEventListener('click', function() {
  var conName =  document.getElementById("conName").value;
  var conMail =  document.getElementById("conMail").value;
  var conContant =  document.getElementById("conContant").value;
   
       if(conName == "" || conMail == "" || conContant == ""){
              document.querySelector(".con_error_msg").innerHTML = "<p style='color:red'>all fields are required</p>";
            }else{
                var action = "jsforcon-insert";
                var xmlhttp = new XMLHttpRequest();
                xmlhttp.open("GET",jsforwp_globals.ajax_url+"?action="+action+"&_ajax_nonce="+jsforcon_globals.nonce+"&name="+conName+"&mail="+conMail+"&content="+conContant,true);
                xmlhttp.send();
                xmlhttp.onreadystatechange = function(){
                    if(this.readyState == 4 && this.status == 200){
                        conName =  document.getElementById("conName").value = "";
                        conMail =  document.getElementById("conMail").value = "";
                        conContant =  document.getElementById("conContant").value = "";
                        document.querySelector(".con_error_msg").innerHTML = "<p style='color:green'>Successfully Sent</p>";
                    } } }
});

我在 wordpress 工作之外使用 ajax 代码，但在 wordpress 中不起作用。我只想在 wordpress 表中使用 ajax 插入数据。如果您有任何其他方法而不是建议。

标签： phpajaxwordpresswordpress-plugin-creation

Answer 1

您wp_enqueue_script为 submit-form.js 添加了错误的处理程序名称。

add_action('wp_enqueue_scripts', 'setting_up_scripts_contact_form_wp');
function setting_up_scripts_contact_form_wp() {
    wp_register_style( 'contact-custom-style',plugins_url('public/css/style.css', __FILE__) );
    wp_enqueue_style( 'contact-custom-style');
    wp_enqueue_script( 'jsforcon-frontend-js', plugins_url('includes/submit-form.js', __FILE__),array(),false,true  );
    // wp_enqueue_script( 'wpforajax_con_test', plugins_url('public/js/test.js', __FILE__) );
    // wp_register_script('wpforajax_con_test', plugin_dir_url(__FILE__) . 'test.js', true);

    wp_localize_script(
        'jsforcon-frontend-js',
        'jsforcon_globals',
        [
          'ajax_url'    => admin_url( 'admin-ajax.php' ),
          'nonce'       => wp_create_nonce( 'jsforcon_insert_nonce' )
        ]
      );
}

并更改jsforwp_globals.ajax_url为jsforcon_globals.ajax_url

var cf_saveContact =  document.getElementById("cf_saveContact");
cf_saveContact.addEventListener('click', function() {
    var conName =  document.getElementById("conName").value;
    var conMail =  document.getElementById("conMail").value;
    var conContant =  document.getElementById("conContant").value;
   
    if(conName == "" || conMail == "" || conContant == ""){
        document.querySelector(".con_error_msg").innerHTML = "<p style='color:red'>all fields are required</p>";
    }else{
        var action = "jsforcon-insert";
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET",jsforcon_globals.ajax_url+"?action="+action+"&_ajax_nonce="+jsforcon_globals.nonce+"&name="+conName+"&mail="+conMail+"&content="+conContant,true);
        xmlhttp.send();
        xmlhttp.onreadystatechange = function(){
            if(this.readyState == 4 && this.status == 200){
                conName =  document.getElementById("conName").value = "";
                conMail =  document.getElementById("conMail").value = "";
                conContant =  document.getElementById("conContant").value = "";
                document.querySelector(".con_error_msg").innerHTML = "<p style='color:green'>Successfully Sent</p>";
            } 
        } 
     }
});