2

我试图使用 html 5 使页面内容可编辑，并将数据保存在 json 文件中以备后用。

我还想如果页面加载使用 AJAX 只是被编辑的部分和修改 json 文件的 php 文件。

对此的任何投入都会非常有帮助。

到目前为止，我已经从头开始 AJAX 浏览了 AJAX PHP JSON，并且对它有很好的了解，但我需要知道的是如何从具有这样格式的 JSON 文件中做到这一点 -

{
    "itemGuitar": {
        "id": "itemGuitar",
        "description": "Pete Townshend once played this guitar while his own axe was in the shop having bits of drumkit removed from it.",
        "price": 5695.99,
        "urls": [
            "thewho",
            "Pete_Townshend"
        ]
    },
    "itemShades": {
        "id": "itemShades",
        "description": "Yoko Ono's sunglasses. While perhaps not valued much by Beatles fans, this pair is rumored to have been licked by John Lennon.",
        "price": 258.99,
        "urls": [
            "beatles",
            "johnlennon",
            "yoko-ono"
        ]
    },
    "itemCowbell": {
        "id": "itemCowbell",
        "description": "Remember the famous \"more cowbell\" skit from Saturday Night Live? Well, this is the actual cowbell.",
        "price": 299.99,
        "urls": [
            "Saturday_Night_Live",
            "More_cowbell"
        ]
    },
    "itemHat": {
        "id": "itemHat",
        "description": "Michael Jackson's hat as worn in the \"Bille Jean\" video. Not really rock memorabilia, but it smells better than Slash's tophat.",
        "price": 1699.99,
        "urls": [
            "abc",
            "def"
        ]
    }
}

我需要帮助来获取使用 ajax 编辑的数据，使用 php 在 json 中修改它并使用 ajax 再次将数据加载到网页中。

这个json保存在一个文件中。

提前致谢！！

高拉夫纳加尔

到目前为止的 HTML 是——

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test HTML to save content editable on the go!!</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
  function sendData () {
    var val = document.getElementById('editMe').innerHTML;

    var cuenta = new Object();
       cuenta.editMe     = val;

    $.ajax({
         type: 'post'
       , url: '/processDataFilePHP.php'
       , dataType: 'json'
       , data: { cuenta: editMe }
       });

  }
</script>
</head>
<body>
<h1 id="editMe" contenteditable="true">Hurray!!!</h1>
<button id="save" type="submit" onclick="sendData()">Save</button>
</body>
</html>

我还想知道如何交换保存在 json 中并由 php 返回的新测试。

4

1 回答 1

1

好的，有两个不同的问题：从 PHP 发送 Json 数据，以及从客户端获取 PHP 中的 Json 数据。

从 PHP 发送 Json 数据

要获取您的 json 数据，您应该以 PHP 可以理解的方式编写并发送。因此，对 json 数据的重写将是：

PHP jsonConfig.php

$var = array(
   'itemGuitar' => array(
        "id" => "itemGuitar",
        "description"=> "Pete Townshend once played this guitar while his own axe was in the shop having bits of drumkit removed from it.",
        "price" => 5695.99,
        "urls" => array(
            "thewho",
            "Pete_Townshend"
        )
    ),
    "itemCowbell" => array(
        "id" =>  "itemCowbell",
        "description"=> "Remember the famous \"more cowbell\" skit from Saturday Night Live? Well, this is the actual cowbell.",
        "price"=> 299.99,
        "urls"=> array(
            "Saturday_Night_Live",
            "More_cowbell"
        )
    ),
    "itemHat"=> array(
        "id"=> "itemHat",
        "description"=> "Michael Jackson's hat as worn in the \"Bille Jean\" video. Not really rock memorabilia, but it smells better than Slash's tophat.",
        "price"=> 1699.99,
        "urls"=> array(
            "abc",
            "def"
        )
    )
);

echo json_encode($var);

这样，当您调用 jsonConfig.phpp 时，您将获得 json。如果您可以通过这种方式在 PHP 文件中获取数据，那将是完美的，如果没有，您将不得不从这种方式解析为 PHP 方式（使用 'array()' 而不是 '{}' 来分组数据和 '=>' 而不是 ':' 来编写索引。

更新输出 Json 文件

如果你不想转换文件（因为你真的只有一个json格式的文件），你也可以用Nowdoc（PHP 5.3）或Heredoc字符串（较低的PHP版本）输出数据，以避免双重和简单的问题引号（在http://www.php.net/manual/en/language.types.string.php查看更多信息）：

$str = <<<'EOD'
{
    "itemGuitar": {
        "id": "itemGuitar",
        "description": "Pete Townshend once played this guitar while his own axe was in the shop having bits of drumkit removed from it.",
        "price": 5695.99,
        "urls": [
            "thewho",
            "Pete_Townshend"
        ]
    },
    "itemShades": {
        "id": "itemShades",
        "description": "Yoko Ono's sunglasses. While perhaps not valued much by Beatles fans, this pair is rumored to have been licked by John Lennon.",
        "price": 258.99,
        "urls": [
            "beatles",
            "johnlennon",
            "yoko-ono"
        ]
    },
    "itemCowbell": {
        "id": "itemCowbell",
        "description": "Remember the famous \"more cowbell\" skit from Saturday Night Live? Well, this is the actual cowbell.",
        "price": 299.99,
        "urls": [
            "Saturday_Night_Live",
            "More_cowbell"
        ]
    },
    "itemHat": {
        "id": "itemHat",
        "description": "Michael Jackson's hat as worn in the \"Bille Jean\" video. Not really rock memorabilia, but it smells better than Slash's tophat.",
        "price": 1699.99,
        "urls": [
            "abc",
            "def"
        ]
    }
}
EOD;

从客户端获取数据

关于从客户端获取数据，如果您使用 json 方式发送数据，比如说 jquery，您只需要使用 json_decode 函数捕获它们。我是说：

文件编辑.php

<script>
   //Data to be sent
   var cuenta = new Object();
       cuenta.red     = 'Facebook';
       cuenta.tipo    = 'UserAccount';
       cuenta.cuenta  = '11002032030100202120';

       $.ajax({
         type: 'post'
       , url: '/processDataFilePHP.php'
       , dataType: 'json'
       , data: { cuenta: cuenta }
       });
</script>

处理数据文件PHP.php

$postear = (array) json_decode($_POST['cuenta']);
// For seeing the received data:
print_r($postear);

通过这种方式，您将从应用程序中获取数据，并且使用 $.ajax 函数，您可以更改编辑和获取数据的方式。

我认为这可能很有用，如果您有更多限制，请告诉我什么，我们将尝试解决，;)

于 2013-05-22T07:45:00.253 回答