我正在尝试将表单数据和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;
答案 0 :(得分:0)
当您单击按钮时,您的代码将向服务器发送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" }
答案 1 :(得分:0)
您的输出指示问题所在:您到达回显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);
...
});
请注意,我正在捕捉表单提交事件。您也可以使用按钮单击事件替换它,但当访问者在表单字段中使用回车键时,这可能无法正常工作。
答案 2 :(得分:0)
你不应该这样做。在重定向之前,无法保证javascript会执行。事实上,它不会跑得足够快,而只会重定向到下一页。尝试
<form method="post" action="upload();">
这会将数据传输到页面,但它不会显示它。如果您希望显示它,您应该有提交它的表单。如果你使用ajax发布,你也可以尝试使用jquery捕获响应。