json实现前后台的相互传值详解_json-js教程-PHP中文网QQ群微信公众号还没有收藏json实现前后台的相互传值详解_json前后台的相互传值如果值太多，写的麻烦累人，且容易出错。这里整理出一套使用标记 标签属性的办法来传值， 后台取值和前台的绑定都有了大大的简化。
一、把json对象转成字符串
$.extend({
//将json对象转换成字符串
[貌似jquery没有自带的这种方法]
toJSONString: function (object) {
if (object == null)
var type =
if ('object' == type) {
if (Array == object.constructor) type = 'array';
else if (RegExp == object.constructor) type = 'regexp';
else type = 'object';
switch (type) {
case 'undefined':
case 'unknown':
case 'function':
case 'boolean':
case 'regexp':
return object.toString();
case 'number':
return isFinite(object) ? object.toString() : 'null';
case 'string':
return '"' + object.replace(/(, ", function () {
var a = arguments[0];
return (a == '\n') ? '\\n' : (a == '\r') ? '\\r' : (a == '\t') ? '\\t' : ""
case 'object':
if (object === null) return 'null';
var results = [];
for (var property in object) {
var value = $.toJSONString(object[property]);
if (value !== undefined) results.push($.toJSONString(property) + ':' + value);
return '{' + results.join(',') + '}';
case 'array':
var results = [];
for (var i = 0; i & object. i++) {
var value = $.toJSONString(object[i]);
if (value !== undefined) results.push(value);
return '[' + results.join(',') + ']';
二、创建数据容器对象 [用来绑定要传给后台的前台控件值]
var DataClass = {
create: function () {
return function () {
this.MyInit.apply(this, arguments);//创建对象的构造函数
//arguments 参数集合
系统名称 不能写错
var MyDataPack = DataClass.create();
MyDataPack.prototype = {
MyInit: function (url, operation, params) {
this.data = new Object();
//所有数据容量
var bdata = new Object();
bdata.url =
bdata.operation =//操作
bdata.params =
this.data.BasicData = //基本数据
//添加数据 如：addValue("obj", "111");
addValue: function (p, obj) {
this.data[p] =
//取得 所有标记控件的值 并写入数据
getValueSetData: function (togName) {
var values = Object(); //值的集合
$("[subtag='" + togName + "']").each(function () {
//如果是input 类型 控件
if (this.localName == "input") {
//如果是text 控件
if (this.type == "text" || this.type == "hidden") {
values[this.id] = this.
else if (this.type == "...") {
else if (this.localName == "...") {
//................
this.data[togName] =//添加到数据集合
//取值 如：getValue("BasicData")
getValue: function (p) {
return this.data[p];
//获取或设置url
getUrl: function (url) {
this.data.BasicData["url"] =
return this.data.BasicData["url"];
//取值 转成字符串的对象 数据
getJsonData: function () {
return $.toJSONString(this.data);
三、创建绑定前台数据对象 [用来读取后台传过来的值，并绑定到前台页面]
var MyDataBinder = {
//绑定数据到 控件 data：数据 tag：标签
Bind: function (data, Tag) {
var MJson = $.parseJSON(data);
//只绑定 标记 了的 标签
$("[bindtag='" + Tag + "']").each(function () {
if (this.localName == "input") {
if (MJson[this.id]) //如果后台传了值
$(this).attr("value", MJson[this.id]);
else if (this.localName == "...") {
四、使用示例
前台html：
&th&一&/th&
&th&二&/th&
&th&三&/th&
&td id="td1"&&input type="text" id="inp_1" subtag="subtag" bindtag="bind" /&&/td&
&td id="td2"&&input type="text" id="inp_2" subtag="subtag" value="我只是测试一下下" /&&/td&
&td&&input type="text" id="inp_3" subtag="subtag" bindtag="bind" /&&/td&
//====================使用示例======================================
var MyDataPack = new MyDataPack("Handler1.ashx", "CESHI", "");
MyDataPack.getValueSetData("subtag");//将控件数据写入对象
“subtag”为要取 控件 值 的标签
//-------------------传前台值到后台---------------
$.post(MyDataPack.getUrl(), MyDataPack.getJsonData(), function (data) {
//-------------------绑定后台值到前台-----------------
MyDataBinder.Bind(data, "bind");
//"bind" 为 要绑定控件的 标签
public void ProcessRequest(HttpContext context)
context.Response.ContentType = "text/plain";
//====================取前台值=============================================
//因为后台传过来的是 json对象 转换后的字符串
所以 所有数据都 做为一个参数传过来了
var values = context.Request.Form[0];
//需要引入程序集System.Web.Extensions.dll
JavaScriptSerializer _jsSerializer = new JavaScriptSerializer();
//将 json 对象字符串
转成 Dictionary 对象
Dictionary&string, Dictionary&string, string&& dic = _jsSerializer.Deserialize&Dictionary&string, Dictionary&string, string&&&(values);
//现在 dic 里面就包含了 所有前台传过来的值 想怎么用 就怎么用了。
string inp_2 = dic["subtag"]["inp_2"];//这样就直接取到了前台 页面 id为 inp_2 的 控件value 值
//=====================传值到前台============================================
Dictionary&string, string& dic2 = new Dictionary&string, string&();
dic2.Add("inp_1", "修改1");//这里只用对应控件id 传值即可
dic2.Add("inp_2", "修改2");
dic2.Add("inp_3", "修改3");
context.Response.Write(_jsSerializer.Serialize(dic2));
小伙伴们对使用json实现前后台传值是否了解清楚了呢，有问题的话，就给我留言吧共3篇429点赞收藏分享：.&猜你喜欢PHP中文网：独家原创，永久免费的在线，php技术学习阵地！
All Rights Reserved | 皖B2-QQ群:关注微信公众号PHP服务端和Java客户端之间对Json数据解析的那点破事 - TestFuture's space - 51Testing软件测试网 51Testing软件测试网-中国软件测试人的精神家园
自由、变革、分享！
PHP服务端和Java客户端之间对Json数据解析的那点破事
& 12:20:04
/ 个人分类：
& &&针对接口定义返回数据Json中data为{ }，返回是[ ]的问题，这两天了下PHP如何去encode生成Json字符串。&&&看了服务端开发这边使用的Yii框架中的CJSON.php里的function
encode($var)，具体代码见下面链接：&&&&&代码里面对PHP中的array()变量encode是这样如下：&&& case 'array':&&& &&//treat as a JSON object&&& && if (is_array($var) &&
count($var) && (array_keys($var) !== range(0, sizeof($var) - 1))) {&&& &&&&&&&&&
return '{' .&&&
&&&&&&&&&&&&&&&&
&&&join(',', array_map(array('CJSON', 'nameValue'),&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&array_keys($var),&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&array_values($var)))&&& &&&&&&&&&&&&&&&&
&&&. '}';&&& && }&&&&&&& //（位置1）&&& &&//treat it like a regular array&&& && return '[' . join(',',
array_map(array('CJSON', 'encode'), $var)) . ']';&&&然后看了下服务端开发这边对返回json中的data的定义均为array()。接着了解了下PHP中的array()，这个类型貌似是中的Map和List的集合体，非常强大。&&&下面是对data两个举例：&&&
$data=array("a"=&"Dog","b"=&"Cat","c"=&"Horse");&
&&&&//类似于java中的Map&String,String&&&&
$data=array("Dog","Cat","Horse");&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&//类似于java中的List&String&&&&当使用Yii框架中的CJSON去encode上面两个array时，就会生成两种Json结果，分别是：&&&前者treat as a
JSON object对应是：&&&&
&&&{"a":"Dog","b":"Cat","c":"Horse"}&&&后者treat it
like a regular array对应是：["Dog","Cat","Horse"]&&&这两个Json字符串在java里显然需要两个不同类型的变量去直接获取数据。可用Map和List分别去解析。&&&综述，PHP是一种松散类型语言，不必向PHP声明该变量的数据类型，但是Java在使用变量之前，首先要申明变量类型，也就说变量类型确定了，就不能变化，比如说返回的data，同一个变量PHP可以有以上两种方式定义，Java则需要定义两个类型的data。&&&所以在返回数据时，可能需要服务端对Java的数据类型做下兼容，变量的类型需要固定下。&&&&最后，回到主题，对于服务端返回数据中data没有数据时，就是一个空的array()，空的array()在生产Json时就会用treat it like a regular array对应的方法。如果修改下Yii框架的函数encode($var)，在上面位置1处加以下代码（由于不会PHP，不知语法是否正确）：&&& if (count($var)==0){&&&&&&& return 'null';&&& }&&&无论array()具体格式是什么样子，只要为空，就返回null，这样子至少Java在解析返回数据的时候，就不会报错。&&&当然这种做法是会对服务端的性能产生点影响，就是原本定义为[ ]的data都会增加一个判断。没有找到方法去，如果可以也请高手们去做下性能的比较。&&以上纯属个人见解，有问题的地方，请回复下。另外一些个人的感受，虽然了解不多，PHP是一门强大的语言，用起来实在方便，可以方便的看到开发人员的代码，进行学习。另外也要感谢开源世界给我们带来了很多的免费使用的框架，让我们可以任意修改框架源码。当然还有一点就是任何框架都不能满足自己业务的需要，有必要对框架做些修改，也不能说框架出来的东西也不一定就是正确的，满足需求的。用户名：lppoint
文章数：45
访问量：7474
注册日期：
阅读量：1297
阅读量：3317
阅读量：455575
阅读量：1140183
51CTO推荐博文
php代码&?php//json与数组转换$array = array("username" =& "hellojson","age" =& 23,"sex"=&"M");//定义php数组 &&$res=json_encode($array);//var_dump($res);echo $//将结果输出到页面?&HTML代码&html&&head&&title&&/title&&script src="jquery-1.11.0.min.js"&&/script&&/head&&body&&script type="text/javascript"&$(function(){$(document).on("click",'.test',function(){var id=$(this).attr("id");var data={id:id}//var aaa=[{"0":"1","id":"1","1":"hello","name":"hello","2":"","password":""},{"0":"2","id":"2","1"// :"world","name":"world","2":"","password":""},{"0":"3","id":"3","1":"helloworld","name":"helloworld"// ,"2":"","password":""}]// alert(aaa[2].name)$.ajax({type:"GET",data:data,url:'xml.php',dataType:"json",success:function(msg){if(msg){var res=eval(msg);//在php中返回的数据如果不能直接使用可以转换一下，使用eval（）函数可以实现转化。//alert(res.username)alert(res[1].name)//弹出要取的数据 & & & & & & //console.log(res) & & & &}}});})})&/script&&div class="test" id="1"&&input type="button" value="button"&&/div&&div class="getmsg"&&/div&&/body&&/html&在原生js中还可以使用JSON.parse（）函数来转为json格式，在php中已经转化为json格式了可以直接获取alert(msg[0].name)//msg为返回的json格式下图为返回的数据可以根据格式来直接取值，注意返回格式有一个中括号，可以使用索引方式取数据本文出自 “” 博客，请务必保留此出处
了这篇文章
类别：┆阅读(0)┆评论(0)
14:07:09 14:36:56thinkphp后台发送的json，前台的js里怎么接收？ - ThinkPHP框架
php代码，已经把$list转化为jsonclass&GuanliAction&extends&Action&{
&&&&public&function&index(){
&&&&&&&&$data=D('aa');
&&&&&&&&$list&=&$data-&select();
&&&&&&&&$this-&assign('itemList',json_encode($list));
&&&&$this-&display();
}前台js代码，因为要在js中处理传送过来的“item”数据，添加到已有的json里，可是不能接收传过来的json&&
&&var&data_list&=&[
&&&&&&{&col1:&"normal",&col2:&false},
&&for&(var&i&=&0;&i&&&itemList.&i++)&{
&&&&&&var&item&=&{};
&&&&&&item["col1"]&=&itemList[i].col1;
&&&&&&item["col2"]&=&itemList[i].col2;
&&&&&&data_list.push(item);
victoryboss
ThinkPHP 是一个免费开源的，快速、简单的面向对象的 轻量级PHP开发框架 ，创立于2006年初，遵循Apache2开源协议发布，是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则，在保持出色的性能和至简的代码的同时，也注重易用性。并且拥有众多的原创功能和特性，在社区团队的积极参与下，在易用性、扩展性和性能方面不断优化和改进，已经成长为国内最领先和最具影响力的WEB应用开发框架，众多的典型案例确保可以稳定用于商业以及门户级的开发。php+js+ajax+json跨平台传递数据&以及PHP工作原理
1.浏览器通过HTML表单或超链接请求指定服务器上一个CGI应用程序的URL。　
2.服务器收到请求。　
3.服务器执行所指定的CGI应用程序。　
4.CGI应用程序执行所需要的操作，通常是基于浏览者输入的内容。　
5.CGI应用程序把结果格式化为网络服务器和浏览器能够理解的文档（通常是HTML网页）。　
6.网络服务器把结果返回到浏览器中。
PHP文件json.php输出JSON值为：
{"admin":["1","admin","http:\/\/localhost\/ucenter_utf_8\/data\/avatar\/000\/00\/00\/01_avatar_small.jpg"],"lost_year":["2","lost_year","http:\/\/localhost\/ucenter_utf_8\/data\/avatar\/000\/00\/00\/02_avatar_small.jpg"]}
首先应该用AJAX接受JSON的值。JS代码如下，定义一个shouHint函数，将JSON的值接收，并用:json=eval_r("("+xmlhttp.responseText+")");解析JSON函数，然后分别将JSON的值传递给ID为：username，userid，userimg
LANGUAGE="JavaScript"&
function showHint()
var name1="lost_year";
var name2="admin";
if (window.XMLHttpRequest)
& {// code for
IE7+, Firefox, Chrome, Opera, Safari
& xmlhttp=new
XMLHttpRequest();
& {// code for
& xmlhttp=new
ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange=function()
(xmlhttp.readyState==4 &&
xmlhttp.status==200)
json=eval_r("("+xmlhttp.responseText+")");
document.getElementByIdx_x_x_x_x("username").innerHTML=json.admin[0];
document.getElementByIdx_x_x_x_x("userid").innerHTML=json.admin[1];
document.getElementByIdx_x_x_x_x("userimg").innerHTML=json.admin[2];
//上面的怎么多了个"_x"？？？
xmlhttp.open("GET","http://localhost/uchome_utf_8/space.php?do=rtuser&type=user&names=lost_year,admin",true);
xmlhttp.send();
最后html代码为：
&meta http-equiv="Content-Type"
content="text/ charset=utf-8" /&
&title&异步json例子&/title&
&SCRIPT LANGUAGE="JavaScript"&
function showHint()
var name1="lost_year";
var name2="admin";
if (window.XMLHttpRequest)
& {// code for IE7+, Firefox, Chrome, Opera,
& xmlhttp=new XMLHttpRequest();
& {// code for IE6, IE5
& xmlhttp=new
ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange=function()
& if (xmlhttp.readyState==4
&& xmlhttp.status==200)
json=eval_r("("+xmlhttp.responseText+")");
document.getElementByIdx_x_x_x_x("username").innerHTML=json.admin[0];
document.getElementByIdx_x_x_x_x("userid").innerHTML=json.admin[1];
document.getElementByIdx_x_x_x_x("userimg").innerHTML=json.admin[2];
xmlhttp.open("GET","json.php?do=rtuser&type=user&names=lost_year,admin",true);
xmlhttp.send();
onclick="showHint()"&test&/button&&BR&
admin：&span id="username"
style="color:#6600CC"&点击test按钮获取数据&/span&&BR&
admin：&span id="userid"
style="color:#6600CC"&点击test按钮获取数据&/span&&BR&
admin：&span id="userimg"
style="color:#6600CC"&点击test按钮获取数据&/span&&BR&
lost_year：&span id="lost_year"
style="color:#CC6633"&点击test按钮获取数据&/span&&BR&
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。