ASP.NET中使用JSON方便实现前台与后台的数据交换

一、前台向后台请求数据

在页面加载时,有时需要对一些表单进行初始化,此时可以利用JQuery的 get 函数向后台发起异步请求:

//初始化函数
function initSettings() {
        $.get("?Action=init", function (data) {
            if (data == "NO") {
                alert("初始化失败!");
            }
            else if (data != null && data != undefined) {
                var json = JSON.parse(data);
                setFieldsData(json);
            }
        });
    }
    //填充表单数据
    function setFieldsData(json) {
        $("#userSettings input:text").each(function () {
            $(this).val(json[$(this).attr("name")]);
        });
    }

其中,各表单中含有一个name属性,其值为数据库对应的字段名。 后台的响应如下:

if (Action == "init")
            {
                string json = "{";
                DataSet ds = new DataSet(); // 此处以加载用户信息为例
                ds = DataOperation.DB.Select("select * from USER_USER where USER_ID=" + USER_ID, DataOperation.DB.GetConnType());
                ds.Dispose();
                if (ds.Tables[0].Rows.Count > 0)
                {
                    for (int i = 0; i < ds.Tables[0].Columns.Count; i++)
                    {
                        json +="\"" + ds.Tables[0].Columns[i].ColumnName+"\":\""+ds.Tables[0].Rows[0][i]+"\",";
                    }
                    json = json.Substring(0, json.Length - 1);
                    json += "}";
                    try
                    {
                        Response.Write(json);
                        Response.End();
                    }
                    catch (Exception)
                    {
                    }
                }
                else
                {
                    Response.Write("NO");
                    Response.End();
                }
            }

二、前台向后台提交数据

在表单填好后,保存时需要向后台提交数据,利用JSON 可以很方便的获取各表单数据提交并写入到数据库。前台JS 代码如下:

<pre name="code" class="javascript">$("#saveSettings").click(function () {
            var json = "{";
            $("#userSettings input:text").each(function () {
                json +="\""+$(this).attr("name")+"\":\""+$(this).val()+"\",";  // 获取表单值生成 JSON 格式数据
            });
            json = json.substring(0, json.length - 1);
            json += "}";
            $.post("?Action=save&json=" + json, function (data) {
                if (data == "NO") {
                     alert("保存失败!");
                }
                if (data == "OK") {
                    alert("保存成功!");
                }
            });
        });
 

后台响应代码如下:

if (Action=="save")
            {
                string sqlstr ="update USER_USER set ";
                string json =Request["json"];

                JavaScriptSerializer serializer = new JavaScriptSerializer();
                Dictionary<string, object> data = (Dictionary<string, object>)serializer.DeserializeObject(json);

                foreach (var item in data)
                {
                    sqlstr += item.Key + " = '" + item.Value + "',";
                }
                sqlstr = sqlstr.Substring(0, sqlstr.Length - 1);
                sqlstr += "where USER_ID=" + USER_ID;

                DataSet ds = new DataSet();
                ds = DataOperation.DB.Select("select USER_ID from USER_USER where USER_ID=" + USER_ID , DataOperation.DB.GetConnType());
                ds.Dispose();
                if (ds.Tables[0].Rows.Count>0)
                {
                    try
                    {
                        DataOperation.DB.Execnonsql(sqlstr, DataOperation.DB.GetConnType());
                        Response.Write("OK");
                        Response.End();
                    }
                    catch (Exception)
                    {

                    }
                }
                else
                {
                    Response.Write("NO");
                    Response.End();
                }
            }

上面的代码中,使用了 JavaScriptSerializer 类和 Dictionary 类来解析 JSON 数据,将 JSON 数据解析成字典,方便SQL语句的生成。

ASP.NET中使用JSON方便实现前台与后台的数据交换

时间: 2024-10-01 15:44:45

ASP.NET中使用JSON方便实现前台与后台的数据交换的相关文章

asp.net中利用JSON进行增删改查中运用到的方法

//asp.net中 利用JSON进行操作, //增加: //当点击"增加链接的时候",弹出增加信息窗口,然后,在窗体中输入完整信息,点击提交按钮. //这里我们需要考虑这些:我会进行异步提交,使用jquery中的方法,$.post("网页名",JSON,callback); //JSON的写法:{"name":name,"id":id},那我们对其进行假设,比方说,表单中的textbox很多,需要我们填写的信息 //也很多,

Linxu中命令的执行(前台、后台)

距离上一篇文章已经有半个月的时间了,感觉这段时间对不起自己呀.因为现在我开始学习Java了,以后有时间和大家交流一个学习经验. 今天我要分享的知识是如何建立进程.在Linux中我们应该如何进程呢,让我们好好来探究一下吧. 示例一: 这个例子就是建立了一个后台进程 [[email protected] Desktop]# ping 127.0.0.1& [1] 16885 [[email protected] Desktop]# PING 127.0.0.1 (127.0.0.1) 56(84)

在Vue中使用了Swiper ,动态从后台获取数据的之后,swiper滑动失效??

在Vue中使用了Swiper ,动态从后台获取数据的之后,swiper滑动失效?? 是因为swiper提前初始化了,那时候数据还没有完全出来.这里有两种解决办法 1. 使用vue提供的$nextTick()方法 当Vue构造器里的data值被修改完成后会调用这个方法,也相当于一个钩子函数吧,和构造器里的updated生命周期很像. 在数据初始化完毕之后,再初始化swiper就不会出现问题了 this.$nextTick(function () { var swiper = new Swiper(

2016/4/2 json:js和jquery中轻量级数据交换格式 例: 窗口弹出 popwindow

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C.C++.C#.Java.JavaScript.Perl.Python等).这些特性使JSON成为理想的数据交换语言. 易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络传输速率). JSON 语法是 JavaScript 对象表示语法的子集. 数据在键值对中 数据由逗号分隔

Asp MVC 中处理JSON 日期类型

注:时间有点忙,直接copy 过来的,要查看原址: http://www.developer.com/net/dealing-with-json-dates-in-asp.net-mvc.html Introduction Most of the time, data transfer during Ajax communication is facilitated using JSON format. While JSON format is text based, lightweight a

ASP.NET中TextBox控件设立ReadOnly=&quot;true&quot;后台取不到值

SP.NET中TextBox控件设置ReadOnly="true"H或Enabled=false后台取不到值 当TextBox设置了ReadOnly="true" 后,要是在前台为控件添加了值,后台是取不到的,值为“空”  .    方法一:不设置ReadOnly属性,通过οnfοcus=this.blur()来模拟,如下: <asp:TextBox ID="TextBox1" runat="server" οnfοcu

asp.net中如何使一个button先执行后台的Click再执行javascript的onclick?

可以在后台代码里镶嵌JS 前台写好代码 function xxx() {------} Button事件:protected void button_Click(object sender, EventArgs e){//////前面写后台代码,后面镶嵌JS ClientScript.RegisterStartupScript(Page.GetType(), "", "xxx();", true);ScriptManager.RegisterStartupScrip

怎么在某个控制器中判断程序是否在前台或后台

[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(appHasGoneInForeground:) name:UIApplicationWillEnterForegroundNotification object:nil]; //别忘了删除监听 [[NSNotificationCenter defaultCenter] removeObserver:self]; UIApplicationDidEn

Vue中实现与后台的数据交换(vue-resource)

vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应.(但是目前它已经停止更新了) 1.在vue中安装vue-resource插件 打开vue项目文件夹下的package.json 添加vue-resource版本 再打开src下的main.js文件,import一下vue-resource 然后运行一下vue的项目,项目会提示你下载vue-resource插件,npm install一下即可 2.创建一个新的vue页面,用来测试