JSONファイルにAJAXまたはPHPを使用してJavaScriptデータを書き込む

私は、テーブル内の人に関する情報を表示する次のコードを持ち、「学習」とラベル付けされたボタンをクリックするとその情報がキー/値型配列に格納されます。指定されたJSONオブジェクトにスプライスされます。JSONファイルにAJAXまたはPHPを使用してJavaScriptデータを書き込む

これはうまくいきますが、JSONオブジェクト自体を保持するファイルを変更したいのですが、これはサーバーサイドのコードを処理する必要があることを意味します。この挿入をJSONオブジェクトに入れて、実際に保存されているテキストファイルを変更するにはどうすればいいですか（開いた場合、新しい情報がそこにあります）

次のように私のコードがある - >

index.htmlを

<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript" src="list.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <title></title> 
</head> 
<body> 
    <table> 
     <tr> 
      <td> 
       <table> 
        <tr><td>Name</td><td class="name">Jenkins</td></tr> 
        <tr><td>Job</td><td class="job">Accountant</td></tr> 
        <tr><td>Size</td><td class="size">Small</td></tr> 
       </table> 
      </td> 
      <td class="description">average joe.</td> 
      <td> 
       <button class="learn">Learn</button> 
      </td> 
     </tr> 
    </table> 


    <script type="text/javascript"> 
     $(".learn").click(function(){ 

     // look at jsonData in list.js and append this element to the items list in the 
     // first element, at the first index without removing any content 
     jsonData[0].items.splice(0, 0, { 
      name: $(this).closest("table").find(".name").text(), 
      job: $(this).closest("table").find(".job").text(), 
      size: $(this).closest("table").find(".size").text(), 
      description: $(this).closest("td").siblings(".description").text() 
     }); 

     // to show that it is properly appending the new information to the existing JSON object 
     console.log(jsonData); 
    }); 
    </script> 

</body> 
</html>

list.js - >

var jsonData = [ 
    { 
    name: "Friends", 
    items: [ 
     { 
     name: "Steve", 
     job: "pro bowler", 
     size: "tall", 
     description: "Steve's my man!" 
     }, 
     { 
     name: "Jessica", 
     job: "HR", 
     size: "average", 
     description: "a dear friend" 
     } 
    ] 
    }, 
    { 
    name: "Co-Workers", 
    items: [ 
     { 
     name: "Martin", 
     job: "my boss", 
     size: "tall", 
     description: "I don't like him" 
     }, 
     { 
     name: "Susan", 
     job: "Intern", 
     size: "average", 
     description: "It's not like I have a crush on her or anything..." 
     } 
    ] 
    } 
]

だから、再び、それはコンソールで見ることができますjsonDataには "jenkins"の情報が追加されています。ただし、テキストファイル自体は変更されず、この追加内容を反映したいと思います。ありがとうございました。

出典

2017-06-18 laroy

JavaScriptを使用してローカルファイルシステム上のファイルを変更することはできません（少なくとも一部のブラウザでは使用できません）。

はJavaScript：

$(".learn").click(function(){ 
    $.ajax({ 
     url: "save.php?action=save", 
     method: "POST", 
     data: { elem: { 
      name: $(this).closest("table").find(".name").text(), 
      job: $(this).closest("table").find(".job").text(), 
      size: $(this).closest("table").find(".size").text(), 
      description: $(this).closest("td").siblings(".description").text() 
     }}, 
     success: function (data){ 
      console.log("Saved!"); 
     } 
    }); 
}

PHP（save.php）：

<?php 
    if (!empty($_REQUEST["action"]) && $_REQUEST["action"] == "save" && !empty($_REQUEST["elem"])){ 
     $data = json_decode(file_get_contents("data.json"), true); 
     $data[0]["items"][] = $_REQUEST["elem"]; 
     file_put_contents("data.json", json_encode($data)); 
    } 
?>

これはちょうど非常に小さな例です私のようなものをお勧めします。さらに、エスケープ、フィールドのチェック、エラー処理、同時更新（複数のクライアント）などに注意する必要がありますが、これを行う方法が示されています。

出典

2017-06-18 18:43:23 Sebastian

これは、ファイル内のすべてのコンテンツを追加された要素で置き換えるように見えます。 – laroy

@laroy上記のコードを更新しました（オブジェクトを配列として扱うために 'json_decode（）'の 'true'を忘れました） – Sebastian

jsonデータを読み込んで自分のウェブサイト上の別のテーブルを読み込むと、 jsonData（上記のコードで表現されています）。あなたの例の "data.json"はlist.jsであると仮定すると、 "var jsonData = ["私はこの置換を克服して、この方法でファイル？ – laroy

JSONファイルにAJAXまたはPHPを使用してJavaScriptデータを書き込む

答えて

関連する問題