AJAX 无法 POST 到 PHP 文件答案

【问题标题】：AJAX can't POST to PHP fileAJAX 无法 POST 到 PHP 文件
【发布时间】：2013-04-12 23:48:47
【问题描述】：

FIXED! See bottom for solution.

我在这方面遇到了令人难以置信的困难。我已经做了好几个星期了。我正在尝试使用 AJAX 将新记录添加到 mysql 中。 PHP 文件 100% 工作，但我似乎无法让 AJAX 与我的表单一起使用，该表单具有发送数据的 POST 方法。这是我第一次在 StackOverflow 上，所以请放轻松。代码如下：

HTML 代码：

<form name='addform' method='POST' >
    <td></td>
    <td><input type='text' id='cname'></td>
    <td>
        <select id='fuel'>
            <option value='Petrol'>Petrol</option>
            <option value='Diesel'>Diesel</option>
            <option value='Hybrid'>Hybrid</option>
            <option value='LPG'>LPG</option>
        </select>
    </td>
    <td>
        <select id='trans'>
            <option value='Automatic'>Automatic</option>
            <option value='Manual'>Manual</option>
            <option value='Semi-Auto'>Semi-Auto</option>
        </select>
    </td>
    <td><input type='text' id='engine'></td>
    <td><input type='text' id='doors'></td>
    <td><input type='text' id='total'></td>
</tr>
<tr>
    <td><input type='submit' value='Add Car' onclick='addRecord()'></td>
...

我有一个外部 .js 文件来处理 Javascript：

function addRecord(){
    if (
        document.addform.cname.value == "" 
        || document.addform.fuel.value == "" 
        || >document.addform.trans.value == "" 
        || document.addform.engine.value == "" 
        || document.addform.doors.value == "" 
        || document.addform.total.value == ""
    ) 
    { 
        alert ("Empty >field(s) - Cannot create record"); 
        return;
    }

    var mydata = null;
    // Mozilla/Safari
    if (window.XMLHttpRequest) 
    {
        xmlHttpReq2 = new XMLHttpRequest ();
    }
    // IE
    else if (window.ActiveXObject) 
    {
        xmlHttpReq2 = new ActiveXObject ("Microsoft.XMLHTTP");
    }

    var cname = document.getElementById('cname').value;
    var fuel = document.getElementById('fuel').value;
    var trans = document.getElementById('trans').value;
    var engine = document.getElementById('engine').value;
    var doors = document.getElementById('doors').value;
    var total = document.getElementById('total').value;

    mydata = '?cname='+cname+'&fuel='+fuel+'&trans'+trans+'&engine'+engine+'&doors'+doors+'&total'+total;          

    alert ("To Server (Add New Record):\n\nadd.php" + mydata);

    xmlHttpReq2.open('POST', "add.php" +mydata, true);
    xmlHttpReq2.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlHttpReq2.send(null);
    xmlHttpReq2.onreadystatechange = addRecordCallback;
}

PHP 代码：

<?php

$link = mysql_connect ("194.81.104.27", "www", "www");
mysql_select_db ("xyz") or die(mysql_error());

$tot=$_POST[total];
$door=$_POST[doors];
$query = "INSERT INTO tbl 
    (ID, CARNAME, FUELTYPE, TRANSMISSION, ENGINESIZE, DOORS, TOTAL, AVAILABLE)
    VALUES ('$_POST[cname]','$_POST[cname]', '$_POST[fuel]', '$_POST[trans]','$_POST[engine]', $door, $tot, $tot)";
    $result = mysql_query($query);
    mysql_close ($link);
?>

发生的情况是我将信息放入表单中，单击按钮，警报告诉我它确实从表单中获取了数据。但在那之后什么也没有发生。我认为由于某种原因，数据没有以正确的格式发送到 PHP 文件。

谢谢！

Solution was:

我设法让它工作了！部分问题是，就像@adeneo 说我没有onclick='addRecord(); return false;' 那样！我做的另一件事是删除表单的 id，不确定这是否有任何作用。我还像这样将“mydata”附加到 .send：xmlHttpReq2.send(mydata); 最后我不得不删除一个“？”它在 mydata 变量收集中的 cname 前面。所以它是mydata = '?cname='+cname+...，我不得不删除?。感谢大家的帮助！

【问题讨论】：

add.php 是什么样的？
还有一些参数在名称和值之间没有等号（在 mydata 中）
你愿意为 AJAX 尝试 jQuery 吗？
将数组键放在引号中（例如，$_POST[total] 应该是 $_POST['total']）。
好吧，通过向该脚本发送一个简单的 POST 请求来删除整个数据库肯定很容易。一旦找出问题所在，您可能应该开始学习 PDO。

标签： php mysql ajax forms post

【解决方案1】：

由于您已经使用 jquery，因此您的生活变得复杂，也将它用于 AJAX。

$.AJAX({ url: "php 路径", 类型：“帖子”，数据：$("#formID").serialize(), });

将此作为数据发送，您会没事的。

很抱歉有拼写，是从手机感应到的。问候

埃及

【讨论】：

用这个替换你当前的ajax请求。
另外，表单输入不需要名字吗？
是的，如果我是正确的，他们会按名称进行序列化！添加到您的输入标签 name="input name"
好的，我试试。 RE：如果我使用你的代码 Firebug 告诉我“addRecord 未定义”
此代码也应该在您的事件触发器中。 $(document.body).on("submit", "#formID", function(e){ e.preventDefault(); /* AJAXCODE */ });

【解决方案2】：

有不少地方出错了。

您没有在input/select 元素上使用name 属性。他们需要有一个name 才能与 POST 请求一起发送。 id 属性与表单无关（使用标签时除外；for 属性指向它们）

<form action="/path/to/php/file.php" method="post" id="addform">
    <div>
        <label for="carname">CName</label>
        <input type="text" name="carname" id="carname">
    </div>
    <div>
        <label for="fuel">Fuel</label>
        <select id="fuel" name="fuel">
            <option value="Petrol">Petrol</option>
            <option value="Diesel">Diesel</option>
            <option value="Hybrid">Hybrid</option>
            <option value="LPG">LPG</option>
        </select>
    </div>
    <div>
        <label for="transmission">Transmission</label>
        <select id="transmission" name="transmission">
            <option value="Automatic">Automatic</option>
            <option value="Manual">Manual</option>
            <option value="Semi-Auto">Semi-Auto</option>
        </select>
    </div>
    <div>
        <label for="engine">Engine</label>
        <input type="text" id="engine" name="engine">
    </div>
    <div>
        <label for="doors">Doors</label>
        <input type="text" id="doors" name="doors">
    </div>
    <div>
        <label for="total">Total</label>
        <input type="text" id="total" name="total">
    </div>
    <div>
        <label for="submit">Engine</label>
        <input type="submit" id="submit" value="Add Car" onclick="addRecord()">
    </div>
</form>

至于 javascript，使用 jQuery（或类似的库）要容易得多。它将所有细节和浏览器差异抽象化，让您的生活更轻松。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
// When the page is done loading...
$(function () {
    // When the form is submitted
    $("form#addform").on("submit", function () {
        // Get the form data and serialize it
        var data = $(this).serialize();
        // Create a POST request
        var post = $.post("/path/to/php/file.php", data);
        // When the request is done show a message
        post.done(function () {
            alert("Form submitted!");
        });
        // If the request fails show another message
        post.fail(function () {
            alert("Error! Form not submitted.");
        });
        // Returning false prevents the form's normal
        // behaviour, i.e. its submission
        return false;
    });
});
</script>

查看您的 PHP 代码，您似乎刚刚学习了 PHP：您使用的是已弃用的扩展 (mysql)；您只需使用 POST 变量而无需担心安全性；并且您的 SQL 代码看起来有点不确定（例如，AVAILABLE 是什么，为什么设置为 $total？）；最后，字符串数组索引应该被引用。

// Database handle
$db = new MySQLi('194.81.104.27', 'www', 'www', 'xyz');

// SQL query with placeholders
$sql = "INSERT INTO tbl (CARNAME,FUELTYPE,TRANSMISSION,ENGINESIZE,DOORS,TOTAL) VALUES (?,?,?,?,?,?)";

// Create a statement object
$stmt = $db->prepare($sql);

// Fill in the placeholders
$stmt->bind_param('ssssii', $carname, $fuel, $transmission, $engine, $doors, $total);

// Set the values
$carname      = filter_input(INPUT_POST, 'cname', FILTER_SANITIZE_STRING);
$fuel         = filter_input(INPUT_POST, 'fuel', FILTER_SANITIZE_STRING);
$transmission = filter_input(INPUT_POST, 'transmission', FILTER_SANITIZE_STRING);
$engine       = filter_input(INPUT_POST, 'engine', FILTER_SANITIZE_STRING);
$doors        = filter_input(INPUT_POST, 'doors', FILTER_SANITIZE_NUMBER_INT);
$total        = filter_input(INPUT_POST, 'total', FILTER_SANITIZE_NUMBER_INT);

// If the statement was not executed then there was an error
if ($stmt->execute() === false) {
    header('HTTP/1.0 404 Not Found', true, 404);
}
// Done

注意：我从未测试过任何示例。我只是根据需要在我的文本编辑器中将它们写下来，因此您可能需要调整它们。

【讨论】：

我上学期刚学过 PHP，哈哈。我不打算确保任何事情，因为我明年在大学不会做任何事情。这也不是我的途径（我在计算机系统工程专业）。 AVAILABLE 获得与 TOTAL 相同的金额，因为这是一家汽车租赁业务，当添加一批汽车时，总数将等于最初可用的金额。从那里开始，随着汽车出租或归还时增加，我会减少。当汽车被注销等时删除汽车。感谢您的意见。你似乎知道你在说什么，所以我会把你标记为答案:)。

【解决方案3】：

我认为部分问题在于您将数据 "mydata = '?cname='+cname+'&fuel..." 粘贴到 URL 的背面，就像使用 GET 作为传输方法一样，但是您将 POST 定义为传输方法，所以这样做是不必要的.

POST 方法为您封装数据。尝试从该行中删除 +mydata

xmlHttpReq2.open('POST', "add.php" +mydata, true);

另外，再往下两行，您正在调用此处未列出的函数

xmlHttpReq2.onreadystatechange = addRecordCallback;

看看这个函数做了什么会很有帮助。

【讨论】：