Javascript 在不使用php的情况下通过html读写json_Javascript_Php_Html_Json

Javascript 在不使用php的情况下通过html读写json

javascript php html json

Javascript 在不使用php的情况下通过html读写json,javascript,php,html,json,Javascript,Php,Html,Json,我能够成功地运行这个。我希望在不使用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); //conv

我能够成功地运行这个。我希望在不使用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>


json测试
简单地说，javascript永远无法做到这一点，在这种情况下，您必须使用javascript和php
您需要使用XHR
步骤1->使用php代码将文件保存过程作为后端处理。
步骤2->为按钮创建一个方法，点击xhr代码以执行set1文件代码
我们开始
步骤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方法以使用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);
}

希望这能帮助你，
快乐编码