如何使用 jQuery ajax 从另一个文件调用 PHP 代码？答案

【问题标题】：How do I call PHP code from another file with jQuery ajax?如何使用 jQuery ajax 从另一个文件调用 PHP 代码？
【发布时间】：2022-01-26 23:59:14
【问题描述】：

这是我的index.php：

<!DOCTYPE html>
<html lang="en" >
    <head>
        <title>Cassette Decks</title>
        <link rel="stylesheet" href="css/styles.css">
        <meta charset="UTF-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="js/scripts.js" ></script>
        <script>
        </script>
    </head>
    <body>
    <form role="form" id="attributes" name='attributes' class="cassette_deck_table" >
        <table id="cassette_deck_params" >
            <tr>
                <td colspan='8' >
                    <label for='type3' >Type III</label><input type='checkbox' name='type3' id='type3' value='type3' />
                    <label for='type4' >Type IV</label><input type='checkbox' name='type4' id='type4' value='type4' >
                    <label for='dbb' >Dolby B</label><input type='checkbox' name='dbb' id='dbb' value='dbb' >
                    <label for='dbc' >Dolby C</label><input type='checkbox' name='dbc' id='dbc' value='dbc' >
                    <label for='dbs' >Dolby S</label><input type='checkbox' name='dbs' id='dbs' value='dbs' >
                    <label for='dbx' >DBX</label><input type='checkbox' name='dbx' id='dbx' value='dbx' >
                    <label for='anrs' >ANRS</label><input type='checkbox' name='anrs' id='anrs' value='anrs' >
                    <label for='sanrs' >SANRS</label><input type='checkbox' name='sanrs' id='sanrs' value='sanrs' >
                </td>
            </tr>
            <tr>
                    <td><a><b>Manufacturer</b></a></td>
                    <td><a><b>Model</b></a></td>
                    <td><a><b>Made from</b></a></td>
                    <td><a><b>Made to</b></a></td>
                    <td><a><b>Has Dolby B</b></a></td>
                    <td><a><b>Has Dolby C</b></a></td>
                    <td><a><b>Has Dolby S</b></a></td>
                    <td><a><b>Has DBX</b></a></td>
            </tr>

        </table>
        <div id="resultMsg"></div>
        <select name="num_of_rows" id="nor">
            <option selected value="10" >10</option>
            <option value="25" >25</option>
            <option value="50" >50</option>
            <option value="100" >100</option>
        </select> 
        <h2>JSON</h2>
        <pre id="result"></pre>
        <button type="submit" id="search_button" name="search_button"  onClick="" />Search</button>
    </form>
    <div id="cassette_decks" >
        <script>
            $("#cassette_decks").load("cassette_tables.php");
        </script>
    </div>
    <script>
        $(document).ready(function() {
            $("#search_button").click(function(e) {
                e.preventDefault();
                var search={
                    "type3" : document.getElementById("type3").checked ,
                    "type4" : document.getElementById("type4").checked ,
                    "dbb" : document.getElementById("dbb").checked ,
                    "dbc" : document.getElementById("dbc").checked ,
                    "dbs" : document.getElementById("dbs").checked ,
                    "dbx" : document.getElementById("dbx").checked ,
                    "anrs" : document.getElementById("anrs").checked, 
                    "sanrs" : document.getElementById("sanrs").checked,
                    "nor" : document.getElementById("nor").value
                };
                var searchStr=JSON.stringify(search);
                $.ajax({
                    type: "POST",
                    url: "createTable.php",
                    dataType: "text",
                    data: {searchArray : search},
                    success : function(data,status){
                        console.log(data);
                    },
                    error : function(status){
                        console.log(status);
                    }
                });
            });
        });
    </script>
    </body>
</html>

这大概是我的createTable.php：

<?php
    if(isset($_POST['searchArray'])){
//run a bunch of code that basically creates a table from a database array
?>

我整天都在网上寻找如何将数组从 jQuery 传递到 php。

基本上我想要做的是删除一个表，然后从表单中创建一个具有不同参数的新表。如果我阻止表单提交，它就不起作用。

如果我使用dataType : "json"，它不会做任何事情（成功时没有输出）。基本上，如果我确实发送了 ajax 请求，它确实成功发送了它，但是 php 中的 POST 什么也没做。

我正在使用 php 8，我只是不知道该怎么做。我从页面尝试了不同的代码，它确实有效。我只是不知道该怎么办。对 php 和 js/jQuery 来说还是新手。任何帮助都会奏效。

【问题讨论】：

您可以将会话变量传递回您的 PHP 代码。您当然要在使用前对其进行消毒。
你从不使用变量searchStr，它是干什么用的？
dataType: 'json' 表示 PHP 脚本返回 JSON。你在 PHP 脚本中做echo json_encode(something) 吗？
@Barmar 我没有。如果我确实编码了一个 json 文件，那会将 html 代码写入文件吗？
json_decode() 需要它的参数是一个字符串，而不是一个数组。它解析 JSON 字符串并返回一个数组或对象。

标签： javascript php jquery ajax

【解决方案1】：

search 是一个对象，而不是一个数组。但是在PHP中它会变成一个关联数组。

所有的键都在$_POST['searchArray']。所以你可以使用$_POST['searchArray']['type3'] 来判断type3 复选框是否被选中。

您还可以更改要使用的 jQuery 代码：

data: search,

那么search 对象的每个键都将是$_POST 中的一个键，因此您可以只使用$_POST['type3']。当然，在这种情况下您不应该使用if (isset($_POST['searchArray']))，因为它不再存在。

【讨论】：

问题是，如果 isset $POST 确实通过了，唯一改变的是 php 文件中的回显只是在控制台中显示代码。
如果您想对结果做其他事情，您需要将其添加到success 函数中。
所以基本上如果 ajax 请求成功，它只返回 php 文件的文本？我确实看到我可以使用 $.load，但是当我使用它时，它只是没有从 ajax 中找到我需要的变量
.load() 在 AJAX 返回 HTML 时使用，它被插入到该元素中。
您应该让 PHP 脚本返回 JSON，然后您可以将其作为 JS 对象进行处理并在您想要的位置显示结果。 AJAX 不会自动发生任何事情，这就是重点——您必须准确地编写您想要对响应执行的操作。

【解决方案2】：

我不确定您要做什么，但这里有一个如何使用 Ajax 的示例：

Ajax.js

$(document).on("click", ".button-class", function() {
    var id = $(this).attr("data-id");
    $.ajax({
        type: "POST",
        url: "/absolute_path/to/php_file.php",
        data: {my_id:id, my_custom_key: "my_custom_value"},
        dataType: "JSON",
        success: function (response) {
            console.log(response);
        },
        error: function(response){
            console.log(response);
        }
    })
    .done(function(data) {
        window.location = "customers/info";
    })
})

Php_file.php

<?php
$id = $POST["my_id"];
$customValue = $POST["my_custom_value"];
$response = ["message"=> "We took your id which is $id and your custom value which is $customValue"];
echo json_encode($response);
?>

这是一个如何使用 ajax 的基本示例。

说明

我从我之前的一个答案中复制了这个 ajax。我们在 Ajax 中传递了一些参数，如 Ajax.php 文件中所示。

PHP 部分稍微简单一些。您将获得张贴到PHP 文件的变量。因此，您调用$POST 变量来读取发布的数据。就是这样！

【讨论】：

我可以将任何类型的数组传递给 php 吗？有多种方法可以初始化 js 数组，我想知道是否可以将任何类型传递给 php。
@AmonRatSO 数组的定义在不同的编程语言中是不一样的。据我所知，您可以（或者更确切地说，您应该）将 object 传递给 Ajax 中的 data 键。对象位于{myId: "myValue"}
是的，我明白你的意思