php - 使用 jQuery AJAX 在表单提交时调用 php 页面

Question

有点菜鸟，如果这是一个愚蠢的问题，请原谅我。

我正在尝试使用ajax在表单提交上运行php脚本(无需刷新页面。)

如果我允许表单的操作调用 php 文件，则一切正常，但如果我使用 return: false; 阻止该操作；什么也没发生。

表单非常简单，只是一个带有一些隐藏输入的按钮

<form action = 'index.php?page=addLike' method = 'POST'>
        <input type = 'hidden' name = 'post_id' value = '$post_id'/>
        <input type = 'hidden' name = 'user_id' value = '$user_id'/>
        <input type = 'submit' value = '' class = 'likeButton'/>
    </form>";

PHP 看起来像这样

<?php

include_once "models/blogLikes_Table.class.php";
$like = new blogLikes_Table($db);

$user_id = $siteVisitor->getId();
$post_id = $_POST['post_id'];

$like->insertLike($user_id, $post_id);

blogLikes_Class 中定义的 insertLike 函数如下所示，

public function insertLike($user_id, $post_id){
    $sql = "INSERT INTO blogLikes (user_id, post_id, value) VALUES ( ?,?,? )";
    $statement = $this->db->prepare($sql);
    $data = array($user_id, $post_id, "1");
    $statement->execute($data);
    return $statement;
}

我认为让我头疼的是脚本，它看起来像这样，

$(".likeButton").click(function myCall() {

var request = $.ajax({
    url: "addLike.php",
    type: "GET" ,       
    data: "html"
});

request.done(function(msg) {
    alert("this works!!!!!");           
});

request.fail(function(jqXHR, textStatus) {
    alert( "Request failed: " + textStatus );
});
return false;
});

任何帮助将不胜感激!

Answer 1

1. 从 URL 中删除操作并将其保留为 action=""，因为您将使用 Ajax 提交表单。
2. 您将 Ajax 类型设置为 GET，如果您想要 POST，则需要将其更改为 POST，如下所示。
3. 您需要使用 serializeArray() 获取表单数据它将一组表单元素编码为名称和值的数组。
4. 将您的输入从 type="submit" 更改为 type="button"。

尝试这样的事情:

    var postData = $("#your_form_id").serializeArray();
    var request = $.ajax({
        url : "addLike.php",
        type: "POST",
        data : postData
    });

这是一个JSFiddle to demonstrate .