首先ajax读取服务器json文件获取json内容总数。
先说添加内容:ajax将json内容总数+1作为自增id以及input框中内容传给dujson.php。
php新建数组,将接受到的内容及id放进去,转换成json格式写入json文件。
下面是参考文章
php操作json文件
PHP处理JSON数据
前端在html页面与html页面中参数的传递方法
php 数组 array_search,php array_search()函数的使用详解
$origin = json_decode(file_get_contents('s.json'), true);
//在数组里添加内容
$origin[] = array(
'id' => $zs,
'name' => $user,
'where'=>$where,
);
// 再把PHP数组转为JSON字符串
$json = json_encode($origin);
// 写入文件
file_put_contents('s.json', $json);
然后是修改:点击需要修改的行超链接,将id传给gai.html。gai.html中的ajax将修改的内容及id传给xiugai.php。xiugai.php收到数据后先读取服务器json文件,然后转化成php数组后进行遍历,
foreach ($data as $item){
echo $item['id'];
if($item['id']==$xiugaiid){
$index = array_search($item, $data);
echo $item['where'];
echo $item['name'];
//$item['name']=$xiun;
//$item['where']=$xiuw;
echo "yes----",$index,"...";
$data[$index]['id']=$xiugaiid;
$data[$index]['name']=$user;
$data[$index]['where']=$where;
$json = json_encode($data);
file_put_contents('s.json', $json);
如果找到需要修改的id后
$index = array_search($item, $data);
$data[$index]['id']=$xiugaiid;
用array_search找出是第几个数组,将这个json内容进行修改,最后重新将整个数组转成json,写进服务器json文件中。
下面是完整代码
s.json
[{"id":"1","name":"\u82f9\u679c","where":"\u5e8a"},{"id":"2","name":"4","where":"4"},{"id":"3","name":"\u68a8","where":"\u95e8\u53e3"}]
du.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<title>ServletJson</title>
</script>
<style>
body {
background-color:#a9e3ee;
}
table{border:1px solid black;font-size:60px;}
table tr:nth-child(odd)
{
background: #ccc;
}
/*设置偶数行颜色*/
table tr:nth-child(even)
{
background: #a9e6ee;
}
tr{border:1px solid black;}
td{border:1px solid black;}
</style>
<head runat="server">
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var zongshu;
$.ajax({
url: "s.json",//同文件夹下的json文件路径
type: "GET",//请求方式为get
dataType: "json", //返回数据格式为json
success: function (data) {//请求成功完成后要执行的方法
//data.push(cc);
//var c=eval("("+data+")");
console.log(data);
zongshu=data.length;
//console.log(c);
for (var i=0;i<data.length;i++){
var na=data[i].name;
var wh=data[i].where
var id=data[i].id;
var text = document.createTextNode("物品名称——————"+na);
var text1 = document.createTextNode("放在哪里——————"+wh);
var tr = document.createElement("tr");
var tr1 = document.createElement("tr");
var td = document.createElement("td");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
var td4 = document.createElement("td");
td.innerHTML="物品名称";
td4.innerHTML='<a href="gai.html?id='+id+'"">物品id'+id+'</a>';
td1.innerHTML=na;
td2.innerHTML="放在哪里";
td3.innerHTML=wh;
var tb=document.getElementById("tb");
//var p=document.createElement("p");
//var p1=document.createElement("p");
//p.innerHTML="物品名称:"+na;//(text);
//p1.innerHTML="放在哪里:"+wh;//(text);
tr.appendChild(td);//cd2后添加的div加载p标签
tr.appendChild(td2);//cd2后添加的div加载p标签
tr.appendChild(td4);//cd2后添加的div加载p标签
tr1.appendChild(td1);//cd2后添加的div加载p标签
tr1.appendChild(td3);//cd2后添加的div加载p标签
tb.appendChild(tr);//cd2后添加的div加载p标签
tb.appendChild(tr1);//cd2后添加的div加载p标签
//div.appendChild(p1);
console.log(na,wh);
}
}
})
//var sz=[];
function gai(p){
console.log(p)
var na=$("#name").val();
var wh=$("#where").val();
sz.push({name:na,where:wh});
$.ajax({
url: "s.json",//同文件夹下的json文件路径
type: "GET",//请求方式为get
dataType: "json", //返回数据格式为json
success: function (data) {//请求成功完成后要执行的方法
//data.push(cc);
//sz.push(data);
//console.log(sz);
}
})
}
function tj(){
var na=$("#name").val();
var wh=$("#where").val();
console.log(na,wh,zongshu);
//var dataString = JSON.stringify(sz);
//console.log(dataString);
$.ajax({
type: "post", //get or post 个人感觉post安全很多
url: "dujson.php", // 目的url
dataType: "json", //数据类型 可以有很多种
//data: {s:dataString}, //传输的数据 在验证文件接受
data:{name:na,where:wh,zsd:zongshu},
success: function(res){ //请求成功后的回调函数
console.log(res);
console.log("输出");
}
});
}
</script>
</head>
<body>
<form method="post" action="">
<div>物品名称
<input type="text" id="name" name="name" />
放在哪里
<input type="text" id="where" >
<input type="submit" id="button" value="form" />
</div>
</form>
<button type="button" onclick="tj()">ajax</button>
<button type="button" onclick="zs()">zs</button>
<div id="main">
<table id="tb">
</table>
</div>
</body>
</html>
dujson.php
<?php
// 从文件中读取数据到PHP变量
$user = $_POST['name'];
$where =$_POST['where'];
$zs =$_POST['zsd'];
$id=$zs+1;#加一是因为整个json大小总数从一开始,加一是为了id自增
$s=array("ok"=>"cc");
$s['c']=$user;
$s['a']=$where;
$s['d']=$zs;
echo json_encode($s);
function c($cd){
echo $cd;
$constans =file_get_contents('s.json');
// 把JSON字符串转成PHP数组
$data=json_decode($constans,true);
//用var_dump() 显示出来看看
var_dump($data);
echo '<br><br>';
//foreach读取所有
foreach ($data as $item){
//echo $item['id'];
echo $item['name'];
}
echo '<br><br>';
//读取具体内容,读取第一个name
echo $data[0]['name'];}
$d=0;
//c($d);
function xieru($zs,$user,$where){
$origin = json_decode(file_get_contents('s.json'), true);
//在数组里添加内容
$origin[] = array(
'id' => $zs,
'name' => $user,
'where'=>$where,
);
// 再把PHP数组转为JSON字符串
$json = json_encode($origin);
// 写入文件
file_put_contents('s.json', $json);
}
xieru($id,$user,$where);
?>
gai.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<title>ServletJson</title>
</script>
<style>
body {
background-color:#a9e3ee;
}
table{border:1px solid black;font-size:60px;}
table tr:nth-child(odd)
{
background: #ccc;
}
/*设置偶数行颜色*/
table tr:nth-child(even)
{
background: #a9e6ee;
}
tr{border:1px solid black;}
td{border:1px solid black;}
</style>
<head runat="server">
<title></title>
</head>
<body>
<form method="post" action="">
<div>物品名称
<input type="text" id="name" name="name" />
放在哪里
<input type="text" id="where" >
<input type="submit" id="button" value="form" />
</div>
</form>
<button type="button" onclick="tj()">ajax</button>
<button type="button" onclick="zs()">zs</button>
<div id="main">
</body>
</html>
<script type="text/javascript">
//在页面初始化的时候 读取url请求中的数据 解析到数据 并赋值到全局变量中
var id;
$(document).ready(function() {
var param=window.location.href.split("=")[1];
console.log(param);
id=param;
});
function tj(){
var na=$("#name").val();
var wh=$("#where").val();
console.log(na,wh,id);
//var dataString = JSON.stringify(sz);
//console.log(dataString);
$.ajax({
type: "post", //get or post 个人感觉post安全很多
url: "xiugai.php", // 目的url
dataType: "json", //数据类型 可以有很多种
//data: {s:dataString}, //传输的数据 在验证文件接受
data:{name:na,where:wh,zsd:id},
success: function(res){ //请求成功后的回调函数
console.log(res);
console.log("输出");
}
});
}
</script>
xiugai.php
在<?php
// 从文件中读取数据到PHP变量
$user = $_POST['name'];
$where =$_POST['where'];
$xiun="c";
$xiuw="c";
$xiugaiid =$_POST['zsd'];
//$id=$zs+1;#加一是因为整个json大小总数从一开始,加一是为了id自增
$s=array("ok"=>"cc");
$s['c']=$user;
$s['a']=$where;
$s['d']=$zs;
//$xiugaiid=3;
$constans =file_get_contents('s.json');
// 把JSON字符串转成PHP数组
$data=json_decode($constans,true);
echo $data[0]['id'];
function e($xiugaiid,$user,$where){
$constans =file_get_contents('s.json');
// 把JSON字符串转成PHP数组
$data=json_decode($constans,true);
//用var_dump() 显示出来看看
//var_dump($data);
//echo '<br><br>';
//foreach读取所有
foreach ($data as $item){
echo $item['id'];
if($item['id']==$xiugaiid){
echo $item['where'];
echo $item['name'];
$index = array_search($item, $data);
//$item['name']=$xiun;
//$item['where']=$xiuw;
echo "yes----",$index,"...";
$data[$index]['id']=$xiugaiid;
$data[$index]['name']=$user;
$data[$index]['where']=$where;
$json = json_encode($data);
file_put_contents('s.json', $json);
}
else{
echo "no----";
}
}
}
e($xiugaiid,$user,$where);
echo json_encode($s);
function c(){
$origin = json_decode(file_get_contents('s.json'), true);
//在数组里添加内容
$origin[] = array(
'id' => $zs,
'name' => $user,
'where'=>$where,
);
// 再把PHP数组转为JSON字符串
$json = json_encode($origin);
// 写入文件
file_put_contents('s.json', $json);
}
?>