WordPress插件页面中的jQuery Ajax调用不起作用 [英] Jquery Ajax call in wordpress plugin page not working
问题描述
在wordpress中，我创建了一个包含以下文件的插件
In wordpress I created a plugin which has the following files
统计访问者
<?php
/*
Plugin Name: Wp Visitor Statistics
Plugin URI:
Description: Statistics about Visitors
Author:
Version: 1.0.1
Author URI:
*/
ob_start();
define('STATISTICS_FOLDER', dirname(plugin_basename(__FILE__)));
//CREATING MENU PAGES IN SIDEBAR
add_action('admin_menu','statistics_admin_menu');
function statistics_admin_menu() {
$icon_url=get_option('siteurl').'/wp-content/plugins/'.STATISTICS_FOLDER."/lea.png";
add_menu_page("Statistics","Statistics",10,__FILE__,"Settings",$icon_url);
add_submenu_page(__FILE__,"Stat Report","Statistics Report",10,"visitor_stat/statreport.php");
}
function Settings()
{
$plugindir = get_option('siteurl').'/wp-content/plugins/'.STATISTICS_FOLDER.'/';
echo "<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'/></script>\n";
echo "<br/>";
echo "<script type='text/javascript' src='$plugindir/calendar/myfuncvisit.js'/></script>\n";
echo "<br/>";
echo "<script type='text/javascript' src='$plugindir/calendar/jquery.datepick.js'/></script>\n";
echo "<br/>";
echo "<link rel='stylesheet' href='$plugindir/calendar/jquery.datepick.css' type='text/css' />\n";
echo "<br/>";
echo "<script type='text/javascript'>
$(function() {
$('#popupDatepicker').datepick({dateFormat: 'yyyy-mm-dd'});
});
</script>";
echo "<br/>";
echo "<div class='wrap'>
<form action='' name='frm1'>
<strong>Todays Visit : <span id='todays_visit'> </span> | Overall Visit :<span id='overall_visit'></span> ( Original Data )<br /></strong><br />
Todays Visit plus : <input type='text' name='todays_visit_plus' id='todays_visit_plus' value=''/><br /><br />
Overall Visit plus : <input type='text' name='overall_visit_plus' id='overall_visit_plus' value=''/><br /><br />
Overall Visit Start Date : <input type='text' class='overall_visit_startdate' id='popupDatepicker'><br /><br />
<div id='msg_save'></div>
<input type='button' name='save' id='save' value='save'/>
</form>
</div>";
}
?>
然后将其称为另一个文件js
Then it call the another file js
myfuncvisit.js
myfuncvisit.js
// JavaScript Document
$(document).ready(function(){
// loading image displaying function
function loading_show(divid){
$('#'+divid).html("<div class='item' style='padding:45% 0;text-align:center;font-size:11px;color:#666666;'><center><img width='16' height='16' src='loading.gif'><br>Loading</center></div>").fadeIn('swing');
}
// function to show the feed list
function loadData(){
$.ajax
({
type: "POST",
//url: "blog/wp-content/plugins/visitor_stat/stats-operations.php",
url: "/blog/wp-admin/admin.php?page=visitor_stat/stats-operations.php",
data: "type=all",
success: function(msg)
{
alert(msg);
part = msg.split('#');
$("#todays_visit").ajaxComplete(function(event, request, settings)
{
$("#todays_visit").html(part[0]);
});
$("#overall_visit").ajaxComplete(function(event, request, settings)
{
$("#overall_visit").html(part[1]);
});
$("#todays_visit_plus").ajaxComplete(function(event, request, settings)
{
$("#todays_visit_plus").val(part[2]);
});
$("#overall_visit_plus").ajaxComplete(function(event, request, settings)
{
$("#overall_visit_plus").val(part[3]);
});
$("#popupDatepicker").ajaxComplete(function(event, request, settings)
{
$("#popupDatepicker").val(part[4]);
});
}
});
}
function saveData(){
$.ajax
({
type: "POST",
url: "/blog/wp-admin/admin.php?page=visitor_stat/stats-operations.php",
//url: "blog/wp-content/plugins/visitor_stat/stats-operations.php",
data: "type=save&d1="+d1+"&d2="+d2+"&d3="+d3,
success: function(msg)
{
alert(msg);
loadData();
$("#msg_save").ajaxComplete(function(event, request, settings)
{
$("#msg_save").html(msg);
setTimeout('',10000);
$("#msg_save").html(' ').fadeIn('swing');
});
}
});
}
loadData(); // For first time page load default results
$('#save').live('click',function(){
d1=$('#todays_visit_plus').val();
d2=$('#overall_visit_plus').val();
d3=$('#popupDatepicker').val();
saveData(d1,d2,d3);
});
});
但是当我在wordpress admin中运行文件时，它显示admin.php的内部服务器错误?page = visitor_stat/stats-operations.php /blog/wp-admin并且不会加载ajax页面
But when I run the file in wordpress admin it shows the internal server error for admin.php?page=visitor_stat/stats-operations.php /blog/wp-admin and it doesn't load the ajax page
我尝试了几次，但找不到解决方案.我认为这个问题可能有正确的解决方案.任何人都可以帮助我解决这个问题.
I tried for several time and I can't find the solution. I think this issue may have correct solution. Anybody can help me to solve this issue.
很明显，ajax函数URL:POST无法正常工作.预先感谢您解决此问题
Clearly, the ajax function URL : POST is not working. Thanks in advance to solve this problem
推荐答案
WordPress环境
首先，为了完成此任务，建议先注册然后加入一个jQuery脚本，该脚本会将请求推送到服务器.这些操作将被钩在wp_enqueue_scripts动作钩子中.在同一钩子中，应放入wp_localize_script，它用来包含任意Javascript.通过这种方式，前端将提供一个JS对象.该对象进行正确的URL，以供jQuery句柄使用.
First of all, in order to achieve this task, it's recommended to register then enqueue a jQuery script that will push the request to the server. These operations will be hooked in wp_enqueue_scripts action hook. In the same hook you should put wp_localize_script that it's used to include arbitrary Javascript. By this way there will be a JS object available in front end. This object carries on the correct url to be used by the jQuery handle.
请看一下:
- wp_register_script(); function
- wp_enqueue_scripts hook
- wp_enqueue_script(); function
- wp_localize_script(); function
将这些功能添加到插件文件中.
add these functions to plugin file.
add_action( 'wp_enqueue_scripts', 'so_enqueue_scripts' );
function so_enqueue_scripts(){
wp_register_script( 'ajaxHandle', get_template_directory_uri() . 'PATH TO YOUR SCRIPT FILE', array(), false, true );
wp_enqueue_script( 'ajaxHandle' );
wp_localize_script( 'ajaxHandle', 'ajax_object', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}
文件:jquery.ajax.js
此文件进行ajax调用.
This file makes the ajax call.
jQuery(document).ready( function($){
//Some event will trigger the ajax call, you can push whatever data to the server, simply passing it to the "data" object in ajax call
$.ajax({
url: ajax_object.ajaxurl, // this is the object instantiated in wp_localize_script function
type: 'POST',
action: 'myaction' // this is the function in your functions.php that will be triggered
data:{
name: 'John',
age: '38'
},
success: function( data ){
//Do something with the result from server
console.log( data );
}
});
});
最后，在您的插件文件中，应该有您的ajax调用触发的功能. 记住后缀:
Finally on your plugin file there should be the function triggered by your ajax call. Remember the suffixes:
- wp_ajax(仅允许已注册用户或管理面板操作使用此功能)
- wp_ajax_nopriv(允许无特权用户使用此功能)
这些后缀加上操作组成您的操作的名称:
These suffixes plus the action compose the name of your action:
wp_ajax_myaction或wp_ajax_nopriv_myaction
add_action( 'wp_ajax_myaction', 'so_wp_ajax_function' );
add_action( 'wp_ajax_nopriv_myaction' 'so_wp_ajax_function' );
function so_wp_ajax_function(){
//DO whatever you want with data posted
//To send back a response you have to echo the result!
echo $_POST['name'];
echo $_POST['age'];
wp_die(); // ajax call must die to avoid trailing 0 in your response
}
希望有帮助！
让我知道是否不清楚.
这篇关于WordPress插件页面中的jQuery Ajax调用不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
