我是 AJAX 新手，似乎我可能遺漏了一個非常基本的細節。如果我在不使用 Wordpress 的情況下在本地執行此操作，則它可以正常作業。我給你發鏈接：
但是如果我用 Wordpress 創建一個函式，它就會出現：
未捕獲的語法錯誤：JSON.parse 中位置 0 處的 JSON 中的意外標記 <
這是我的代碼：
add_action( 'wp_head', 'conta_visite');
function conta_visite(){
$dir = get_stylesheet_directory() . "/users";
if (!file_exists($dir)) {
wp_mkdir_p( $dir );
}
if(isset($_POST['getCustomerCount']))
{
$dbfile = get_stylesheet_directory() . "/visitors.db"; // path to data file
$expire = 3; // average time in seconds to consider someone online before removing from the list
if(!file_exists($dbfile)) {
echo json_encode(['success'=> false,'error_message'=>"Error: Data file " . $dbfile . " NOT FOUND!"]);
die();
//die("Error: Data file " . $dbfile . " NOT FOUND!");
}
if(!is_writable($dbfile)) {
echo json_encode(['success'=> false,'error_message'=>"Error: Data file " . $dbfile . " is NOT writable! Please CHMOD it to 666!"]);
die();
//die("Error: Data file " . $dbfile . " is NOT writable! Please CHMOD it to 666!");
}
$count = CountVisitors($dbfile, $expire);
if(is_numeric($count)){
$out = $count; // format the result to display 3 digits with leading 0's
echo json_encode(['success'=>'true', 'customer_count'=>$out]);
}
else
{
echo json_encode(['success'=> false, 'error_message'=>"count is not numeric"]);
}
}
else{
echo $dbfile;
echo json_encode($_POST);
}
function CountVisitors() {
global $dbfile, $expire;
$cur_ip = getIP();
$cur_time = time();
$dbary_new = array();
$dbary = json_decode(file_get_contents($dbfile),true);
if(is_array($dbary)) {
foreach($dbary as $user_ip => $user_time){
if(($user_ip != $cur_ip) && (($user_time $expire) > $cur_time)) {
$dbary_new[$user_ip] = $user_time;
}
}
}
$dbary_new[$cur_ip] = $cur_time; // add record for current user
$fp = fopen($dbfile, "w");
fputs($fp, json_encode($dbary_new));
fclose($fp);
return count($dbary_new);
}
function getIP() {
if(isset($_SERVER['HTTP_X_FORWARDED_FOR']))
{
$ip = $_SERVER['HTTP_X_FORWARDED_FOR'];
}
elseif(isset($_SERVER['REMOTE_ADDR'])) {
$ip = $_SERVER['REMOTE_ADDR'];
}
else
{
$ip = "0.0.0.0";
}
return $ip;
}
?>
<p id="customer_count">Customers Online: <span></span></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
function updateCustomerCount() {
$.ajax({
type: "POST",
cache: false,
data: {getCustomerCount: true},
success: function(response) {
var data = JSON.parse(response);
//var data = response;
console.log(response);
if (data.success) {
$("#customer_count span").text(data.customer_count);
} else {
console.log(data.error_message);
}
},
error: function(response, request, status, error) {
console.log(error);
}
});
setTimeout(updateCustomerCount, 2000);
}
updateCustomerCount();
</script>
<?php
}
這是 Wordpress 中的 Demo 鏈接：您可以在標題的右上角找到計數器。
你能幫助我嗎？因為我快瘋了，我不知道我哪里錯了......
uj5u.com熱心網友回復：
好的，所以這應該可以滿足您的要求。我已經重寫了您的代碼以獲得更好的 WordPress 集成。
首先，您需要創建一個新的 javascript 檔案名visitor-counter.js并將其放置js在主題目錄中的檔案夾中。這將用于我們的 jQuery 和 ajax 請求。
/js/visitor-counter.js
( function( $ ) {
window.VisitorCounter = window?.VisitorCounter || {
/**
* @type {object} Temp storage object
*/
_temp: {},
/**
* Get a PHP variable.
*
* @param varName
* @returns {*}
*/
getVar( varName ) {
const vars = window?.VisitorCounterVars;
return vars?.[ varName ];
},
/**
* Make ajax request to server, store response in temp object.
*
* @returns {Promise<unknown>}
*/
request() {
return new Promise( ( accept, reject ) => {
const url = this.getVar( 'ajaxUrl' );
const action = this.getVar( 'ajaxAction' );
if ( url && action ) {
$.ajax( {
url: url,
data: {
action: action
},
cache: false
} ).then( response => {
this._temp.count = response.data;
accept( response );
} );
} else {
reject( 'Visitor counter ajax url or action not available.' );
}
} );
},
/**
* Get the count value.
*
* @returns {number}
*/
getCount() {
return parseInt( this._temp?.count || 0 );
},
/**
* Refresh data continuously.
*
* @param {callback} callback
* @param {number} timeout
*/
refresh( callback, timeout ) {
this._temp.lastRefreshed = Date.now();
this.request().then( () => {
const now = Date.now();
callback.apply( this );
const timeoutDiff = now - this._temp.lastRefreshed;
// If request took longer than timeout, run next refresh instantly.
if ( timeout && timeoutDiff >= timeout ) {
this.refresh( callback, timeout );
}
// Request was quicker than timeout, queue next refresh call.
else {
setTimeout( () => {
this.refresh( callback, timeout );
}, timeout - timeoutDiff );
}
} );
}
};
// Initiate refresh loop
VisitorCounter.refresh( function() {
$( '#customer_count span' ).text( VisitorCounter.getCount() );
}, 2000 );
} )( jQuery );
接下來將以下內容添加到您的主題 functions.php 檔案中...
/functions.php
class VisitorCounter {
private static $instance;
/**
* @var string $file Relative path to the tracking file.
*/
public $file = '/users/visitors.db';
/**
* @var int $expires Automatically expire vistor after X amount of seconds.
*/
public $expires = 3;
/**
* @return $this
*/
public static function init() {
if ( !static::$instance ) {
static::$instance = new static( ...func_get_args() );
}
return static::$instance;
}
/**
* Get the full database file path and create file if not exists.
*
* @return string|false
*/
public function getPath() {
$path = get_stylesheet_directory() . '/' . ltrim( $this->file, '/' );
$exists = file_exists( $path );
if ( !$exists ) {
wp_mkdir_p( dirname( $path ) );
$exists = touch( $path );
}
return $exists ? $path : false;
}
/**
* Read the contents of the visitors database file as a JSON.
*
* @return array
*/
public function getData() {
if ( $path = $this->getPath() ) {
if ( $contents = file_get_contents( $path ) ) {
if ( $json = @json_decode( $contents, true ) ) {
return $this->cleanData( $json );
}
}
}
return [];
}
/**
* Clean the visitor data by removing expired entries.
*
* @param array $input
* @return array
*/
private function cleanData( array $input ) {
$now = time();
foreach ( $input as $ip => $timestamp ) {
if ( $timestamp $this->expires < $now ) {
unset( $input[ $ip ] );
}
}
return $input;
}
/**
* Add visitor count data.
*
* @param string $ip
* @param int $timestamp
* @return array
*/
public function logUser() {
// Get current data.
$data = $this->getData();
// Add new entry.
if ( $ip = $this->getUserIp() ) {
$data[ $ip ] = time();
}
// Clean data before saving.
$data = $this->cleanData( $data );
// Encode and save data.
file_put_contents( $this->getPath(), wp_json_encode( $data ) );
// Return data.
return $data;
}
/**
* Get the current users IP address.
*
* @return string|null
*/
public function getUserIp() {
// In order of preference, with the best ones for this purpose first.
$address_headers = [
'HTTP_CLIENT_IP',
'HTTP_X_FORWARDED_FOR',
'HTTP_X_FORWARDED',
'HTTP_X_CLUSTER_CLIENT_IP',
'HTTP_FORWARDED_FOR',
'HTTP_FORWARDED',
'REMOTE_ADDR'
];
$client_ip = null;
foreach ( $address_headers as $header ) {
if ( !empty( $_SERVER[ $header ] ) ) {
/*
* HTTP_X_FORWARDED_FOR can contain a chain of comma-separated
* addresses. The first one is the original client. It can't be
* trusted for authenticity, but we don't need to for this purpose.
*/
$address_chain = explode( ',', $_SERVER[ $header ] );
$client_ip = trim( $address_chain[ 0 ] );
break;
}
}
return $client_ip;
}
}
/**
* Helper function for visitor counter class.
*
* @return VisitorCounter
*/
function visitor_counter() {
return VisitorCounter::init();
}
/**
* Register an ajax request handler.
*/
add_action( 'wp_ajax_active_visitor', 'handle_visitor_activity' );
add_action( 'wp_ajax_nopriv_active_visitor', 'handle_visitor_activity' );
function handle_visitor_activity() {
$controller = visitor_counter();
$controller->logUser();
wp_send_json_success( count( $controller->getData() ) );
}
/**
* Load our javascript file on the frontend data.
*/
add_action( 'wp_enqueue_scripts', function() {
// Load the counter javascript file after `jquery` in the footer.
wp_enqueue_script( 'visitor-counter', get_template_directory_uri() . '/js/visitor-counter.js', [ 'jquery' ], '1.0.0', true );
// Load php data that can be accessed in javascript.
wp_localize_script( 'visitor-counter', 'VisitorCounterVars', [
'ajaxUrl' => admin_url( 'admin-ajax.php' ),
'ajaxAction' => 'active_visitor'
] );
} );
要查找的東西...
WordPress ajax 處理程式（add_action( 'wp_ajax_' )和add_action( 'wp_ajax_nopriv_' )）檔案可以在這里找到：
- https://developer.wordpress.org/plugins/javascript/ajax/
- https://developer.wordpress.org/reference/hooks/wp_ajax_action/
- https://developer.wordpress.org/reference/hooks/wp_ajax_nopriv__requestaction/
WordPress JSON 回應wp_send_json_error()和wp_send_json_success()：
- https://developer.wordpress.org/reference/functions/wp_send_json_error/
- https://developer.wordpress.org/reference/functions/wp_send_json_success/
在前端加載 javascript：
- https://developer.wordpress.org/reference/hooks/wp_enqueue_scripts/
- https://developer.wordpress.org/reference/functions/wp_enqueue_script/
- https://developer.wordpress.org/reference/functions/wp_localize_script/
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/484600.html
標籤：php jQuery json 阿贾克斯 WordPress