ext异步请求一个aspx/ashx/web service取得数据服务端返回一个json 然后客户端接收并显示

为什么没有人加

于 2019-02-18 15:37:49 发布

阅读量221

点赞数

本文链接：https://blog.csdn.net/hffyyff/article/details/87623939

版权

这篇博客介绍了如何使用EXT与ASP.NET进行数据交互，通过一个简单的例子展示了EXT如何向ASP.NET的HttpHandler发送异步请求获取JSON数据，并在客户端显示。示例中，EXT GridPanel从ASHX处理程序获取数据，数据以JSON格式返回，然后在网页上展示。此外，文章提及实际开发中通常会将JavaScript代码分离到独立的JS文件，并提供了使用ASP.NET不同组件（如Web Service）处理请求的可能性。

摘要由CSDN通过智能技术生成

今天在论坛中有人问ext和asp.net是如何进行交互的,对于一个刚入门的新手来说,这个问题可能会使其比较迷惑,下面我写一个非常简单的例子来说明一下ext如何与asp.net来进行数据交互

Default.htm:

 
  <!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>Untitled Page</title>
    <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
    <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ext/ext-all.js"></script>  
</head>
<body>
<div id="listContainer"></div>
<script type="text/javascript">
var store = new Ext.data.JsonStore({
    url: 'DefaultHandler.ashx?method=getlist',
    root: 'items',
    remoteSort: true,
    fields: [
        'TestName',
        'TestValue'
            ],
    listeners:{
        load: function(store, records, options){
                 grid.render();
        },
        loadexception: function(proxy, options, response){
                Ext.Msg.alert('Load data error!', response.responseText);
        }
    }
});

Ext.onReady(function(){
    Ext.QuickTips.init();
    store.load();
});

var listContainer=Ext.get("listContainer"); 
var grid = new Ext.grid.GridPanel({
    el: 'listContainer',
    width:listContainer.getComputedWidth(),
    autoHeight: true,
    store: store,
    disableSelection: false,
    loadMask: true,
    deferRowRender: false,
    sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
    columns:[
    {
    header: 'name',
    dataIndex: 'TestName',
    sortable: true
    },{
    header: 'value',
    dataIndex: 'TestValue',
    sortable: true
    }]
});

window.onresize=function(){
        grid.setWidth(listContainer.getComputedWidth());
};
function Button1_onclick() {
   //这里简单的来访问一下store中的数据
   alert(store.data.items[0].data.TestName);
   alert(store.data.items[0].data.TestValue);
}

</script>
    <input id="Button1" type="button" value="display" onclick="return Button1_onclick()" />
</body>
</html>

 
 

DefaultHandler.ashx:

 
  <%@ WebHandler Language="C#" Class="DefaultHandler" %>

using System;
using System.Web;
using System.Data;

public class DefaultHandler : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        string str = context.Request.QueryString["method"];
        if (string.IsNullOrEmpty(str))
        {
            context.Response.Write("error!");
            return;
        }

        switch (str)
        { 
            case "getlist":
                GetList(context);
                break;
            //下边还有可以接着写.                  
        }
        context.Response.End();
    }

    public bool IsReusable {
        get {
            return false;
        }
    }

    public void GetList(HttpContext context)
    {
        //这里模拟一个DataTable,实际应用中可能是去数据库里查询数据  
        DataTable dt = new DataTable();
        dt.Columns.Add("TestName", typeof(string));
        dt.Columns.Add("TestValue", typeof(string));
        for (int i = 0; i < 6; i++)
        {
            DataRow dr = dt.NewRow();
            dr["TestName"] = "TestName" + i.ToString();
            dr["TestValue"] = "TestValue" + i.ToString();
            dt.Rows.Add(dr);
        }
        //将一个DataTable中的数据转成json,实际开发中可以用Newtonsoft.Json等  
         //组件将集合类等,方便的转成json对象  
        System.Text.StringBuilder sb = new System.Text.StringBuilder();
        sb.Append("{items: [");
        foreach (DataRow dr in dt.Rows)
        {
            sb.Append("{");
            sb.AppendFormat("TestName:'{0}',TestValue:'{1}'", dr[0], dr[1]);
            sb.Append("},");
        }
        //输出拼成的json  
        context.Response.Write(sb.ToString().Trim(',') + "]}");
    }
}

 
 

例子完了.很容易吧.在实际的开发中往往会把页面中的javascript脚本单独写到一个js文件中.这样会有很多的好处.

本示例中我用ashx(HttpHandler)文件来处理客户端请求,你也可以用aspx,web services等等.

再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow

为什么没有人加

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ext异步请求一个aspx/ashx/web service取得数据服务端返回一个json 然后客户端接收并显示

ext异步请求一个aspx/ashx/web service取得数据服务端返回一个json 然后客户端接收并显示
复制链接

扫一扫