通过 html 读取和写入 json 而不使用 php答案

【问题标题】：Read and write to json via html with out php通过 html 读取和写入 json 而不使用 php
【发布时间】：2021-06-04 18:05:02
【问题描述】：

我能够成功运行它。我很想在不使用 php 的情况下完成同样的事情。主要目标是从 json 文件中更改 sel 的值。下面是我的php代码和json代码。按下按钮时，user.php 会更改 json 文件中 sel 的值。

<?php
$jsonString = file_get_contents('sel.json');  //read contents from json file
$jsondata = json_decode($jsonString, true);             //convert string into json array using this function
if(isset($_POST['button1']))      //if button is pressed?
{
    $jsondata[0]['sel'] = 1;      //initialise data to 1
}
if(isset($_POST['button2']))      //if button is pressed?
{
    $jsondata[0]['sel'] = 2;      //initialise data to 2
}
if(isset($_POST['button4']))      //if button is pressed?
{
    $jsondata[0]['sel'] = 4;      //initialise data to 4
}
if(isset($_POST['button6']))      //if button is pressed?
{
    $jsondata[0]['sel'] = 6;      //initialise data to 6
}

$newJsonString = json_encode($jsondata);     //encode data back 
file_put_contents('sel.json', $newJsonString);      //write into file
?>
<!DOCTYPE html>
<html>
<body>
<p>json testing</p>
<form action="<?php $_SERVER['PHP_SELF'] ?>" method="POST">     
    <button name="button1" onclick="placeorder()"> sel1:place order</button>
    <button name="button2" onclick="cancleorder()">sel2:cancle order</button>
    <button name="button4" onclick="unlockenotdone()">sel4:unlock UV box(notdone)</button>
    <button name="button6" onclick="unlockedone()">sel6:unlock UV box(done)</button>
</form>
<p id="ui"></p>
<script>
    var x = document.getElementById("ui");
    function placeorder() {
        
        console.log(1);
        x.innerHTML = "Your Order has been Placed";
        clear();
    }
    function cancleorder(){
        var usrResponse=confirm('are you sure you want to cancle the order?');
        if(usrResponse==true){
            cancleconfirm();//call function ChangState2()
            }
        }
    function cancleconfirm() {
        console.log(2);
        x.innerHTML = "Your Order has been canceled";
        clear();//call function clear()
    }
    function unlockenotdone(){
    var usrResponse=confirm('The sterilization is not done. Do you still want to unlock the book?');
        if(usrResponse==true){
            console.log(4);
            openconfirm();
        }
    }
    function unlockedone()
    {
        console.log(6);
        openconfirm();
    }
    function openconfirm() {
        x.innerHTML = "The UV book is now unlocked";
        clear();//call function clear()
    }
    function clear()
    {
        setTimeout( function(){x.innerHTML="";}, 5000);
        return false;
    }
    </script>
</body>
</html>

这是 sel.json [{"sel":1}]

【问题讨论】：

标签： javascript php html json

【解决方案1】：

单纯的 javascript 永远无法做到这一点，你必须使用 javaScript 以及 php 来实现这种情况..

你需要使用 XHR

步骤 1 -> 使用 php 代码将文件保存过程作为后端处理。第 2 步 -> 为按钮创建一个方法来点击 xhr 代码以执行 set1 文件代码

我们来了

第一步

创建名为savingJson.php的文件

/* This is savingJson.php file */
/* here file saving code to handle */

  $data = file_get_contents('php://input');

  // define path for file
  $file = $_SERVER['DOCUMENT_ROOT'] . '/sel.json'; 

  // Write the contents back to the file
  file_put_contents($file, $data);

第 2 步

在单击按钮时调用 XHR 方法以使用 javaScript 运行 savingJson.php


var jsonData = '[{"sel":1}]'

// calling method on button click
var button = document.getElementbyId("btn_id")
button.onclick = function(){
    saveJsonToFile(jsonData)
}

function saveJsonToFile(jsonData) {
    var xhr = new XMLHttpRequest();
    var url = 'savingJson.php'        /*path to savingJson.php file*/
    xhr.open("POST", url, true);      /* must be use POST for large data*/
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send(jsonData);
}

希望这会对你有所帮助，快乐编码！

【讨论】：