无法接收用ajax发布的js数组
[英]cannot receive js array posted with ajax
问题描述
我正在尝试将表单数据和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输出“未收到数据”
3 个解决方案
解决方案1
0 2016-11-15 20:51:24
当您单击按钮时，您的代码将向服务器发送2个请求
第一个请求-Ajax
此ajax请求具有您需要jsonData : jsonArray的参数，然后您将发送另一个请求
二次提交申请表
并且表单没有jsonData : jsonArray随其发送的jsonData : jsonArray参数
您根本不需要这个ajax！
接收jsonData : jsonArray所需要做的就是将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" }
解决方案2
0 已采纳 2016-11-15 20:51:38
您的输出表明问题出在哪里：您到达data not received回显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);
...
});
请注意，我正在捕获表单提交事件。 您也可以将其替换为按钮单击事件，但是当访问者在表单字段中使用Enter键时，该事件可能无法正常工作。
解决方案3
0 2016-11-15 20:54:17
您不应该这样做。 没有任何方法可以确保JavaScript在重定向之前会执行。 实际上，它的运行速度不够快，只会重定向到下一页。 尝试
<form method="post" action="upload();">
这会将数据获取到页面，但不会显示它。 如果要显示它，则应具有提交表单的表单。 如果您使用ajax发布，也可以尝试使用jquery捕获响应。
接收用ajax发布的数据
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.