WordPress自定义插件开发中的纯JavaScript基本AJAX调用
我正在开发一个自定义WordPress插件,其中我在主插件页面上有一些HTML表单,在后台有一些PHP函数,比如从数据库中获取信息等。为了详细解释,下面是代码 主插件文件:WordPress自定义插件开发中的纯JavaScript基本AJAX调用,javascript,php,ajax,wordpress,Javascript,Php,Ajax,Wordpress,我正在开发一个自定义WordPress插件,其中我在主插件页面上有一些HTML表单,在后台有一些PHP函数,比如从数据库中获取信息等。为了详细解释,下面是代码 主插件文件: <?php /* Plugin Name: WP Testing Plugin Plugin URI: http://www.wordpress.org/WP-Testing-Plugin Description: A Detailed Description About This Plugin. Author: Mu
<?php
/*
Plugin Name: WP Testing Plugin
Plugin URI: http://www.wordpress.org/WP-Testing-Plugin
Description: A Detailed Description About This Plugin.
Author: Muhammad Hassan
Version: 0.1
Author URI: http://www.wordpress.org
*/
/*____________WP Testing Plugin Admin/Script_____________*/
function wp_testingPlugin_admin() {
echo '
<form id="searchForm" onsubmit="return searchData(this)">
<input name="WhatToSearch" type="text" />
<input type="submit" value="Search"/>
<input type="reset" value="Reset"/>
<div id="showReturnData"></div>
</form>
';
echo '
<script type="text/javascript">
function searchData(incomingForm) {
// Confirmation To Add A Data
var answer = confirm("Are You Sure Want To Search?");
if (answer){
// If User Click Ok Then Execute The Below Code
var FD = new FormData(incomingForm); // Get FORM Element Object
FD.append("Function", "SearchFunction"); // Adding Extra Data In FORM Element Object To Hit Only This Function In Ajax Call File
var ajx = new XMLHttpRequest();
ajx.onreadystatechange = function () {
if (ajx.readyState == 4 && ajx.status == 200) {
document.getElementById("showReturnData").innerHTML = ajx.responseText;
}
};
ajx.open("POST", "'.plugin_dir_url( __FILE__ ).'my_functions.php", true);
ajx.send(FD);
document.getElementById("showReturnData").innerHTML = "<div class="error">ERROR: AJAX Did Not Respond.</div>";
}
return false; // For Not To Reload Page
}
</script>
';
//if you want only logged in users to access this function use this hook
add_action('wp_ajax_ACTION_NAME', 'searchData');
//if you want none logged in users to access this function use this hook
add_action('wp_ajax_nopriv_ACTION_NAME', 'searchData');
}
/*__________________________________________________________________*/
/*____________WP Testing Plugin Option_____________*/
//Adding "WP Testing Plugin" Menu To WordPress -> Tools
function wp_testingPlugin() {
// add_management_page( $page_title, $menu_title, $capability, $menu_slug, $function); Menu Under Tools
add_management_page("WP Testing Plugin By Hassan", "WP Testing Plugin", 'activate_plugins', "WP-Testing-Plugin", "wp_testingPlugin_admin");
}
add_action('admin_menu', 'wp_testingPlugin');
/*__________________________________________________________________*/
?>
<?php
/*
Plugin Name: WP Testing Plugin
Plugin URI: http://www.wordpress.org/WP-Testing-Plugin
Description: A Detailed Description About This Plugin.
Author: Muhammad Hassan
Version: 0.1
Author URI: http://www.wordpress.org
*/
// Calling All PHP File To Load
include('my_functions.php');
/*____________WP Testing Plugin Admin/Script_____________*/
function wp_testingPlugin_admin() {
echo '
<form id="searchForm">
<input name="WhatToSearch" type="text" />
<input type="submit" value="Search"/>
<input type="reset" value="Reset"/>
<div id="showReturnData"></div>
</form>
';
}
/*__________________________________________________________________*/
/*____________WP Testing Plugin Option_____________*/
//Adding "WP Testing Plugin" Menu To WordPress -> Tools
function wp_testingPlugin() {
// add_management_page( $page_title, $menu_title, $capability, $menu_slug, $function); Menu Under Tools
add_management_page("WP Testing Plugin By Hassan", "WP Testing Plugin", 'activate_plugins', "WP-Testing-Plugin", "wp_testingPlugin_admin");
}
add_action('admin_menu', 'wp_testingPlugin');
/*__________________________________________________________________*/
?>
工具
函数wp_testingPlugin(){
//添加管理页面($page\u title、$menu\u title、$capability、$menu\u slug、$function);工具下的菜单
添加_管理_页面(“Hassan的WP测试插件”、“WP测试插件”、“激活_插件”、“WP测试插件”、“WP测试插件管理”);
}
添加操作(“管理菜单”、“wp测试插件”);
/*__________________________________________________________________*/
?>
这是my_functions.php文件
<?php
/****************************************************************************/
//Garb The Function Parameter
/****************************************************************************/
$Function = $_POST['Function'];
/****************************************************************************/
// Run Search Function
/****************************************************************************/
if ($Function == "SearchFunction"){
if(!isset($_POST['WhatToSearch'])){
$WhatToSearch = "Nothing";
} else {
$WhatToSearch = $_POST['WhatToSearch'];
}
echo "<div class='success'>SUCCESS: Function Is Working Perfectly And Getting Data ".$WhatToSearch.".</div>";
}
/****************************************************************************/
// Run Another Function
/****************************************************************************/
if ($Function == "AnotherFunction"){
echo "<div class='success'>SUCCESS: Another Function Is Working Perfectly.</div>";
}
?>
最后,在获得帮助后,我在这里以简单的步骤分享我的问题的完整示例。这个答案也被认为是一个完整的基本Ajax插件示例。现在我个人建议将每个文件分开,以便更好、干净和舒适地编码
主插件文件:
<?php
/*
Plugin Name: WP Testing Plugin
Plugin URI: http://www.wordpress.org/WP-Testing-Plugin
Description: A Detailed Description About This Plugin.
Author: Muhammad Hassan
Version: 0.1
Author URI: http://www.wordpress.org
*/
/*____________WP Testing Plugin Admin/Script_____________*/
function wp_testingPlugin_admin() {
echo '
<form id="searchForm" onsubmit="return searchData(this)">
<input name="WhatToSearch" type="text" />
<input type="submit" value="Search"/>
<input type="reset" value="Reset"/>
<div id="showReturnData"></div>
</form>
';
echo '
<script type="text/javascript">
function searchData(incomingForm) {
// Confirmation To Add A Data
var answer = confirm("Are You Sure Want To Search?");
if (answer){
// If User Click Ok Then Execute The Below Code
var FD = new FormData(incomingForm); // Get FORM Element Object
FD.append("Function", "SearchFunction"); // Adding Extra Data In FORM Element Object To Hit Only This Function In Ajax Call File
var ajx = new XMLHttpRequest();
ajx.onreadystatechange = function () {
if (ajx.readyState == 4 && ajx.status == 200) {
document.getElementById("showReturnData").innerHTML = ajx.responseText;
}
};
ajx.open("POST", "'.plugin_dir_url( __FILE__ ).'my_functions.php", true);
ajx.send(FD);
document.getElementById("showReturnData").innerHTML = "<div class="error">ERROR: AJAX Did Not Respond.</div>";
}
return false; // For Not To Reload Page
}
</script>
';
//if you want only logged in users to access this function use this hook
add_action('wp_ajax_ACTION_NAME', 'searchData');
//if you want none logged in users to access this function use this hook
add_action('wp_ajax_nopriv_ACTION_NAME', 'searchData');
}
/*__________________________________________________________________*/
/*____________WP Testing Plugin Option_____________*/
//Adding "WP Testing Plugin" Menu To WordPress -> Tools
function wp_testingPlugin() {
// add_management_page( $page_title, $menu_title, $capability, $menu_slug, $function); Menu Under Tools
add_management_page("WP Testing Plugin By Hassan", "WP Testing Plugin", 'activate_plugins', "WP-Testing-Plugin", "wp_testingPlugin_admin");
}
add_action('admin_menu', 'wp_testingPlugin');
/*__________________________________________________________________*/
?>
<?php
/*
Plugin Name: WP Testing Plugin
Plugin URI: http://www.wordpress.org/WP-Testing-Plugin
Description: A Detailed Description About This Plugin.
Author: Muhammad Hassan
Version: 0.1
Author URI: http://www.wordpress.org
*/
// Calling All PHP File To Load
include('my_functions.php');
/*____________WP Testing Plugin Admin/Script_____________*/
function wp_testingPlugin_admin() {
echo '
<form id="searchForm">
<input name="WhatToSearch" type="text" />
<input type="submit" value="Search"/>
<input type="reset" value="Reset"/>
<div id="showReturnData"></div>
</form>
';
}
/*__________________________________________________________________*/
/*____________WP Testing Plugin Option_____________*/
//Adding "WP Testing Plugin" Menu To WordPress -> Tools
function wp_testingPlugin() {
// add_management_page( $page_title, $menu_title, $capability, $menu_slug, $function); Menu Under Tools
add_management_page("WP Testing Plugin By Hassan", "WP Testing Plugin", 'activate_plugins', "WP-Testing-Plugin", "wp_testingPlugin_admin");
}
add_action('admin_menu', 'wp_testingPlugin');
/*__________________________________________________________________*/
?>
my_functions.php
<?php
add_action( 'admin_enqueue_scripts', 'my_enqueue' );
function my_enqueue() {
wp_enqueue_script( 'ajax-script', plugin_dir_url( __FILE__ ).'my_javascript.js', array('jquery') );
wp_localize_script( 'ajax-script', 'my_ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}
/****************************************************************************/
// Run Search Function
/****************************************************************************/
/* Register This Function When This File Is Loaded To Call By WordPress AJAX */
add_action('wp_ajax_nopriv_SearchFunction', 'ajaxSearchFunction'); // For Web Visitors
add_action('wp_ajax_SearchFunction', 'ajaxSearchFunction'); // For Admin User
function ajaxSearchFunction(){
if($_POST['WhatToSearch'] == ""){
$WhatToSearch = "Nothing";
} else {
$WhatToSearch = $_POST['WhatToSearch'];
}
echo "<div class='success'>SUCCESS: Function Is Working Perfectly And Getting Data ".$WhatToSearch.".</div>";
}
?>
这里的主要问题是,您首先要“绕过”WordPress。这不是在WP中正确执行AJAX的方式。首先,请求不应该直接发送到插件脚本文件。我建议你从阅读如何真正做到这一点开始-@CBroe我读了很多文章,但到处都是JQuery。你能至少确认一下在纯JavaScript中这是可能的吗?我也尝试过并更新了这个问题。WordPress本身已经使用了jQuery,那么为什么还要做其他事情呢?如果您想在这里使用WordPress,您可能也可以在普通JavaScript中这样做。但你真的不应该。特别是如果这个插件应该在某个时候提供给其他人,也许。谢谢你的支持。请投票帮助其他新手回答这类问题。您应该真正使用nonce
进行验证,以便ajax请求实际上来自您认为它来自的地方。您可能还需要查看wp\u send\u json\u success()
以及用于响应调用者的相关函数。上面提到的另一件事是,假设设置了一个值,例如if($\u POST['WhatToSearch']==“”)
,如果请求中未设置WhatToSearch
,则会抛出警告。