Question

我正在尝试将表单数据和js数组发送到mysql数据库。我有接收js数组到我的PHP的问题。我从表单但不是数组接收数据。我无法找到问题。

的index.php

<!doctype html>
<html lang="en">
<head>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"><!--bootstrap-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script><!--jquery-->
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script><!--angular js-->
<script type="text/javascript" src="assets/js/main.js"></script>

</head>
<body>
<form method="post" action="upload.php">
<!--dynamic form created from javascript-->
<input id="submit" type="submit" value="Upload" name="submit" onclick="upload()"/>
</form>
</body>
</html>

javascript - main.js

var objArray = []; //Array of questions

function upload(){
            var jsonArray = JSON.stringify(objArray);

            $.ajax({
                type:'post',
                url: 'upload.php',
                data: { jsonData : jsonArray},
                success: function(data){
                   console.log("success!");
               }
            });

    } else {
        console.log("no data javascript!");
    }
}

upload.php的

<?php

if(($_SERVER['REQUEST_METHOD'] == "POST") && (isset($_POST['submit']))){

    $servername = "......";
    $username = "......";
    $password = "......";
    $dbname = ".....";

    // Create connection
    $conn = new mysqli($servername, $username, $password,$dbname);

    // Check connection
    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    } 

    if(!empty($_POST['jsonData'])){
        $json = $_POST['jsonData'];
        var_dump(json_decode($json, true));
        echo "<script type=\"text/javascript\">
              console.log('received data');
        </script>";
     } else {
        echo "data not received";
     }

    $conn->close();

}else {echo "unsecure connection";}
?>

objArray看起来像这样：

[{"questionId":1,"questionTypeObj":"single","options":3},{"questionId":2,"questionTypeObj":"single","options":3}]

upload.php输出＆＃34;未收到数据＆＃34;

Answer 1

当您单击按钮时，您的代码将向服务器发送2个请求

第一个请求 - ajax

此ajax请求具有您需要的参数jsonData : jsonArray 在那之后你将发送另一个请求

第二次请求 - 提交表单

并且表单中没有jsonData : jsonArray参数发送

你根本不需要这个ajax！

接收jsonData : jsonArray参数所需要做的就是将其与表格一起发送

例如：

将您的表单更改为

<form method="post" action="upload.php">
<input id="jsonData" type="hidden" name="jsonData" value="">
<input id="submit" type="submit" value="Upload" name="submit" onclick="upload()"/>
</form>

并将按钮功能更改为

function upload(){
     var jsonArray = JSON.stringify(objArray);
     $('input#jsonData')[0].value=jsonArray ;
}

<小时/> 编辑：

或者，如果您希望upload.php处理ajax请求，而不是响应整个文档，那么您不需要表单，从HTML中删除表单，只需将submit:Upload添加到ajax请求

  data: { jsonData : jsonArray, submit:"Upload" }

Answer 2

您的输出指示问题所在：您到达回显data not received但您没有发送submit密钥的部分：通过ajax调用时未设置$_POST['submit']。

因此，您以“正常”的方式提交表单，而不是通过ajax。

这是因为您没有取消按钮的默认submit操作。

解决这个问题的最佳方法（在我看来......），是删除内联javascript - 点击处理程序 - 并用以下内容替换你的函数：

$("form").on('submit', function(e) {
    // Cancel the default form submit
    e.preventDefault();

    // The rest of your function
    var jsonArray = JSON.stringify(objArray);
    ...
});

请注意，我正在捕捉表单提交事件。您也可以使用按钮单击事件替换它，但当访问者在表单字段中使用回车键时，这可能无法正常工作。

Answer 3

你不应该这样做。在重定向之前，无法保证javascript会执行。事实上，它不会跑得足够快，而只会重定向到下一页。尝试

<form method="post" action="upload();">

这会将数据传输到页面，但它不会显示它。如果您希望显示它，您应该有提交它的表单。如果你使用ajax发布，你也可以尝试使用jquery捕获响应。

无法接收使用ajax发布的js数组

3 个答案: