您的位置：首页 > Web前端 > JQuery

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

2015-09-16 12:45 656 查看

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

这里数据经常采用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文件乱七八糟的。曾经在这儿耽误了整整半天时间。（心在滴血！）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航