php获取前端ajax数据对服务器json文件进行增改

首先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);
}
?>
 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值