javascript - WordPress ajax 和额外的 php 脚本

Question

我正在为我的 WordPress 网站构建一个简单的表单，但我似乎无法弄清楚我做错了什么。我正在使用 ajax 从通用 function.php 脚本(我称之为 wpplugin.php)调用一个单独的 php 脚本来处理我的所有表单数据，但我似乎无法弄清楚我的 javascript 文件或 ajax 的 url 是否不是触发。

所以我有 3 个文件，我有/wpplugin.php 和/upload.php 以及/code/upload.js。

要添加 js 文件，我在 wpplugin.php 中使用以下代码:

add_action( 'wp_enqueue_scripts', 'all_enqueue_scripts' );
function all_enqueue_scripts()  
{
     wp_enqueue_script( 'uploadjs', plugins_url( '/code/upload.js', __FILE__), array('jquery'), '1.0', true );
}

我的 js 脚本中的 ajax 如下:

$("#uploadform").on('submit',(function(e) {
    e.preventDefault();
    $.ajax({
        url: "upload.php", 
        type: "POST",       
        data: new FormData(this), 
        contentType: false,      
        cache: false,           
        processData:false,      
        success: function(data)   
        {
            arr = data;
        }
    });
}));

我将 js 脚本包含在 wpplugin.php 的 n html block 中，如下所示:

<script src="code/upload.js">

来自 wordpress 的反馈非常有限，我无法判断是我的 ajax 没有触发还是 js 没有被使用。我已经测试了 xxamp 和通用硬编码 html 在线站点中的所有代码，它有效。

欢迎任何建议。

Answer 1

脚本加载问题是因为您在 functions.php 文件中使用 plugins_url()。

来自 plugins_url() 的文档:

Retrieves the absolute URL to the plugins or mu-plugins directory (without the trailing slash) or, when using the $path argument, to a specific file under that directory.

Source: https://codex.wordpress.org/Function_Reference/plugins_url

假设您的主题目录如下所示:

|- style.css
|- index.php
|- functions.php
|- code
    |- upload.js

您要做的是编辑 functions.php 文件并替换:

wp_enqueue_script( 'uploadjs', plugins_url( '/code/upload.js', __FILE__), array('jquery'), '1.0', true );

与

wp_enqueue_script( 'uploadjs', get_template_directory() . '/code/upload.js', array('jquery'), '1.0', true );

编辑:关于 upload.php

WordPress 已经拥有一个内置系统，可以为每个主题和插件使用单个 ajax 端点。

端点地址是 admin_url( 'admin-ajax.php' ) 的返回值，实际上通常是 mydomain.com/wp-admin/admin- ajax.php.

由于每个主题和插件都使用相同的端点，您如何区分您的调用与其他调用？

您发送的有一个特殊属性，称为action。它可以让 WordPress 知道谁在访问 admin-ajax.php。

所有信息都在这里:https://codex.wordpress.org/AJAX_in_Plugins

它的外观的快速示例如下:

JS

$("#uploadform").on('submit',(function(e) {
    e.preventDefault();
    $.ajax({
        url: "wp-admin/admin-ajax.php?action=akamaozu_do_frontend_upload", 
        type: "POST",       
        data: new FormData(this)
    });
}));

functions.php

add_action( 'wp_ajax_akamaozu_do_frontend_upload', 'handle_signed_in_uploads' );
add_action( 'wp_ajax_nopriv_akamaozu_do_frontend_upload', 'handle_signed_out_uploads' );