调用JS文件和Ajax

编程问答 2022-06-13

问题描述

尽管尝试了我能想到的一切，但我似乎无法调用正确的JS文件位置。以下是从我所知道的所有东西中应该找到“ myjsfile.js”（用stackoverflow替换名称）的方式

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('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 echo目录尝试： $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',true );
    wp_localize_script('waitlist_update_call',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之后要调用的函数。

directorydirectoryhtmlsubdirectory