将JavaScript数组传输到php

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 个解决方案

解决方案1
0 2016-02-06 20:23:35

将JavaScript数组传输到php

问题描述

1 个解决方案

解决方案1 0 2016-02-06 20:23:35

解决方案1
0 2016-02-06 20:23:35