javascript - 通过 html 读取和写入 json 而不使用 php
问题描述
我能够成功运行它。我很想在不使用 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 永远无法做到这一点,您必须在这种情况下使用 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 方法以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);
}
希望这会对您有所帮助,快乐编码!
推荐阅读
- karate - 使用 karate-netty 模拟复杂端点的最佳实践
- ios - iOS14 UIDatePicker 有一个偏移量
- python - 顺序算法中的 Dask Iteration 比前一个要长
- processing - 如何调试处理中的平滑颜色变化?
- swift - Xcode Swift,访问内部数据
- date - Stata:两个日期之间的月数
- javascript - 如何将带有单个输入的日期范围添加到 react-datepicker
- javascript - 分离成新组件时无法渲染 Vue 组件
- sql - sql从另一个表应用多个过滤器
- javascript - 从最喜欢到最不喜欢对我的旅行进行排序