使用 AJAX 提交 HTML 表单答案

【问题标题】：Submitting HTML Form with AJAX使用 AJAX 提交 HTML 表单
【发布时间】：2011-09-30 03:55:16
【问题描述】：

我有一个表格：

<form action="#" method="post" id="hubForm">
    <label class="labelText">Expiration Date:</label>
    <input class="datBox" type="text" id="cal" name="date">
    <div class="clr"></div>
    <div class="clr"></div>
    <label class="labelText">Hub Name</label>
    <input class="inputTxt" type="text" value="" name="name" />
    <div class="clr"></div>
    <label class="labelText">Description</label>
    <textarea class="textArea" name="desc"></textarea>
    <div class="clr"></div>
    <input class="submitButt" type="submit" value="" />
    <div class="clr"></div>
</form>

我有这个 JavaScript：

$('#hubForm').submit(function() {
    $.ajax({
        url: "hubControl.php",
        type: "post",
        data: $(this).serialize()
    });
});

还有这个 PHP 代码：

//Add the hub, task, or project to the database
mysql_query("INSERT INTO ".$type."s(".$IDvar.", name, description, users, expDate)
VALUES(".$ID.", \"".$_POST['title']."\", \"".$_POST['desc']."\", ".$ID.", ".$_POST['date'].")");

但它拒绝向数据库添加任何内容。我已经重写了代码以使用 $_GET 并测试了 PHP，并且我已经验证它可以工作。

至于 JavaScript，我也尝试过类似的东西

$.post("hubControl.php", $('#hubForm').serialize());

但似乎没有任何效果。有什么想法吗？

编辑： 表单 HTML 是别人给我的，所以我不知道它是否 100% 兼容 AJAX/JavaScript，比如 method="post"。你们都会比我有更好的主意。

【问题讨论】：

你能用 Fiddler ot Firebug 测试一下，看看发布到 PHP 页面的内容吗？另外，你确定 $(this) 是指 ajax 调用中的表单吗？我不确定上下文是#hubForm..
我已经尝试不使用 $this 并使用 $('#hubForm') 和 $('hubForm') 代替。我会尝试使用 Firebug，但我不熟悉它。
看起来 Bobby 又要参加比赛了：bobby-tables 那是

标签： php javascript ajax forms

【解决方案1】：

如果它适用于 $_GET 而不是 $_POST，听起来 $_POST 数组没有被正确填充。

我建议您通过在页面加载时查看 $_REQUEST 或 $_POST 数组来开始解决此问题。一些 HTML pre 标记中的 print_r($_POST) 可能非常有用。

如果您知道 PHP 甚至没有接收到正确的数据，您可以专注于修复 Ajax/jQuery。

【讨论】：

另外，请阅读 MySQL 注入以及为什么要使用 mysql_real_escape() 清理任何用户输入；
我正在使用 jQuery UI 对话框，所以当我尝试在 PHP 页面上打印任何内容时，它只是不显示任何内容。事实上，就我所知道的测试而言，它可能根本无法访问 PHP 文件。我也尝试过创建 submit() 函数并执行 onClick() 并在函数中放置 alert()，但什么也没发生。我会在几分钟后尝试 print_r($_POST)，看看有没有什么问题
如果您将 print_r($POST) 打印到错误日志中，页面是否被 ajax 查询击中会很明显。尝试类似： $test = print_r($_POST,1 ); error_log("----POST-----\n".$test);
它肯定会到达那里并获得我要发送的值。这帮助我找到了问题。我打印出我的 SQL 查询，尽管它与 $_GET 一起工作，但内容却是空的并且带有额外的逗号。时间工作

【解决方案2】：

由于您使用的是 jQuery，您应该考虑使用ajaxForm plugin。它非常易于使用，只需最少的设置即可将其放入您的项目中。

【讨论】：

【解决方案3】：

尽量使用大写类型：

$.ajax({
    url: "hubControl.php",
    type: "POST",
    data: $(this).serialize()
});

【讨论】：