WordPress+JavaScipt+AJAX+MySQL：插入表单查询

时间：2017-06-15 作者：Adam J.

我正试图在WordPress管理网站上制作带有表单的预订插件，在那里我可以在日历中添加新事件（用JavaScript制作）。我必须提交包含所有数据的表单，并将数据插入MySQL数据库。

我的ajax.js 文件：

function ajaxSubmit(e){
var nazwa_szkolenia = document.getElementById("nazwa_szkolenia").value;
var Data_szkolenia = document.getElementById("Data_szkolenia").value;
var Godzina = document.getElementById("Godzina").value;
var Max_pacjent = document.getElementById("Max_pacjent").value;

// Returns successful data submission message when the entered information is stored in database.
var dataString = \'nazwa_szkolenia1=\' + nazwa_szkolenia + \'&Data_szkolenia1=\' + Data_szkolenia + \'&Godzina1=\' + Godzina + \'&Max_pacjent1=\' + Max_pacjent;
if (nazwa_szkolenia == \'\' || Data_szkolenia == \'\' || Max_pacjent == \'\') {
    alert("fill all fields");
} else {
    // prevent the default action.
    e.preventDefault();

    var myform= jQuery(this).serialize();

    jQuery.ajax({
        type:"POST",
        // Get the admin ajax url which we have passed through wp_localize_script().
        url: ajax_object.ajax_url,
        action: "submitAjaxForm",
        data: dataString,
        error: function(jqXHR, textStatus, errorThrown){                                        
        console.error("The following error occurred: " + textStatus, errorThrown);                                                       
    },
        success:function(data){
            alert("process OK");
        }
    });
}
return false;
}
arcode-functions.php:

<?php
add_action(\'init\', \'registerFormAction\');

    function registerFormAction(){
        add_action(\'wp_ajax_nopriv_submitAjaxForm\',\'submitAjaxForm_callback\');
        add_action(\'wp_ajax_submitAjaxForm\',\'submitAjaxForm_callback\');

    }
    
    function submitAjaxForm_callback(){
        global $wpdb;
    
      
        $nazwa_szkolenia2 = $_POST[\'nazwa_szkolenia1\'];
        $Data_szkolenia2 = $_POST[\'Data_szkolenia1\'];
        $Godzina2 = $_POST[\'Godzina1\'];
        $Max_pacjent2 = $_POST[\'Max_pacjent1\'];
    
    
        $wpdb->insert( $wpdb->modul_terminarz, array( \'proba\' => $nazwa_szkolenia2, \'id\' => \'10\', \'data_szkolenia\' => $Data_szkolenia2, \'typ_szkolenia\' => \'1\', \'ile_miejsc\' => $Max_pacjent2, \'pelne\' => \'1\', \'Ile_miejsc_akt\' => \'4\' ) );
   

        wp_die();
    }

?>
我添加了admin-ajax.php 具有wp_localize_script 作用表单按钮由JavaScript制作：

var Input_Form_Send = document.createElement(\'input\');
    Input_Form_Send.value = \'Utwórz\';
    Input_Form_Send.type = \'submit\';
    Input_Form_Send.className = \'input-form-send\';  
    Input_Form_Send.onclick = ajaxSubmit;
当我填写表单中的所有字段时，单击按钮，然后出现警报；“处理正常”；，但数据库里没有什么新东西nazwa\\u szkolenia、Data\\u szkolenia、Godzina、Max\\u pacjent-这些是表单字段的名称。

也许你知道我做错了什么？

2 个回复
SO网友:scott

为什么使用jQuery序列化数据，但不通过AJAX传递该变量？我的猜测是，数据需要以数组形式存在，而不是像URL那样的数据字符串。

您可以通过返回数据值并将其显示在alert() 在成功函数中。

对我来说，有效的方法是将数据放在关系数组中并使用GET 而不是post。

var dataString = [];
dataString[\'nazwa_szkolenia1\'] = nazwa_szkolenia;  // etc.
希望这有帮助。

SO网友:Adam J.

我把所有东西都打扫了一点。现在看起来是这样的：

ajax.js

function ajaxSubmit(e){
var nazwa_szkolenia = document.getElementById("nazwa_szkolenia").value;
var Data_szkolenia = document.getElementById("Data_szkolenia").value;
var Godzina = document.getElementById("Godzina").value;
var Max_pacjent = document.getElementById("Max_pacjent").value;

var dataString = [];
dataString[\'nazwa_szkolenia1\'] = nazwa_szkolenia;
dataString[\'Data_szkolenia1\'] = Data_szkolenia;
dataString[\'Godzina1\'] = Godzina;
dataString[\'Max_pacjent1\'] = Max_pacjent;

if (nazwa_szkolenia == \'\' || Data_szkolenia == \'\' || Godzina == \'\' || Max_pacjent == \'\') {
alert("Wypełnij wszystkie pola");
} else {
    // prevent the default action.
    e.preventDefault();

    //var myform= jQuery(this).serialize();

    jQuery.ajax({
        type:"GET",
        // Get the admin ajax url which we have passed through wp_localize_script().
        url: ajax_object.ajax_url,
        action: "submitAjaxForm",
        data: dataString,
        error: function(jqXHR, textStatus, errorThrown){                                        
        console.error("The following error occured: " + textStatus, errorThrown);                                                       
    },
        success:function(data){
console.log(dataString);
        }
    });
}
return false;
}

arcode-functions.php:

<?php

function registerFormAction(){
    add_action(\'wp_ajax_nopriv_submitAjaxForm\',\'submitAjaxForm_callback\');
    add_action(\'wp_ajax_submitAjaxForm\',\'submitAjaxForm_callback\');
}
    
function submitAjaxForm_callback(){
   global $wpdb;
    
    $nazwa_szkolenia2 = $_GET[\'nazwa_szkolenia1\'];
    $Data_szkolenia2 = $_GET[\'Data_szkolenia1\'];
    $Godzina_szkolenia2 = $_GET[\'Godzina1\'];
    $Max_pacjent2 = $_GET[\'Max_pacjent1\'];

        $result = $wpdb->insert( $wpdb->modul_terminarz, array( 
                                  \'Nazwa_szkolenia\' => $nazwa_szkolenia2, 
                                  \'Data_szkolenia\' => $Data_szkolenia2, 
                                  \'Godzina_szkolenia\' => $Godzina_szkolenia2,
                                  \'Typ_szkolenia\' => \'1\',
                                  \'Ile_miejsc_max\' => $Max_pacjent2,
                                  \'Pelna_obsada\' => \'0\',
                                  ) );

    wp_die();   
}


add_action(\'init\', \'registerFormAction\');

?>
该代码保留在我的menu.php:

// Hook for adding admin menus

 add_action(\'admin_menu\', \'create_Terminarz_menu\');
 
 // action function for above hook
 
/**
 * Adds a new top-level page to the administration menu.
 */
function create_Terminarz_menu() {

     add_menu_page(
        \'ARCode Terminarz\',
        \'Terminarz\',
        \'manage_options\',
        \'zarzadzanie-terminami\',
        \'tm_zarzadzanie_terminami_odp\',
        plugins_url(\'images/terminarz.png\', __FILE__),\'2.2.10\'
    );
    
     add_submenu_page( \'zarzadzanie-terminami\', \'ARCode Terminarz\' . \'Terminy szkoleń\', \'<b style="color:#E46500;">Terminy szkoleń</b>\', \'manage_options\', \'zarzadzanie-terminami\', \'tm_zarzadzanie_terminami_odp\');
     add_submenu_page( \'zarzadzanie-terminami\', \'ARCode Terminarz\' . \'Pacjenci\', \'Pacjenci\', \'manage_options\', \'pacjenci\', \'tm_zarzadzanie_pacjentami_odp\');
      add_action(\'admin_enqueue_scripts\',\'load_custom_wp_admin_js\');
}

/**
 * Display callback for the Unsub page.
 */
 function tm_zarzadzanie_pacjentami_odp() {
     
 }
 
 
 
 function load_custom_wp_admin_js($hook){
    wp_register_script( \'jquery.min.js\', plugin_dir_url( __FILE__ ) . \'js/jquery.min.js\', array(\'jquery\'));
    wp_enqueue_script( \'jquery.min.js\' );
    wp_enqueue_style( \'kalendarz\',plugin_dir_url( __FILE__ ) . \'kalendarz.css\',false,\'1.1\',\'all\' );
    wp_register_script( \'ajax-script\', plugin_dir_url( __FILE__ ) . \'ajax_js.js\');
    wp_localize_script(\'ajax-script\', \'ajax_object\', array(\'ajax_url\' => admin_url(\'admin-ajax.php\')));
    wp_enqueue_script( \'ajax-script\', plugin_dir_url( __FILE__ ) . \'ajax_js.js\');
}

 
 /**
 * Display callback for the Unsub page.
 */
 function tm_zarzadzanie_terminami_odp() {
     include_once( \'arcode-functions.php\');
     include_once( \'kalendarz.php\');
     
     ?>
     <div class="wrap" style="position: fixed;
          width: 85%;
          top: 40px;
          bottom: 80px;">
     </div>
     <?php

 }
在中kalendarz.php 我拥有预订日历和表单的所有功能，这是我需要发送的表单：

this.createFormular = function () {
             var ob = this.o;
             
             var Admin_Form = document.createElement(\'form\')
             Admin_Form.name=\'Formularz_Admin\';
             Admin_Form.method=\'GET\';
             Admin_Form.action=\'\';

             var tabela = document.createElement(\'table\');
             tabela.className = \'formular-table\';
            
             var tr = document.createElement(\'tr\');
             tabela.appendChild(tr);
             var td = document.createElement(\'td\');
             td.appendChild(document.createTextNode(\'Nazwa szkolenia:   \'));
             tr.appendChild(td);
             tr.appendChild(td);
             
             td.appendChild(Input_Name_Training);
             
             var tr = document.createElement(\'tr\');
             tabela.appendChild(tr);
             var td = document.createElement(\'td\');
             td.appendChild(document.createTextNode(\'Data szkolenia:   \'));
             tr.appendChild(td);
             tr.appendChild(td);
             
             td.appendChild(Input_Date_Training);
             
             var tr = document.createElement(\'tr\');
             tabela.appendChild(tr);
             var td = document.createElement(\'td\');
             td.appendChild(document.createTextNode(\'Godzina szkolenia:   \'));
             tr.appendChild(td);
             tr.appendChild(td);
             
             td.appendChild(Input_Hour_Training);
             
             var tr = document.createElement(\'tr\');
             tabela.appendChild(tr);
             var td = document.createElement(\'td\');
             td.appendChild(document.createTextNode(\'Max ilość osób:   \'));
             tr.appendChild(td);
             tr.appendChild(td);
             
             td.appendChild(Input_How_Many_People);          
             
             
             var tr = document.createElement(\'tr\');
             tabela.appendChild(tr);
             var td = document.createElement(\'td\');
             td.appendChild(document.createTextNode(\'   \'));
             tr.appendChild(td);
             tr.appendChild(td);
             
             td.appendChild(Input_Form_Send);       
              
             Admin_Form.appendChild(tabela);
             
             this.divForm.appendChild(Admin_Form);
             

         };
我试着检查一下submitAjaxForm正在工作，正如scott所说，我已经与echo进行了检查，但没有给出任何结果。DataString提供正确的数组，但data提供0。。。我不知道我做错了什么；/我不知道注册submitAjaxForm的钩子是否不好，在我看来，所有钩子都可以。。。？

结束
标签： plugins   ajax   javascript   mysql   小码农  

相关推荐

如何通过插件向所有管理页面添加一个javascript文件？

上下文：对于登录的用户，我将向url附加一个查询字符串，以便绕过Cloudflare的缓存。所以，举个例子。com成为示例。com/？例如，nocache=y。我用以下代码很容易地完成了这一点：function tbcloudflare_query_arg() { if(is_user_logged_in()){ wp_enqueue_script( \'tbcloudflare_check_query\', plugin_dir_url( __FILE__ ) .