javascript - 为什么我的 AJAX 请求打开我的 PHP 文件而不是像它应该的那样返回响应文本？

Question

这个问题在这里已经有了答案:





prevent refresh of page when button inside form clicked

(16 个回答)


去年关闭。




我正在为我的 Web 工程类(class)做作业，我正在使用 jQuery 使用 POST 向我的 PHP 文件发出 AJAX 请求。分配要求“每次按下 [提交] 按钮时，表单信息必须显示在同一网页的显示部分，而无需重新加载页面”这就是我使用 AJAX 请求的原因，但每次我尝试为了发出 AJAX 请求，它只是打开我的 PHP 文件，而不是像它应该的那样给我一个响应。我查看了互联网上可以找到的所有资源，但没有任何帮助。
我的javascript:

function submit() {
            $.ajax({
                type: "POST",
                url: "assign13.php",
                data: $('#registration_form').serialize(),
                dataType: "json",
                success: function(data) {
                    var jsonResponseObj = JSON.parse(data);
                    var table_item = document.getElementById("schedule_items");
                    var string = "";
                    for (var i = 0; i < jsonResponseObj.length; i++) {
                        string += 
                            ("<tr><td>" + jsonResponseObj[i].studName0 + (jsonResponseObj[i].hasOwnProperty('studName1') ? " and " + obj[i].studName1 : "") + 
                            "</td><td>" + jsonResponseObj[i].location + 
                            "</td><td>" + jsonResponseObj[i].time + 
                            "</td><td>" + jsonResponseObj[i].performace + 
                            "</td></tr>");
                    }
                    $("#schedule_items").html(string);
                }
            });
        }

(#schedule_items 指的是表的 tbody)
有人可以告诉我我做错了什么，因为我不知道。
编辑:我没有使用输入类型="提交"，我使用的是带有 onclick="submit()"的常规按钮。
另外，我的 PHP 被请求(我还是个新手，所以我相信它看起来会更好):

class festSched {
    public $studName0;
    public $studName1;
    public $location;
    public $time;
    public $performance;
}

$filename = "./data/fest_sched.json"; // storing my data as a json cause I like json

$file = fopen($filename, "w+");

$sched_json = file_get_contents($filename, true); // read the whole file into a string

$schedule = json_decode($sched_json, true);

if ($schedule == NULL) {
    $schedule = Array();
}

$new_entry = new festSched();
$new_entry->studName0 = $_POST['first_name'] . " " . $_POST['last_name'];
if ($_POST['performance'] == "duet") {
    $new_entry->studName1 = $_POST['first_name_2'] . " " . $_POST['last_name_2'];
}
$new_entry->location = $_POST['location'] . " Room " . $_POST['room'];
$new_entry->time = $_POST['time_slot'];
$new_entry->performance = $_POST['performance'] . " for " . $_POST['skill'] . " " . $_POST['instrument'];
array_push($schedule, $new_entry);

fwrite($file, json_encode($schedule));

fclose($file);



$str = json_encode($schedule);
echo $str;

Answer 1

听起来表单在尝试执行 AJAX 之前正在执行 native 提交，您需要阻止表单 native 提交。

<script>
// Select Your Form
var form = document.querySelector('form') // Change this selector to something more specific if required

// Add a 'submit' listener to the form and prevent it from submitting
form.addEventListener('submit', function(event) {
  event.preventDefault()
})
</script>

编辑:
正如其他人指出的那样，您可以通过添加 type 属性来编辑按钮以防止表单提交。 <button type="button" onclick="submit()">Submit</button>