Question

在我的网站上，用户将选择一个框数组，然后当他们点击提交时，数组将被发送到数据库，所以你可以看到这个jsfiddle：https://jsfiddle.net/2peL8qg8/

但是，在php文件中我收到错误：foreach（）的索引和参数无效。有人可以告诉我为什么吗？感谢

HTML和Javascript：

<form action="addtodatabase.php" method="post" id="theform">
<input type="hidden" id="markers" name="markers">
<button>Submit</button>
</form>

</body>


<script type="text/javascript">


var points = [];

window.onload = window.onresize = function() {
var canvas = document.getElementById('canvas');
canvas.width = window.innerWidth * 0.8;
canvas.height = window.innerHeight * 0.8;
}


function getSquare(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
    x: 1 + (evt.clientX - rect.left) - (evt.clientX - rect.left)%10,
    y: 1 + (evt.clientY - rect.top) - (evt.clientY - rect.top)%10
};
}

function drawGrid(context) {
for (var x = 0.5; x < 10001; x += 10) {
  context.moveTo(x, 0);
  context.lineTo(x, 10000);
}

for (var y = 0.5; y < 10001; y += 10) {
  context.moveTo(0, y);
  context.lineTo(10000, y);
}

context.strokeStyle = "#ddd";
context.stroke();
}

function fillSquare(context, x, y){
context.fillStyle = "black"
context.fillRect(x,y,9,9);
points.push(x+","+y);
for (var i=points.length;i--;){

}
}

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

drawGrid(context);

canvas.addEventListener('click', function(evt) {
 var mousePos = getSquare(canvas, evt);
fillSquare(context, mousePos.x, mousePos.y)
}, false);


var myDataObj = new Object();
myDataObj.points = points;

$.ajax({  
type: "POST",
url: "localhost/website/addtodatabase.php",
data: JSON.stringify(myDataObj),
contentType: "application/json"
});

PHP

$sql = "Insert into MYTABLE (Point,UserName) VALUES (?,?)";
$db =new PDO("mysql:host=localhost;dbname=box;","root","");
$sth = $db->prepare($sql);
foreach($myPoints as $point)
{
  $sth->execute(array($point,$username));
}

Answer 1

此功能应由提交按钮调用。目前你有javascript正在执行。

function PostDataToServer()
{
  var myDataObj = new Object();
  myDataObj.points = points;

  $.ajax({  
    type: "POST",
    url: "localhost/website/addtodatabase.php",
    data: JSON.stringify(myDataObj),
    contentType: "application/json"
  });
}

，您的保存按钮应该是：

<input id="saveBtn" type="button" value="Save" onclick="PostDataToServer();" />

然后你应该在你的addtodatabase.php

中这样做

<?php
//Lets dump the post data back to the screen to make
//sure we are actually getting the data
//::TODO:: comment the var_dump($_POST); after verifying your getting data
var_dump($_POST);

$myPoints = json_decode($_POST['points']);
$sql = "Insert into MYTABLE (Point,UserName) VALUES (?,?)";
$db =new PDO("mysql:host=localhost;dbname=box;","root","");
$sth = $db->prepare($sql);
if(count($myPoints)>0)
{
   foreach($myPoints as $point)
   {
     $sth->execute(array($point,$username));
   }
}
else
{
   echo 'No Points were set in the array $myPoints';
}

还要将jquery添加到你的js

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>

将javascript数组转移到php

1 个答案: