0

我正在尝试使用 post 方法将表单数据发送到 PHP 脚本。因为字段的数量和名称是可变的，所以我遍历 $_POST 数组。当将表单“直接”发送到 PHP 文件时，它工作得很好，但是由于不同的原因，我需要/想要让 PHP 脚本在后台运行，而不需要重新加载表单的页面。所以我尝试使用 AJAX ...但是在执行脚本时 $_POST 数组是空的。

这是我用来简单地回显表单输入的 PHP 文本脚本 (process_form_fields.php)：

echo "DEBUG: Script Output start.<br />";
foreach($_POST as $name => $value)
{
    echo "DEBUG: $name = $value <br />";
}
echo "DEBUG: End of script output.<br />";

sdection 中的 JavaScript / AJAX 代码如下所示：

<script type="text/javascript" language="javascript">
    xmlhttp = new XMLHttpRequest();

    function process_form()
    {
        xmlhttp.onreadystatechange =
        function()
        {
            if(xmlhttp.readystate == 4)
            {
                document.getElementById("status_message_box").innerHTML = xmlhttp.responseText;
            }
            else
            {
                document.getElementById("status_message_box").innerHTML = "<i>loading (status:" + xmlhttp.status + xmlhttp.responseText + ")</i>";
            }
        }
        xmlhttp.open("POST", "http://mydomain.com/modules/process_form_fields.php", true);
        xmlhttp.send();
    }
</script>

这就是表单的样子：

<form action="process_form_fields.php" method="post" class="niceform">
<input type="submit" value="submit">
<div class="set_options">
    <dl>
        <dt>
            <label for="1">Option 1:</label>
        </dt>
        <dd>
            <select size="1" name="Option 1" id="Option 1">
                <option value="Alpha">Alpha (1pt)</option>
                <option value="Beta">Beta (5pt)</option>
                <option value="Gamma">Gamma (20pt)</option>
            </select>
        </dd>
    </dl>
    <dl>
        <dt><label for="2">Option 2:</label></dt>
        <dd>
            <select size="1" name="Option 2" id="Option 2">
                <option value="Red">Red (0pt)</option>
                <option value="Blue">Blue (0pt)</option>
            </select>
        </dd>
    </dl>
    <dl>
        <dt>
            <label for="3">Option 3:</label>
        </dt>
        <dd>
            <select size="1" name="Option X" id="Option X">
                <option value="Foo">Foo (-5pt)</option>
                <option value="Bar">Bar (42pt)</option>
            </select>
        </dd>
    </dl>
</form>

将表单直接发送到 PHP 文件会创建以下输出，就像它应该的那样：

DEBUG: Script Output start.
DEBUG: Option 1 = Alpha (1pt)
DEBUG: Option 2 = Blue (0pt)
DEBUG: Option X = Bar (42pt)
DEBUG: End of script output.

使用上面的 AJAX 输出仅是：

DEBUG: Script Output start.
DEBUG: End of script output.

我想我可能在这里遗漏了一些简单的东西，但我太盲目了，无法将手指放在上面。我希望有人能指出我正确的方向。重要的是 HTML 表单具有可变数量的字段，并且这些字段不以任何方式编号/序列化（可能是“选项 1”、“选项 2”、“最喜欢的黄色香蕉形状水果”和“年龄”例如）。

谢谢

4

4 回答 4

2

您没有使用 ajax 请求发送数据，这应该可以：

 var dataString = $('form').serialize();
    xmlhttp.send(dataString);
于 2012-11-25T17:22:28.433 回答
0

您没有在请求中发送任何数据！XMLHttpRequest 不会自动捕获表单数据。您必须明确说明要传递的变量。您必须使用 javascript 来捕获表单字段的值，将它们串入查询中，然后使用xmlhttp.send().

尝试类似：

xmlhttp.open("POST","http://mydomain.com/modules/process_form_fields.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("option1=A&option2=B&option3=C");
于 2012-11-25T17:17:04.413 回答
0

jquery 可以避免这种复杂且难以调试的代码。

使用这样的东西：

$.ajax({
  url: "test.html",
  data: {data:yourdata}
}).done(function() { 
    //your success function
});

就是这样。

于 2012-11-25T17:21:11.230 回答
0

要像 HTML 表单一样 POST 数据，请使用 setRequestHeader() 添加 HTTP 标头。在 send() 方法中指定要发送的数据：。
在您的情况下，这里send();是空的，这就是为什么您得到一个空的 $_POST 数组

于 2012-11-25T17:17:50.113 回答