通過 html 讀寫 json，不帶 php

Question

我能夠成功運行它。 我很想在不使用 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}]

Answer 1

只是 javascript 永遠無法做到這一點，對於這種情況，您必須使用 javaScript 和 php。

你需要使用 XHR

步驟 1 -> 使用 php 代碼將文件保存過程作為后端處理。 第 2 步 -> 為按鈕創建一個方法來點擊 xhr 代碼以執行 set1 文件代碼

這里我們 go

步驟1

創建名為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 方法單擊以運行savingJson.php使用 javaScript


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);
}

希望這會對您有所幫助，快樂編碼！

通過 html 讀寫 json，不帶 php

問題描述

1 個解決方案

解決方案1
1 2021-03-06 07:46:07

通過 html 讀寫 json，不帶 php

問題描述

1 個解決方案

解決方案1 1 2021-03-06 07:46:07

解決方案1
1 2021-03-06 07:46:07