Wordpress Jquery MySQL插件

Question

所以，我正在開發一個利用jquery和mysql來動態更新下拉框的插件。

首次加載頁面時，應使用從mysql中選擇的數據填充下拉框。 但除了渲染到頁面的空下拉框之外，什么都沒有用。 並且不會發出任何錯誤消息。

我在這里俯瞰什么？

插件/為myplugin / myplugin.php

 <?php /** * Plugin Name: Test * Plugin URI: * Description: This plugin performs dynamic region updates into select boxes in WordPress * Version: 1.0.0 * Author: Me * Author Email: * License: GPL2 */ function getregions_scripts() { wp_enqueue_script( 'getregions-script', plugin_dir_url(__FILE__) . "assets/getregions.js", array('jquery'), '1.0', true ); wp_localize_script( 'getregions-script', // this needs to match the name of our enqueued script 'gymRegions', // the name of the object array('ajaxurl' => admin_url('admin-ajax.php')) // the property/value ); } add_action( 'wp_enqueue_scripts', 'getregions_scripts' ); add_action( 'wp_ajax_showcountries', 'showcountries_callback' ); add_action( 'wp_ajax_no_priv_showcountries', 'showcountries_callback' ); function showcountries_callback() { include_once("pdo_mysql.php"); pdo_connect("localhost","user","password"); pdo_select_db("wpdb"); $action=$_POST["action"]; if($action=="showcountries"){ $showcountry = pdo_query("Select country_data from wp_usertable"); if (!$showcountry) { $message = 'Invalid query: ' . pdo_error() . "\\n"; $message .= 'Whole query: ' . $showcountry; die($message); }else{ foreach($showcountry as $row){ echo '<option value=".$row[country_code].">.$row[country_name].</option>'; } } } else if($action=="showregions"){ $country_id= $_POST["country_id"]; $showregion = pdo_query("Select region_code, region_name from regiontbl WHERE country_id=?", pdo_real_escape_string($country_id)); if (!$showregion) { $message = 'Invalid query: ' . pdo_error() . "\\n"; $message .= 'Whole query: ' . $regionquery; die($message); }else{ foreach($showregion as $row){ echo '<option value=".$row[region_code].">.$row[region_name].</option>'; } } } } function showcountries_frontend() { $the_html = ' <form id="MyForm"> <div style="float: left"> <select id="CountryList" onchange="getRegion()" size="20"></select> <select id="RegionList" size="20" onchange="getMap()"></select> </div> <div id="cityList" style="float: right"></div> </form>'; return $the_html; } add_shortcode("sc_frontend", "showcountries_frontend"); ?> 

插件/為myplugin /資產/ getregions.js

 function initialize($) { ....... feedData($); } jQuery(document).ready(function ($) { initialize($); }); function feedData($) { jQuery(document).ready(function ($) { var serialized = $('#MyForm').serialize(); $.ajax({ cache: false, type: "POST", async: false, url: "gymRegions.ajaxurl", data:{action=showcountries, serialized}, success: function (data) { $('#CountryList').append(data); }, error: function (data, status, error) { console.log(data); console.log(status); console.log(error); } }); }); } 

Answer 1

刪除console.log然后將無法獲取數據

Answer 2

這里有很多需要解決的問題。

您的ajax呼叫正在尋找撥打電話的位置; 但是，您傳遞的是這個值：

url: "gymRegions.ajaxurl",

因此，結果404基於該字符串：192.168.0.50/index.php/testing-2/ gymRegions.ajaxurl

本地化腳本

為了將插件目錄的位置傳遞給javascript文件，您需要本地化該腳本。 這可以使用以下方法在wordpress中完成：

wp_enqueue_( 'getregions-script', plugin_dir_url(__FILE__) . "assets/getregions.js", array('jquery'), '1.0', true);
wp_localize_script( 'getregions-script', 'gymRegions', array('ajaxurl' => plugin_dir_url(__FILE__) . 'assets/getregions-ajax.php'));

這將允許您在ajax調用中調用gymRegions.ajaxurl 而不帶引號 。

制作你的ajax文件

現在已經完成了，您可以在插件中創建一個新的php文件：assets / getregions-ajax.php。 此文件將包含您當前的showcountries_callback函數內容（不需要是函數）。 這個頁面上的任何內容都將被執行。

要包含wp，我通常使用這樣的東西：

header('Content-Type:application/json');
header("X-Robots-Tag: noindex, nofollow", true);

/* find and load wp to avoid duplicating class */
if (file_exists('../../../../wp-load.php')) :
    require_once('../../../../wp-load.php');
else:
    require_once('../../../../../wp-load.php');
endif;

在此之后，我將要求我的課程或執行任何代碼。

JSON編碼輸出

最后，考慮對輸出進行JSON編碼。 而不是立即回應所有內容，而是在文件末尾創建一個$ html變量：

echo json_encode($html, JSON_PRETTY_PRINT);

一步一步走

起初這可能有點令人困惑，但一次只采取一步將有所幫助。 不要試圖一口氣吃掉它，只要專注於讓'hello world'從你的ajax調用中返回，然后從那里開始構建。

可能還有其他問題，但至少應該讓您開始走正確的道路。