调用 JS 文件时的目录结构问题 Ajax
Directory structure issue when calling a JS file and Ajax
尽管尝试了所有我能想到的方法,但我似乎无法调用正确的 JS 文件位置。下面是从我所知道的一切中找到“myjsfile.js”(Whosebug 的名称替换)
的方式
function my_scripts() {
wp_enqueue_script( 'myscript', get_theme_file_uri( '/assets/js/myjsfile.js' ), array('jquery'), null, true );
wp_localize_script('myscript', 'my_ajax', array('ajax_url' => admin_url('admin-ajax.php')));
}
add_action('wp_enqueue_scripts', 'my_scripts');
我要调用的文件位于:
https://mywebsite.com/wp-content/themes/"mytheme"/assets/js
以上PHP脚本位于:
https://mywebsite.com/wp-content/themes/"mytheme"
我试过:
'/assets/js/myjsfile.js'
'../assets/js/myjsfile.js'
'../../assets/js/myjsfile.js'
'"mytheme"/assets/js/myjsfile.js'
'themes/"mytheme"/assets/js/myjsfile.js'
'../themes/"mytheme"/assets/js/myjsfile.js'
'../../themes/"mytheme"/assets/js/myjsfile.js'
'wp-content/themes/"mytheme"/assets/js/myjsfile.js'
'/wp-content/themes/"mytheme"/assets/js/myjsfile.js'
'../wp-content/themes/"mytheme"/assets/js/myjsfile.js'
https://mywebsite.com/wp-content/themes/"mytheme"/assets/js/myjsfile.js
都没有运气。默认情况下 '/assets/js/myjsfile.js'
不调用 JS 文件,而是调用 /wp-admin/admin-ajax.php
。上面的其他示例都调用了 https://mywebsite.com/wp-content/themes/"mytheme"/themes/"mytheme"/assets/js
的某个版本,并简单地将我放在 /assets/js/myjsfile.js
前面的任何内容添加到正确的目录结构中。它加倍了。谁能指出我这里哪里出了问题?
编辑 1
我也试过:
function my_scripts() {
wp_enqueue_script( 'myscript', ( get_theme_file_uri() ).'/assets/js/myjsfile.js', array('jquery'), null, true );
wp_localize_script('myscript', 'my_ajax', array('ajax_url' => admin_url('admin-ajax.php')));
}
echo getcwd(); shows me in the public directory /home/domains/mywebsite.com/public_html
编辑 2
在此处添加 Ajax 代码以及 PHP 目录 ECHO 尝试及其结果
AJAX
文件名为 - "myjsfile.js"
// JavaScript Document
jQuery.ajax({
type: 'post',
url: my_ajax.ajax_url,
action: 'waitlist_update',
success: function(data){
// callback function
}
});
PHP 回显目录尝试:
$path = $_SERVER['DOCUMENT_ROOT']; echo $path;
显示 - /home/food/domains/mysite.com/private_html
but echo getcwd();
显示 /home/food/domains/mysite.com/public_html
编辑 3
更新 AJAX 并添加完整代码:
jQuery.ajax({
type: 'post',
url: ajax_url,
// add your action inside data object
data: {
action: 'waitlist_update'
},
success: function(data){
// callback function
}
});
PHP代码
function my_scripts() {
wp_enqueue_script( 'waitlist_update_call', get_template_directory_uri().'/assets/js/waitlist_update_call.js', array('jquery'), null, true );
wp_localize_script('waitlist_update_call', 'my_ajax', array('ajax_url' => admin_url('admin-ajax.php')));
//calls Waitinglist data and creates table
}
add_action('wp_enqueue_scripts', 'my_scripts');
add_action('wp_ajax_waitlist_update', 'waitlist_update'); // logged in user can make a call
function waitlist_update() {
global $wpdb;
$results = $wpdb->query( $wpdb->prepare("UPDATE 'my_table' SET `currentstatus` =
'myupdate1' WHERE wdt_ID = '1'"));
die($results);
}
HTML
去吧!
在 html 文档的头部指定文件的完整路径会更容易,例如;
https://mywebsite.com/wp-content/themes/"mytheme"/assets/js/myjsfile.js
或者在 PHP 中设置一个等于您站点的文档根目录加上指向文件最终位置的文件夹的路径;
// Check the correct folder your script is located in
$path = $_SERVER['DOCUMENT_ROOT']."/wp-content/themes/"mytheme"/assets/js/";
现在将您的 js 文件包含在 HTML
<script src='<?php $path."myjsfile.js"; ?>'></script>
如果您查看我的旧答案,我也已经为您解决了这个问题。
正确方法:
wp_enqueue_script('myscript', get_template_directory_uri() . '/assets/js/myjsfile.js', array('jquery'), false, true);
使用 get_template_directory_uri()
获取活动主题的正确 URI,以便它指向您的主题的根目录。
https://mywebsite.com/wp-content/themes/mytheme
如果您使用的是 子主题,请使用 get_stylesheet_directory_uri()
。
更新:
// JavaScript Document
jQuery.ajax({
type: 'post',
url: my_ajax.ajax_url,
// add your action inside data object
data: {
action: 'waitlist_update'
},
success: function(data){
// callback function
}
});
PHP
add_action('wp_ajax_waitlist_update', 'update_function');
function update_function() {
global $wpdb;
$results = $wpdb->query( $wpdb->prepare("UPDATE 'my_table' SET `currentstatus` = 'myupdate1' WHERE wdt_ID = '1'"));
die($results);
}
wp_ajax_waitlist_update
waitlist_update
是 ajax 将从您的 JavaScript 触发的操作。 update_function
是触发 Ajax 后调用的函数。
尽管尝试了所有我能想到的方法,但我似乎无法调用正确的 JS 文件位置。下面是从我所知道的一切中找到“myjsfile.js”(Whosebug 的名称替换)
的方式function my_scripts() {
wp_enqueue_script( 'myscript', get_theme_file_uri( '/assets/js/myjsfile.js' ), array('jquery'), null, true );
wp_localize_script('myscript', 'my_ajax', array('ajax_url' => admin_url('admin-ajax.php')));
}
add_action('wp_enqueue_scripts', 'my_scripts');
我要调用的文件位于:
https://mywebsite.com/wp-content/themes/"mytheme"/assets/js
以上PHP脚本位于:
https://mywebsite.com/wp-content/themes/"mytheme"
我试过:
'/assets/js/myjsfile.js'
'../assets/js/myjsfile.js'
'../../assets/js/myjsfile.js'
'"mytheme"/assets/js/myjsfile.js'
'themes/"mytheme"/assets/js/myjsfile.js'
'../themes/"mytheme"/assets/js/myjsfile.js'
'../../themes/"mytheme"/assets/js/myjsfile.js'
'wp-content/themes/"mytheme"/assets/js/myjsfile.js'
'/wp-content/themes/"mytheme"/assets/js/myjsfile.js'
'../wp-content/themes/"mytheme"/assets/js/myjsfile.js'
https://mywebsite.com/wp-content/themes/"mytheme"/assets/js/myjsfile.js
都没有运气。默认情况下 '/assets/js/myjsfile.js'
不调用 JS 文件,而是调用 /wp-admin/admin-ajax.php
。上面的其他示例都调用了 https://mywebsite.com/wp-content/themes/"mytheme"/themes/"mytheme"/assets/js
的某个版本,并简单地将我放在 /assets/js/myjsfile.js
前面的任何内容添加到正确的目录结构中。它加倍了。谁能指出我这里哪里出了问题?
编辑 1 我也试过:
function my_scripts() {
wp_enqueue_script( 'myscript', ( get_theme_file_uri() ).'/assets/js/myjsfile.js', array('jquery'), null, true );
wp_localize_script('myscript', 'my_ajax', array('ajax_url' => admin_url('admin-ajax.php')));
}
echo getcwd(); shows me in the public directory /home/domains/mywebsite.com/public_html
编辑 2
在此处添加 Ajax 代码以及 PHP 目录 ECHO 尝试及其结果
AJAX
文件名为 - "myjsfile.js"
// JavaScript Document
jQuery.ajax({
type: 'post',
url: my_ajax.ajax_url,
action: 'waitlist_update',
success: function(data){
// callback function
}
});
PHP 回显目录尝试:
$path = $_SERVER['DOCUMENT_ROOT']; echo $path;
显示 - /home/food/domains/mysite.com/private_html
but echo getcwd();
显示 /home/food/domains/mysite.com/public_html
编辑 3 更新 AJAX 并添加完整代码:
jQuery.ajax({
type: 'post',
url: ajax_url,
// add your action inside data object
data: {
action: 'waitlist_update'
},
success: function(data){
// callback function
}
});
PHP代码
function my_scripts() {
wp_enqueue_script( 'waitlist_update_call', get_template_directory_uri().'/assets/js/waitlist_update_call.js', array('jquery'), null, true );
wp_localize_script('waitlist_update_call', 'my_ajax', array('ajax_url' => admin_url('admin-ajax.php')));
//calls Waitinglist data and creates table
}
add_action('wp_enqueue_scripts', 'my_scripts');
add_action('wp_ajax_waitlist_update', 'waitlist_update'); // logged in user can make a call
function waitlist_update() {
global $wpdb;
$results = $wpdb->query( $wpdb->prepare("UPDATE 'my_table' SET `currentstatus` =
'myupdate1' WHERE wdt_ID = '1'"));
die($results);
}
HTML 去吧!
在 html 文档的头部指定文件的完整路径会更容易,例如;
https://mywebsite.com/wp-content/themes/"mytheme"/assets/js/myjsfile.js
或者在 PHP 中设置一个等于您站点的文档根目录加上指向文件最终位置的文件夹的路径;
// Check the correct folder your script is located in
$path = $_SERVER['DOCUMENT_ROOT']."/wp-content/themes/"mytheme"/assets/js/";
现在将您的 js 文件包含在 HTML
<script src='<?php $path."myjsfile.js"; ?>'></script>
如果您查看我的旧答案,我也已经为您解决了这个问题。
正确方法:
wp_enqueue_script('myscript', get_template_directory_uri() . '/assets/js/myjsfile.js', array('jquery'), false, true);
使用 get_template_directory_uri()
获取活动主题的正确 URI,以便它指向您的主题的根目录。
https://mywebsite.com/wp-content/themes/mytheme
如果您使用的是 子主题,请使用 get_stylesheet_directory_uri()
。
更新:
// JavaScript Document
jQuery.ajax({
type: 'post',
url: my_ajax.ajax_url,
// add your action inside data object
data: {
action: 'waitlist_update'
},
success: function(data){
// callback function
}
});
PHP
add_action('wp_ajax_waitlist_update', 'update_function');
function update_function() {
global $wpdb;
$results = $wpdb->query( $wpdb->prepare("UPDATE 'my_table' SET `currentstatus` = 'myupdate1' WHERE wdt_ID = '1'"));
die($results);
}
wp_ajax_waitlist_update
waitlist_update
是 ajax 将从您的 JavaScript 触发的操作。 update_function
是触发 Ajax 后调用的函数。