wordpress插件页面中的Jquery Ajax调用不起作用


Jquery Ajax call in wordpress plugin page not working

在wordpress中,我创建了一个插件,它有以下文件

统计访问者

<?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

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('&nbsp;').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);
                }); 

            });

但是当我在wordpressadmin中运行该文件时,它显示admin.php的内部服务器错误?page=访问者_stat/stats-operations.php/blog/wp-admin,它不加载ajax页面

我试了好几次,都找不到解决办法。我认为这个问题可能有正确的解决方案。任何人都可以帮我解决这个问题。

很明显,ajax函数URL:POST不起作用。感谢提前解决这个问题

WordPress环境

首先,为了完成这项任务,建议注册一个jQuery脚本,然后将其排入队列,该脚本将把请求推送到服务器。这些操作将挂接在wp_enqueue_scripts操作挂接中。在同一个钩子中,您应该放置用于包含任意Javascript的wp_localize_script。通过这种方式,将在前端提供一个JS对象。这个对象带有jQuery句柄要使用的正确url。

请查看:

  1. wp_register_script();函数
  2. wp_enque_scripts挂钩
  3. wp_enque_script();函数
  4. wp_localize_script();函数

将这些函数添加到插件文件中。

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调用。

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调用触发的函数。记住后缀:

  1. wp_ajax(只允许注册用户或管理面板操作使用该函数)
  2. wp_ajax_nopriv(允许无权限用户使用该函数)

这些后缀加上动作组成了你的动作名称:

wp_ajax_myactionwp_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
}

希望它能有所帮助!

如果有什么不清楚的地方,请告诉我。