JQueryAJAX调用php函数

JQuery AJAX call to php function

本文关键字：函数 php 调用 JQueryAJAX      更新时间：2023-09-26

我正在尝试用AJAX调用取代网页中重新加载PHP脚本的页面。

我正在使用JQuery来运行AJAX脚本，但它似乎什么都没做，所以我试图写一个非常基本的脚本来测试它

我的目录如下

public_html/index.php
           /scripts/phpfunctions.php
                   /jqueryfunctions.js

index.php包含

<!DOCTYPE html>
<html>
<head>
    <!-- jquery functions -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="scripts/jqueryfunctions.js"></script>
    <!-- php functions -->
    <?php include 'scripts/phpfunctions.php' ?>
</head>
<body>
    <button type="button" id="testButt">TEST</button>
</body>
</html>

如果参数设置为，那么我试图调用的phpfunctions.php页面只包含一个回波

<?php
    if(isset($_GET["action"])) {
        echo "test has been run";
    }
?>

我尝试运行的jqueryfunctions.js脚本是

$(document).read(function () {
    $('#testButt').on('click', function () {
        console.log("jquery call worked"); // this bit does run when button is clicked
        $.ajax({ // this bit doesn't seem to do anything
            url: 'scripts/phpfunctions.php?action=run_test',
            type: 'GET',
            success: function (data) {
                $('#ajaxdata').html(data);
            },
            error: function (log) {
                console.log(log.message);
            }
        });
    });
});

我看到jqueryfunctions.js函数被第一个console.log调用，但它似乎没有调用我的phpfunctions.php函数。

我本来希望看到php echo"测试已经运行"，但这并没有发生。

我错过什么了吗？

您应该使用isset()方法：

<?php
    if(isset($_GET["action"])) {
       if($_GET["action"] == "run_test") {
          echo "test has been run";
       }
    }
?>

如果您正在使用ajax，那么为什么需要将其包含在索引页面上：

<?php include 'scripts/phpfunctions.php' ?>

我在你的索引页上找不到这个元素$('#ajaxdata')。

此外，您还可以检查检查器工具的网络选项卡，以查看对phpfunctions.php的xhr请求，并查看该请求是否成功或存在任何错误。

我认为问题就在这里：

$(document).read(function() {
    $('#testButt').on('click', function() {
        console.log("jquery call worked"); // this bit does run when button is clicked
        $.ajax({   // this bit doesn't seem to do anything
            url: 'scripts/phpfunctions.php',
            type: 'GET',
            data: {action:'run_test'}, // <------ Here
            success: function(data) {
                $('#ajaxdata').html(data);
            },
            error: function(log) {
                console.log(log.message);
            }
        });
    });
});

jQuery说：

要发送到服务器的数据。它被转换为查询字符串（如果不是字符串的话）。它被附加到GET请求的url中。请参阅processData选项以阻止此自动处理。对象必须是键/值对。若value是Array，jQuery会根据传统设置的值序列化具有相同键的多个值。

因此，您应该设置data: {key:'value'}

大多数事情看起来都很好，但您的data属性是为"POST"请求设计的，请尝试将数据添加到url中，如下所示：

$( document ).read( function ()
{
    $( '#testButt' ).on( 'click', function ()
    {
        console.log( "jquery call worked" ); // this bit does run when button is clicked
        $.ajax( {   // this bit doesn't seem to do anything
            url: 'scripts/phpfunctions.php?action=run_test', // Add the GET request to the end of the URL
            type: 'GET',
            //data: 'action=run_test', Unrequired noise :P (this is for post requests...)
            success: function ( data )
            {
                $( '#ajaxdata' ).html( data );
            },
            error: function ( log )
            {
                console.log( log.message );
            }
        } );
    } );
} );

而且（正如我的评论中提到的），你需要完成你的身体关闭标签：

</body> <!-- Add the closing > in :P -->
</html>

我希望这能有所帮助：）

在哪里加载ajaxfunctions.js？在您的代码中，您似乎从未加载资源并更改

<button id="xxx">

在中

<button type="button" id="xxx">

因此页面不会重新加载

相关文章：