基本 ajax/jquery POST 失败答案

【问题标题】：Basic ajax/jquery POST failing基本 ajax/jquery POST 失败
【发布时间】：2016-09-08 14:30:08
【问题描述】：

我已经有一段时间没有接触 jQuery（实际上是几年），所以请原谅我的无知。

我无法将以下基本 jQuery 发布到 PHP 脚本中：

<!DOCTYPE html>
<html><body>
<form id="formID">
    <input name="name" type="text" id="name">
    <input name="email" type="text" id="email">
    <input name="mobile" type="text" id="mobile">
    <div id="submitButton">Submit</div>
    <div id="result"></div>
</form>

<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script>
        $("#submitButton").click(function(e) {
            e.preventDefault();
            $.ajax({
                type: "POST",
                url: "/fupload",
                /*data: $("#formID").serialize(),*/
                data: {name: "bob"},
                success: function(resp) {
                    //$('#result').html(resp);
                    console.log(resp);
                }
        });
    });
</script>
</body></html>

和 /fupload/index.php 脚本：

<?php

$idInfo = "[ " . $_POST['name'] . ':' . $_POST['email'] . ':' . $_POST['mobile'] . " ]";
echo $idInfo;
return;

未定义 PHP $_POST 变量（根据控制台输出）。在实际表单数据上使用 serialize() 也会导致 $_POST 变量未定义。如果我更改为 GET 方法，那么它可以工作，但我需要发布。

如果我能指出我犯了什么愚蠢的错误，我将不胜感激。

谢谢

【问题讨论】：

你能分享文件夹结构吗，即HTML文件在哪里，PHP文件在哪里。尝试删除 /fupload 中的 /，因为它会导致从您的根目录中查找 PHP 文件，请参阅此处了解说明：stackoverflow.com/questions/24627075/jquery-ajax-url-path-issue
html 文件嵌套很深，/fupload/index.php 位于根目录中（因此是“/”）。编辑：感谢参考：stackoverflow.com/questions/24627075/jquery-ajax-url-path-issue。 ajax 调用实际上是正确找到 PHP 脚本 - 因此控制台错误：未定义索引：/var/www/sites/sitex/fupload/index.php 中的电子邮件，未定义索引：/var/www/sites/sitex 中的移动设备/fupload/index.php

标签： php jquery json ajax post

【解决方案1】：

在/fupload 之后添加/，如下所示：

url: "/fupload/",

这将正确运行您的代码。如果你最后不使用/，这将向你的php脚本发送一个格式错误的请求。由于 post 请求值也是使用查询字符串发送的。

完整代码：

<script>
    $("#submitButton").click(function(e) {
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: "/fupload/",
            /*data: $("#formID").serialize(),*/
            data: {name: "bob"},
            success: function(resp) {
                //$('#result').html(resp);
                console.log(resp);
            }
    });
});
</script>

【讨论】：

那行得通 - 谢谢。看起来最好总是使用脚本的确切/绝对路径...感谢您的帮助！

【解决方案2】：

ajax的设置应该是method而不是type

$.ajax({
    method: "POST", 
  //^^^^^---- here you have defined as type   
    .......
})

【讨论】：

感谢您的快速响应。更改为“方法”会导致同样的问题。
其余代码对我来说看起来不错。检查您的 chrome 开发人员工具，看看您的请求是否包含您在“网络”选项卡中发送的数据。告诉我
看起来方法/类型都有效。问题是 url 中的尾随“/”（或使用绝对脚本路径）。感谢您的帮助

【解决方案3】：

通过这个获取 $_POST

$dataString = $_POST['datapost'];
parse_str($dataString, $dataArray); print_r($dataArray);

【讨论】：

如果通过serialize()发送数据；数据：{datapost：$("#formID").serialize()}，