使用 ajax 请求调用 .php 文件 - wordpress答案

【问题标题】：Call .php file with an ajax request - wordpress使用 ajax 请求调用 .php 文件 - wordpress
【发布时间】：2017-12-20 23:49:54
【问题描述】：

我正在尝试从 wordpress 中的 ajax 请求调用 php 文件。我遇到的问题是ajax请求需要php文件的路径。我不确定在我的 wordpress 安装中放置这个 php 文件的位置。此外，这个文件不能被包含在内，因为我只需要在用户决定调用它时调用这个 php 文件。我现在不使用 jquery，但愿意使用它，因为我很确定这只是客户端，因此不必涉及服务器。

作为我想做的一个例子，让我们用一个表单来试试这个。这个例子取自http://thisinterestsme.com/ajax-form-submission-php/。

我会将其包含在网页中。

<html>
    <head>
        <meta charset="UTF-8">
        <title>Example Ajax PHP Form</title>
    </head>
    <body>

        <form id="my_form_id">
            Your Email Address: <input type="text" id="email" /><br>
            <input type="submit" />
        </form>

        <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
        <script>
            $(document).ready(function(){
                $('#my_form_id').on('submit', function(e){
                    //Stop the form from submitting itself to the server.
                    e.preventDefault();
                    var email = $('#email').val();
                    $.ajax({
                        type: "POST",
                        url: 'submission.php',
                        data: {email: email},
                        success: function(data){
                            alert(data);
                        }
                    });
                });
            });
        </script>
    </body>
</html>

然后在服务器的其他地方我会有这个文件。问题是我不知道在哪里放置这个文件或给出上面的 ajax 请求的路径。

<?php
$emailAddress = false;
if(isset($_POST['email'])){
    $emailAddress = $_POST['email'];
}

echo 'Received email was: ' . $emailAddress;
?>

【问题讨论】：

标签： javascript php jquery ajax wordpress

【解决方案1】：

假设你有这个 php:

<?php
 $emailAddress = false;
 if(isset($_POST['email'])){
    $emailAddress = $_POST['email'];
 }

 echo 'Received email was: ' . $emailAddress;
?>

您应该将此文件命名为 page-submission.php 并将其保存在您的 functions.php 所在的位置，然后创建一个空白页面名称“submission”。您现在可以在您的 ajax 中将此文件称为 /submission。

这是视觉层次结构的工作原理：

【讨论】：

如果我想使用多个php文件怎么办？这个方法不管用。
注意标记为 page-$slug.php 的橙色框我想我应该添加到在永久链接设置中设置/使用页面/帖子标题的说明。这是我一直使用的方法，防止我污染functions.php
我对 wordpress 的了解不够，无法进行这些修改。能否进一步说明？
第 4 步的目标是在您的浏览器中看到回显“This is page-example.php”...如果您成功看到，这意味着您可以在 page-example 中放置任何代码.php 并通过 ajax 调用它...。如果该 URL 只是一个示例，则无关紧要...因为您已在示例代码中使用它，所以我使用该 URL 以保持一致性。您可以使用您正在处理的 wordpress 网址。
无论您在浏览器中输入什么网址来访问 page-example.php，您都将在 ajax 上使用该网址。

【解决方案2】：

您可以将 PHP 函数添加到您的 functions.php 文件中，该文件可以通过 ajax 轻松执行：

function post_email_address(WP_REST_Request $request){
  return 'Received email was: ' . $request['email'];
}

add_action('rest_api_init', function(){
  register_rest_route( 'foo/v1', '/postEmail', array(
    'methods' => 'POST',
    'callback' => 'post_email_address',
  ));
});

然后在你的前端：

  $(function(){
    $('#my_form_id').submit(function(e){
      //Stop the form from submitting itself to the server.
      e.preventDefault();
      var email = $('#email').val();
      $.post("/wp-json/foo/v1/postEmail", {
        email: email
      },function(data){
        console.log(data);
      });
    });
  });

"foo" 是命名空间，您可以使用与您的应用更相关的名称。

【讨论】：

我仍然无法触发脚本。我完全按照您所说的使用 php（还修复了最后一行中的语法错误），并将 ajax 放在前端的脚本标签中并留下了表单。当我点击提交时，页面重新加载并且没有任何反应。
您确定您的document.ready 函数正在运行吗？ IE。您可以从那里登录到控制台并查看它吗？可以尝试将$(document).ready(function(){ 更改为$(function(){。您还可以从onSubmit 函数登录并在页面重新加载之前查看它吗？
对不起，我正在尝试一切，但我也无法让它工作。如果可以的话会更新
@frillybob 查看编辑！我测试并有这个工作！我使用了 WP rest API 的文档：developer.wordpress.org/rest-api
我在表单的提交功能中有它