Question

我正在使用此函数尝试将我的对象坐标和id发送到我的php脚本。我不知道如何设置如何获取card_id以及它的顶部和左侧坐标，以便我可以在我的PHP脚本中将它们作为一个数组进行检索。我有所有的值正确提醒，但我如何通过它们确保我在另一端获得正确的值并且坐标与card_id一致？

document.getElementById('rasterize-scoutlog2').onclick = function() {
if (!fabric.Canvas.supports('toDataURL')) {
  alert('This browser doesn\'t provide means to serialize canvas to an image');
}
else {

  canvas.deactivateAllWithDispatch().renderAll();

  //window.open(canvas.toDataURL('png'));
    //var strDataURI = (canvas.toDataURL('png'));
    //strDataURI = strDataURI.substr(22, strDataURI.length);

   var objsInCanvas = canvas.getObjects();    

    objsInCanvas.forEach(function(object) {

   var stickycard_ids = [object.card_id];
   var stickycard_top = [object.top];
   var stickycard_left = [object.left];

   if(object.card_id != null){

      stickycard_ids.forEach(function(stickycard_idarr) {

 alert(stickycard_idarr+stickycard_top+stickycard_left);

}); 


  }

  });


  var scoutlogname = $('#scoutmapselectcard').val();

    $.post("maps/savescout_log.php",
    { 

     //str: strDataURI,
           // queryStr: queryStr,
    scoutlogname: scoutlogname,
//****  stickycard_idarr: stickycard_idarr


    },
    function(data){
        if(data == "OK"){
            $("#msg").html("Scout Log saved to account!").css({'color':"green",'font-weight':"bold"});

    }
    if(data=="EMPTY"){
        $("#msg").html("Please Enter a name for your Scout Log!").css({color:"red"});
        }
        if(data=="WRONGCH"){
        $("#msg").html("Only A_Z,a-z,0-9-_ allowed in Scout Log name!").css({color:"red"});
        }
        if(data=="EXIST"){
        $("#msg").html("Scout Log name all ready exists!<br> Delete the existing one before saving.").css({color:"red"});
        }

        if(data=="ERROR"){
        $("#msg").html("Scout Log not saved!").css({color:"red"});
        }
    window.setTimeout(function() {
 $('#msg').empty();
 }, 5000);

    });

 }
};

Answer 1

我得到了对象和他们的细节都进入了数组。我使用.push方法用foreach循环中的对象值填充数组。现在到php端将它们插入到mysql数据库表中。

 document.getElementById('rasterize-scoutlog').onclick = function() {
   if (!fabric.Canvas.supports('toDataURL')) {
      alert('This browser doesn\'t provide means to serialize canvas to an image');
    }else {

  canvas.deactivateAllWithDispatch().renderAll();

  //window.open(canvas.toDataURL('png'));
    //var strDataURI = (canvas.toDataURL('png'));
    //strDataURI = strDataURI.substr(22, strDataURI.length);

   var objsInCanvas = canvas.getObjects();
   var stickycard_ids = [];
   var stickycard_top = [];
   var stickycard_left = [];
   var stickycard_type = [];

 objsInCanvas.forEach(function(object) {

     if(object.card_id != null){

      stickycard_ids.push(object.card_id);
      stickycard_top.push(object.top);
      stickycard_left.push(object.left);
      stickycard_type.push(object.cardtype);
     }

 });

     var scoutmapname = $('#scoutmapselectcard').val()
     var scoutlogname = $('#scoutlogname').val();

    $.post("maps/savescout_log.php",
    {

    //str: strDataURI,
    //queryStr: queryStr,
    scoutlogname: scoutlogname,
    scoutmapname: scoutmapname,
    stickycard_ids: stickycard_ids,
    stickycard_top: stickycard_top,
    stickycard_left: stickycard_left,
    stickycard_type:stickycard_type

    }, 


    function(data){

        if(data == "OK"){
            $("#msg").html("Scout Log saved to account!").css({'color':"green",'font-weight':"bold"});

    }
    if(data=="EMPTY"){
        $("#msg").html("Please Enter a name for your Scout Log!").css({color:"red"});
        }
        if(data=="WRONGCH"){
        $("#msg").html("Only A_Z,a-z,0-9-_ allowed in Scout Log name!").css({color:"red"});
        }
        if(data=="EXIST"){
        $("#msg").html("Scout Log name all ready exists!<br> Delete the existing one before saving or enter a new name.").css({color:"red"});
        }

        if(data=="ERROR"){
        $("#msg").html("Scout Log not saved!").css({color:"red"});
        }
    window.setTimeout(function() {
 $('#msg').empty();}, 5000);

    });

 }
};

这是将使用PDO将这些多个数组插入到mysql中的php。我使用stickycard_ids作为索引值，然后每当stickycard_ids值发生变化时将其和其他相关的数组值发布到新行。

 for ($i=0; $i < count($_POST['stickycard_ids']); $i++ ) {

    $card_id = $_POST['stickycard_ids'][$i];
    $cardtype = $_POST['stickycard_type'][$i];
    $top_y = $_POST['stickycard_top'][$i];
    $left_x = $_POST['stickycard_left'][$i];


    $sql ="INSERT INTO tablename  (scoutmapname,scoutlogname,card_id,left_x,top_y,cardtype)
VALUES (:scoutlogname,:card_id,:left_x,:top_y,:cardtype)"; 
 $q = $pdo->prepare($sql);     
  $q->execute(array(':scoutmapname'=>$scoutmapname,':scoutlogname'=>$scoutlogname,':card_id'=>$card_id,':left_x'=>$left_x,':top_y'=>$top_y,':cardtype'=>$cardtype)); 

 }

将对象card_id和数组中fabric.js中的坐标传递给JQuery .post

1 个答案: