jQuery提交JSON文件至php网页，保存为文档文件

最新推荐文章于 2024-03-21 10:02:22 发布

原创最新推荐文章于 2024-03-21 10:02:22 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何利用JSON格式提交表单数据并通过PHP保存至服务器。具体步骤包括使用jQuery处理客户端数据、构造JSON字符串、通过POST方法发送数据以及用PHP接收并写入文件。

网页中经常需要将个人填写的信息提交至服务器然后进行保存

这里数据经常采用json格式进行传输

本例就是将客户端数据采用json进行传输至服务器，然后采用PHP将其保存

1、当然是下载jQuery.js文件了，这个去网上搜个2.1的版本就可以了，保存到你的网页目录下，改名为jquery.js；

2、建立一个网页，editachieve.htm，放入如下代码

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<script src="jquery.js"></script>
</head>

<body>

<div  id="userinfo">
 <form> 
    <input type="submit" name="submit" value="提交"> 
	<input type="hidden" id = "jsoninfo" name="jsoninfo">	
</form> 

<script type="text/javascript">

	function SaveAs()
	{
	    var jsonMsgindex = 0;
        var jsonMsg =[{"id":"0","type":"achieve","section":"1","index":"0","name":"show achieve","content":"achieve content"}
                      ];						
		
	  for(var sN = 1;sN < 10;sN++)
	  { 
	    jsonMsgindex++;
		jsonMsg[jsonMsgindex]={ id:jsonMsgindex.toString(), type:"sectiondescription",section:sN.toString(),index:"0",name:"",content:"sectionDescription"};		  
	   
	  }
	  var json_string = JSON.stringify(jsonMsg); 	
	  document.getElementById("jsoninfo").value = json_string;
	}
</script> 

<script> 

$(document).ready(function() {
  $('#userinfo form').submit(function(event) { 
    event.preventDefault(); 
  SaveAs(); 
  var formValues = $(this).serialize(); 
  $.post('savejson.php', formValues, function(data) { 
        //$('#userinfo').html(data); 
		alert(data);
    }); 
  }); 
});

</script> 
</body>
</html>

3、建立savejson.php文件，放在相同目录下，放入如下代码

<?php 
$output = array();  
  $output[] = build_entry(); 
  echo implode("\n", $output); 

 
 
function build_entry() { 
	$data = $_REQUEST['jsoninfo'];
	$json_string = ($data);
	
    // 写入文件
    file_put_contents('userdata.txt', $json_string);
    return $json_string;
  //return $html; 
} 
?>

当点击提交按钮的时候，就会弹出对话框，显示json数据，其实这个数据是从本地传到了服务器，然后服务器再返回来的数据。

同时，目录下面生成了一个userdata.txt的文件，这就是后台PHP页面生成的文件，保存用户上传的json数据。

几个需要注意的地方：

1、传输之前一定要将json数据按格式写好

jsonMsg[jsonMsgindex]={ id:jsonMsgindex.toString(), type:"sectiondescription",section:sN.toString(),index:"0",name:"",content:"sectionDescription"};

整数按照toString()将其转换为字符串；

2、传输之前进行var json_string = JSON.stringify(jsonMsg); 转换；

3、不需要在php里面进行

$json_string = json_encode($data);

否则会出现json文件乱七八糟的。曾经在这儿耽误了整整半天时间。（心在滴血！）