Movatterモバイル変換


[0]ホーム

URL:


codecamp

ASP.NET(AJAX+JSON)实现对象调用

客户端 

代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ASP.NETA_JAX.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/jscript"> function CallServer() { //JSON发送对象 ServerSum("{name:'linyijia',age:'21'}"); } function GetRegister(rg, contex) { document.getElementById("TxtRegister").value=rg; } </script> </head> <body> <form runat="server"> <div> <br /> 用户名:<input type="text" /> <br /> 服务器:<input type="text" /><br /> <button type="button">登录</button> </div> </form> </body> </html>

服务器

代码如下:
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.Script.Serialization; public partial class _Default : System.Web.UI.Page ,ICallbackEventHandler { Users u = null; protected void Page_Load(object sender, EventArgs e) { //回调GetRegister方法 string CallBackFun = Page.ClientScript.GetCallbackEventReference(this,"arg","GetRegister","context"); //创建ServerSum方法,在客户端调用的时候就,会回调GetRegister方法,把参数传给RaiseCallbackEvent(string eventArgument ),最后通过 //GetCallbackResult()方法把返回值传给客户端 string RegisterFun = string.Format("function ServerSum(arg,context){{{0};}}",CallBackFun); Page.ClientScript.RegisterClientScriptBlock(this.GetType(),"ServerSum",RegisterFun,true); } string mssage = string.Empty; #region ICallbackEventHandler 成员 public string GetCallbackResult() { return "服务器:你好,你的用户名为:" + u.Name + "你的年龄为" + u.Age; } public void RaiseCallbackEvent(string eventArgument) { JavaScriptSerializer js = new JavaScriptSerializer(); u =js.Deserialize<Users>(eventArgument); } #endregion }

Users类 

代码如下:
using System; using System.Collections.Generic; using System.Linq; using System.Web; /// <summary> ///User 的摘要说明 /// </summary> public class Users { string name; public string Name { get { return name; } set { name = value; } } string age; public string Age { get { return age; } set { age = value; } } }
原理: 

使用JSON向服务器发送一个对象,服务器通过实现 ICallbackEventHandler接口后,重写GetCallbackResult和RaiseCallbackEvent方法,在回调的时候,在RaiseCallbackEvent方法中反序列化JSON,并在GetCallbackResult把结果返回给客户端.

asp.net中使用jquery+ashx做ajax,json做数据传输

一、准备工作

1.建web应用程序aspnetAjax

2.建index.htm

3.建个js文件夹,把jquery.js放进去,

4.建ajax文件夹,里面放ashx

5.在js文件夹建index.js,一般我们都是一个页面对应一个js

6.在ajax文件夹,建IndexHandler.ashx,一般一个js页面对应一个一般用户控件,这样层次感很强,也很好维护。

二、html页面

html页面就简单了,我们要用ajax读后台做个下拉列表,所以页面就放个DIV就行了。其他的交给js.

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head>    <title>测试</title>    <script src="js/jquery-1.2.3-intellisense.js" type="text/javascript"></script>    <script src="js/index.js" type="text/javascript"></script></head><body>    企业性质<div> </div>    行业类型<div> </div>      </body></html>


编写IndexHandler.ashx代码

代码:

namespace aspnetAjax.ajax{    /// <summary>    /// $codebehindclassname$ 的摘要说明    /// </summary>    public class IndexHandler : IHttpHandler    {        public void ProcessRequest(HttpContext context)        {           context.Response.ContentType = "application/json";           //接收提交过来的meth参数            string meth = context.Request.Params["meth"].ToString();             //根据参数调用不同的方法            switch (meth)             {                case "load":                    loadjson(context);                    break;                case "add":                    add(context);                    break;            }               }        public bool IsReusable        {            get            {                return false;            }        }       //页面加载方法,调用BLL,获得数据         private void loadjson(HttpContext context)         {            //实例BLL            VocaSpecSortBLL vocaSpec = new VocaSpecSortBLL();            BLL.Owner ownerbll = new GYXMGL.BLL.Owner();                          DataSet ds = vocaSpec.GetList("");             DataSet dsindustr = ownerbll.Getcharcte();             //实例一个StringBuilder 用来拼接一个json数据             StringBuilder sbvoca = new StringBuilder();            if (ds != null && ds.Tables[0].Rows.Count > 0)            {                sbvoca.Append("{\"voce\":[");                int i = 1;                int count = ds.Tables[0].Rows.Count;                foreach (DataRow dr in ds.Tables[0].Rows)                 {                    if (i == count)                    {                        sbvoca.Append("{\"code\":\"" + dr[0] + "\",\"name\":\"" + dr[1] + "\"}");                    }                    else                    {                        sbvoca.Append("{\"code\":\"" + dr[0] + "\",\"name\":\"" + dr[1] + "\"},");                    }                    i++;                }                sbvoca.Append("]");            }            if (dsindustr != null && dsindustr.Tables[0].Rows.Count > 0)             {                sbvoca.Append(",\"industr\":[");                int i = 1;                int count = dsindustr.Tables[0].Rows.Count;                foreach (DataRow dr in dsindustr.Tables[0].Rows)                {                    if (i == count)                    {                        sbvoca.Append("{\"code\":\"" + dr[0] + "\",\"name\":\"" + dr[1] + "\"}");                    }                    else                     {                        sbvoca.Append("{\"code\":\"" + dr[0] + "\",\"name\":\"" + dr[1] + "\"},");                    }                    i++;                }                sbvoca.Append("]");            }            sbvoca.Append("}");            context.Response.Write(sbvoca.ToString());                        context.Response.End();        }    }}

我们把index.js改下

代码

$(document).ready(function() {    $.ajax({        type: "POST",        url: "../ajax/NewOwnerHandler.ashx",        //我们用text格式接收        dataType: "text",        data: "meth=load",        success: function(msg) {            alert(msg);            //显示后台数据            $("#vocaspec").html(msg);            // $("#industr").html(industr);        }    });});

看到如下数据,就是ashx中response给我们的json格式数据,现在我们要把这些数据

显示在下拉列表中。就要遍历json中的数组。

代码:

{"voce":[{"code":"1","name":"农林水利"},{"code":"10","name":"军工"},{"code":"11","name":"农林"},{"code":"12","name":"水利(电)"},{"code":"13","name":"水电站"},{"code":"14","name":"输变线"},{"code":"15","name":"煤矿"},{"code":"16","name":"气田"},{"code":"17","name":"公路"},{"code":"18","name":"铁路"},{"code":"19","name":"民航"},{"code":"2","name":"能源"},{"code":"20","name":"信息产业"},{"code":"21","name":"化工"},{"code":"22","name":"机械"},{"code":"23","name":"冶金"},{"code":"24","name":"有色金属"},{"code":"25","name":"建材"},{"code":"26","name":"医药"},{"code":"27","name":"轻工"},{"code":"28","name":"农牧产品深加工"},{"code":"3","name":"交通"},{"code":"4","name":"通讯"},{"code":"5","name":"特色产业"},{"code":"6","name":"城市基础设施"},{"code":"7","name":"商贸流通"},{"code":"8","name":"旅游"},{"code":"9","name":"文体卫"}],"industr":[{"code":"1","name":"国有"},{"code":"2","name":"私人"}]}

修改index.js代码,遍历json数据把数据显示成下拉列表

代码:

$(document).ready(function() {    $.ajax({        type: "POST",        url: "../ajax/NewOwnerHandler.ashx",        //json格式接收数据        dataType: "json",        //指点后台调用什么方法        data: "meth=load",        success: function(msg) {             //实例2个字符串变量来拼接下拉列表               var industr = "<select name=\"industr\"><option label=\"---请选择---\"></option>";               var vocaspec = "<select name=\"vocaspec\"><option label=\"---请选择---\"></option>";              //使用jquery解析json中的数据               $.each(msg.voce, function(n, value) {                     vocaspec += ("<option value=\"" + value.code + "\" label=\"" + value.name + "\">");                     vocaspec += ("</option>");                    });                $.each(msg.industr, function(n, value) {                     industr += ("<option value=\"" + value.code + "\" label=\"" + value.name + "\">");                      industr += ("</option>");                   });             industr += ("</select>");             $("#vocaspec").html(vocaspec);            $("#industr").html(industr);        }    });});

这个实例涉及到的知识点

1、使用一般处理程序,接收request。并可以使用response数据

string meth = context.Request.Params["meth"].ToString();

因为一般处理程序

public class IndexHandler : IHttpHandler

他实现IHttpHandler接口

2、json数据格式

3、使用jquery ajax,并用jquery解析json数据。 

jquery中ajax调用json数据的使用说明
JavaScript转换与解析JSON方法实例详解
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录
关于 JSON

JSON 教程

JSON 基础

json格式

JSON 示例

JSON解析

JSON遍历

JSON调用

JSON转换

JSON获取

JSON字符串

JSON数组

关闭

MIP.setData({'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false},'pageFontSize' : getCookie('pageFontSize') || 20});MIP.watch('pageTheme', function(newValue){setCookie('pageTheme', JSON.stringify(newValue))});MIP.watch('pageFontSize', function(newValue){setCookie('pageFontSize', newValue)});function setCookie(name, value){var days = 1;var exp = new Date();exp.setTime(exp.getTime() + days*24*60*60*1000);document.cookie = name + '=' + value + ';expires=' + exp.toUTCString();}function getCookie(name){var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)');return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null;}
[8]ページ先頭

©2009-2025 Movatter.jp