javascript - 使用 jQuery 和 AJAX 调用 PHP 类方法并获取返回值

Question

我正在为自己创建一个小项目。我不是一个非常有经验的程序员，所以我开始用 PHP 创建项目。很快就会发现，通过单击 HTML 按钮运行 PHP 函数和类方法并不是最简单的任务。

我设置了一些测试代码。首先，我创建了一个 HTML 表单，我想从中读取用户输入的值:

<form name="form" action="" method="POST">
    Title: <br> <input type="text" id="title"> <br>
    Description: <br> <input type="text" id="description"> <br>
    Priority: <br> <input type="number" id="priority"> <br> <br>
    <input type="button" id="ajaxTest" value="Send>
</form>

现在，当单击 ID 为#ajaxTest 的按钮时，我想调用我创建的 PHP 文件中的类方法之一。为此，我四处搜索并最终得到以下 jQuery:

<script type="text/javascript">
    $("#ajaxTest").click( function() {

        $t = $("#title").val();

        $.ajax({
            type: "POST",
            url: "http://www.example.com/task.php",
            data: "t="+t
        }).done(function(results) {
            $("#results").html(results).hide().fadeIn();
        })
    });

</script>

在 HTML 中还有一个带有 id #results 的 div 元素，用于显示结果数据。

现在，被调用的 task.php 如下所示(为便于阅读而简化):

<?php
class Task {
    private $title;
    private $description;

    function SetTitle($t) {
        $this->title = $t;
    }

    function GetTitle() {
        return $this->title;
    }

    function SetDescription($d) {
        $this->description = $d;
    }

    function GetDescription() {
        return $this->description;
    }
}

我将如何通过 jQuery/AJAX 调用此类的不同成员函数并获取它们的返回值以输入 DOM？我认为我必须创建一个像 TaskHandler 这样的中间类来启动对象等等，但我完全不知所措。几乎一整天都在做这件事，但我没能找到能引导我找到可行解决方案的答案。非常感谢您的帮助!

编辑:我现在已经编辑了 jQuery，它看起来如下:

<script type="text/javascript">

    $("#ajaxTest").click( function() {

        var t = $("#title").val();

        $.ajax({
            type: "POST",
            url: "http://www.example.com/taskHandler.php",
            data: {"t": t},
            success: function(response) {
                 $("#results").html(response);
            }
        });
    });

</script>

下面是taskHandler.php

<?php
    require_once("task.php");

    $t = new Task();
    $t->SetTitle($_POST['t']);

    $output = $t->GetTitle();
    echo $output;

不过，仍然没有任何显示。我在这里做错了什么？

Answer 1

在这个问题的长评论列表中，只有一件事可能会搞乱 AJAX 调用:

<form name="form" action="" method="POST">
    Title: <br> <input type="text" id="title"> <br>
    Description: <br> <input type="text" id="description"> <br>
    Priority: <br> <input type="number" id="priority"> <br> <br>
    <input type="submit" id="ajaxTest" value="Submit">
</form>

提交按钮通常会提交整个表单。由于提供了一个空的操作参数，发布操作将转到当前页面。这将立即重新加载，并中断可能发出但未完全发送的 AJAX 请求。

改变:

<form name="form" action="" method="POST">
    Title: <br> <input type="text" id="title"> <br>
    Description: <br> <input type="text" id="description"> <br>
    Priority: <br> <input type="number" id="priority"> <br> <br>
    <input type="button" id="ajaxTest" value="Send">
</form>