2013-09-04 12:47
浏览 95

在wordpress插件页面中调用Jquery Ajax无法正常工作

In wordpress I created a plugin which has the following files

Statistics visitor

Plugin Name: Wp Visitor Statistics
Plugin URI: 
Description: Statistics about Visitors
Version: 1.0.1
Author URI:

define('STATISTICS_FOLDER', dirname(plugin_basename(__FILE__)));


    function statistics_admin_menu() { 
        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>
    echo "<br/>";
    echo "<script type='text/javascript' src='$plugindir/calendar/myfuncvisit.js'/></script>
    echo "<br/>";
    echo "<script type='text/javascript' src='$plugindir/calendar/jquery.datepick.js'/></script>
    echo "<br/>";
    echo "<link rel='stylesheet' href='$plugindir/calendar/jquery.datepick.css' type='text/css' />
    echo "<br/>";
echo "<script type='text/javascript'>
$(function() {
    $('#popupDatepicker').datepick({dateFormat: 'yyyy-mm-dd'});
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'/>


Then it call the another file js


// JavaScript Document

                // 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(){   
                        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)
                            part = msg.split('#');
                            $("#todays_visit").ajaxComplete(function(event, request, settings)
                            $("#overall_visit").ajaxComplete(function(event, request, settings)
                            $("#todays_visit_plus").ajaxComplete(function(event, request, settings)

                            $("#overall_visit_plus").ajaxComplete(function(event, request, settings)
                            $("#popupDatepicker").ajaxComplete(function(event, request, settings)



                function saveData(){
                        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)
                            $("#msg_save").ajaxComplete(function(event, request, settings)




                loadData();  // For first time page load default results




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.

Clearly, the ajax function URL : POST is not working. Thanks in advance to solve this problem

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • douzi1986 2013-09-04 13:08

    WordPress environment

    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.

    Please take a look to:

    1. wp_register_script(); function
    2. wp_enqueue_scripts hook
    3. wp_enqueue_script(); function
    4. 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' ) ) );

    File: jquery.ajax.js

    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
        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
          name: 'John',
          age: '38'
        success: function( data ){
          //Do something with the result from server
          console.log( data );

    Finally on your plugin file there should be the function triggered by your ajax call. Remember the suffixes:

    1. wp_ajax ( allow the function only for registered users or admin panel operations )
    2. wp_ajax_nopriv ( allow the function for no privilege users )

    These suffixes plus the action compose the name of your action:

    wp_ajax_myaction or 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

    Hope it helps!

    Let me know if something is not clear.

    解决 无用
    打赏 举报

相关推荐 更多相似问题