Handsontable：数据未返回到 php 文件

Question

我是法国人，请原谅我的英语 :) 我检查了很多主题。有些似乎是同样的问题，但它仍然不起作用。我也是 javascript 的初学者。

所以，这是我的代码： `

$(document).ready(function () {

var container = document.getElementById('Grille_competences');

var headerRenderer = function (instance, td, row, col, prop, value,
cellProperties) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
td.style.fontWeight = 'bold';
td.style.textAlign = 'center';
td.style.backgroundColor = '#B0C4DE';
};

//Initialisation des données de la grille.
var data = [["Compétences","Description","Code",""],
        ["", "", "",""],
        ["","", "",""],
        ["","", "",""],
        ["","", "",""],
        ["","", "",""]];

//Création de la grille
hot = new Handsontable(container, {
data: data,
height: 800,
width: 1183,
colWidths: [35,200,25,80],
manualRowResize: true,
colHeaders: true,
rowHeaders: true,
mergeCells: true,
stretchH: 'all',
columnSorting: true,
contextMenu: true,    
contextMenuCopyPaste: {
  swfPath: './zeroclipboard/dist/ZeroClipboard.swf'
},


//Fonctionnalités lors d'un clic droit dans la grille.

 contextMenu: {    

   items: {
    "row_above": {
        name: 'Insérer ligne au dessus',
      disabled: function () {            
        return hot.getSelected()[0] === 0;
      }
    },
    "row_below": {
        name: 'Insérer ligne en dessous',
        disabled: function() {            
        return hot.getSelected()[0] === 0;
    }
  },
    "hsep1": "---------",
    "col_left": {
        name: 'Insérer colonne à gauche',
        disabled: function () {
          return hot.getSelected()[0] === 0;
        }
    },
    "col_right": {
        name: 'Insérer colonne à droite',
        disabled: function() {
          return hot.getSelected()[0] === 0;
        }
    },
    "hsep2": "---------",
    "remove_row": {
      name: 'Supprimer la ligne',
      disabled: function () {
        return hot.getSelected()[0] === 0;
      }
    },

    "remove_col": {
      name: 'Supprimer la colonne',
      disabled: function () {
        return hot.getSelected()[0] === 0;
      }
    },
    "hsep3": "---------",
    "copy": {
      name:'Copier',
      disabled: function () {
        return hot.getSelected()[0] === 0;
      }
    },
    "paste": {
      name: 'Coller',
      disabled: function(){
        return hot.getSelected()[0] === 0;
      }
    },
    "hsep4": "---------",
    "undo": {
      name:'Précédent',
      disabled: function(){
        return hot.getSelected()[0] === 0;
      }
    },
    "redo": {
      name: 'Suivant',
      disabled: function(){
        return hot.getSelected()[0] === 0;
      }
    },
    "hsep5": "---------",
    "make_read_only": {
      name: 'Lecture seule',
      disabled: function() {
        return hot.getSelected()[0] === 0;
      }
    },
    "alignment": {
      name: 'Alignement du texte',
      disabled: function () {
        return hot.getSelected()[0] === 0;        
      }          
    },
    "mergeCells": {
      name: 'Fusionner les cellules',
      disabled: function () {
        return hot.getSelected()[0] === 0;
      }
    },


    },
},


//Entetes de la grille en lecture seule. 
cells: function(row, col, prop) {
var cellProperties = {};
if(row===0){
cellProperties.renderer = headerRenderer;
}   
if(row === 0 && col <3){
       cellProperties.readOnly = true;
       }
return cellProperties;
}
});

//Lors d'un clic sur le bouton valider, transmission des données de la grille.


});

document.getElementById('save').onclick=function () {

            $.ajax({
            url: "testGetData.php",
            dataType: 'json',
            data: {'data':hot.getData()}, //retourne les données des cellules
            type: 'GET',
            success: function (data) {
                alert(data);
            },



        });
            document.location.href='testGetData.php';
    };

`

这里是 testGetData.php 的代码：

<?php

foreach($_GET['data'] as $value)
    echo $value;
?>

问题是 testGetData.php 似乎没有收到 $_GET['data']。我尝试了许多我在论坛或 Handsontable 的文档上看到的不同的东西。我以为原因是范围，但我做了和例子一样的事情（至少我相信^^）。

你能帮帮我吗？我不明白怎么了。我需要重新审视我的代码。

Answer 1

问题 与 hansontable 无关，但与您使用 jQuery ajax 方法发送数据的方式有关：您 指定了 dataType: 'json' 但处理 .php 文件 return 编辑了纯文本 格式。

你应该改变两件事，首先在你的 .html-file:

将document.getElementById('save').onclick=function () { ... }函数替换为：

$('#save').click(function(){
  $.ajax({
    url: "testGetData.php",
    dataType: 'json',
    data: {data: hot.getData() }, 
    type: 'GET',
    success: function (retobj) { alert(JSON.stringify(retobj)); }
  });  
}

（如果你不用jQuery库有什么意义...）里面的东西差不多没变，虽然我改了success()函数a一点点。它会将 returned JavaScript 对象 retobj 重新格式化回 JSON 格式，因此您将能够看到它的所有元素。使用 dataType:'json' jQuery ajax() 方法的巧妙之处在于，从 .php 脚本编辑的数据 return 将出现在 success() 已经作为 JavaScript 对象运行，您无需执行任何操作！

其次 - 最重要的事情 - 在你的 .php 文件中：

为了向 success() 函数提供所需的 json 格式化字符串，testGetData.php 脚本需要 return json格式。最简单的方法是使用 php 函数 json_encode():

<?php
echo json_encode($_REQUEST);
?>

假设 hot.getData() 传递了这样一个数组：

data= [[0,1,2,3],
       [100,101,102,103],
       [200,201,202,203]];

然后在单击 #save 按钮后警报功能将 return 以下字符串（我测试过它 - 虽然没有 handsontable）：

{"data":[["0","1","2","3"],["100","101","102","103"],["200","201","202","203"]]}

Handsontable：数据未返回到 php 文件

Handsontable : datas aren't returned to the php file

javascript

ajax

jquery

handsontable