Jquery+Json+Handler文件结合应用实例

本文涉及的产品
云服务器 ECS,每月免费额度200元 3个月
云服务器ECS,u1 2核4GB 1个月
简介: 1、页面script代码-【model数据、字符串】 //提交验证 function ChekFrom() { var msg = ""; ...

1、页面script代码-【model数据、字符串】

    <script type="text/javascript" charset="utf-8" src="Js/jquery-1.6.2.min.js"></script>
    <script type="text/javascript">
        //提交验证
        function ChekFrom()
        {
            var msg = "";
            //取值
            var UserName = $("#txtUserName").val();
            //验证
            if (UserName == "") {
                msg += "用户名为空!/r/n";

            } else {

                $.ajax({
                    type: "POST",
                    url: "/Controller/UserHandler.ashx",
                    data: { Action: "IsUserName", UserName: UserName },
                    cache: false, //设置时候从浏览器中读取 缓存  true 表示 是
                    datatype: "json",
                    async: false,
                    success: function (result) {
                        if (result.code == 1) {
                            msg += "该用户名已存在!/r/n";

                        }
                    }
                });
            }

            if (msg == "") {
                return true;
            } else {
                alert(msg);
                return false;
            }



        }


        //总计金额  可以写成js方法
        function BuyTotal() {

            var Total = $.ajax({
                type: "POST",
                dataType: text,//xml html script json 
                url: "/Controller/UserHandler.ashx",
                data: { Action: "BuyTotal" },
                async: false
            }).responseText;

            return Total;
        }

    </script>


 

2、返回Model的handler代码

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

using System;
using System.Web;
using ECS.Utility;
using System.Collections.Generic;

//使用session的时候必须继承IRequiresSessionState接口:, System.Web.SessionState.IRequiresSessionState
public class UserHandler : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        //全局默认返回信息
        string Json = JsonUtil.Serialize(new { code = 0, msg = "" });

        //取值
        string Action = context.Request.Form["Action"] == null ? "" : context.Request.Form["Action"].ToString().Trim();
        string UserName = context.Request.Form["UserName"] == null ? "" : context.Request.Form["UserName"].ToString().Trim();
        //判断
        if (!string.IsNullOrEmpty(Action))
        {
            //验证用户
            if (Action.Equals("IsUserName"))
            {
                //验证
                if (IsExistUser(UserName))
                {
                    Json = JsonUtil.Serialize(new { code = 1, msg = "用户名已存在!" });
                }
                else
                {
                    Json = JsonUtil.Serialize(new { code = 0, msg = "用户名可以注册!" });
                }

            }

            //计算金额
            if (Action.Equals("BuyTotal"))
            {
                //Json格式
                //Json = JsonUtil.Serialize(new { code = 1, msg = "成功", Total = 100 });
                //
                Json = "100";
            }
            else
            {   //Json格式
                //Json = JsonUtil.Serialize(new { code = 0, msg = "失败", Total = 0 });
                Json = "0";
            }

        }

        //最终返回信息
        context.Response.Write(Json);
    }

    /// <summary>
    /// 判断UserName是否存在
    /// </summary>
    /// <param name="userName">用户名</param>
    /// <returns>返回true or false</returns>
    public bool IsExistUser(string userName)
    {

        List<LSY.Model.A_User> UserList = new LSY.BLL.A_User().GetList(null, "UserName='" + userName.Trim() + "'and Type=0", null);
        if (UserList.Count > 0)
        {
            return true;
        }
        else
        {
            return false;
        }
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}


3、页面script代码-【DataTable、List】

//查询城市
function getCity(CityVal) {
    var DDL_Province = $("#DDL_Province");
    var DDL_City = $("#DDL_City");
    DDL_City.empty();
    DDL_City.append("<option value=\"0\">市/区</option>");
    $.ajax(
    {
        type: "post",
        url: "/UserCart/Controller/CityAreas.ashx",
        data: { "type": "city", "provinceID": DDL_Province.val() },
        dataType: "json",
        async: false,
        success: function (msg) {

            for (var i = 0; i < msg.length; i++) {

                if (CityVal == msg[i].CityName) {
                    if (msg[i].IsCOD == 1) {
                        DDL_City.append("<option value=" + msg[i].CityID + " selected=\"selected\">" + msg[i].CityName + "*</option>");
                    } else {
                        DDL_City.append("<option value=" + msg[i].CityID + " selected=\"selected\">" + msg[i].CityName + "</option>");
                    }
                } else {
                    if (msg[i].IsCOD == 1) {
                        DDL_City.append("<option value=" + msg[i].CityID + " >" + msg[i].CityName + "*</option>");
                    } else {
                        DDL_City.append("<option value=" + msg[i].CityID + " >" + msg[i].CityName + "</option>");
                    }
                }
            }
            getArea('');
            GetAddreesSpan();
        }
    })
};


 

4、返回数据集Handler代码

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

using System;
using System.Web;
using System.Collections.Generic;

public class CityAreas : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        if (context.Request["type"] == "city")
        {
            context.Response.Write(select2(context.Request["provinceID"]));
        }
        else if (context.Request["type"] == "district")
        {
            context.Response.Write(select3(context.Request["cityID"]));
        }
    }


    public string select2(string id)
    {
        string str = string.Empty;
        if (!string.IsNullOrEmpty(id))
        {
            List<ECS.Model.A_CityAreas> list = new ECS.BLL.A_CityAreas().GetList(null, "deep=2 and ParentID=" + id, null);
            if (list != null && list.Count > 0)
            {
       
                System.Text.StringBuilder sb = new System.Text.StringBuilder();
                sb.Append("[");
                foreach (ECS.Model.A_CityAreas item in list)
                {
                    sb.Append("{");
                    sb.Append("\"CityID\":\"" + item.id + "\",\"CityName\":\"" + item.AreaName + "\",\"IsCOD\":\"" + item.IsCOD + "\"");
                    sb.Append("},");
                }
                sb.Remove(sb.Length - 1, 1);
                sb.Append("]");
                str = sb.ToString();
            }
           
        }
        return str;
    }

    public string select3(string id)
    {
        string str = string.Empty;
        if (!string.IsNullOrEmpty(id))
        {
            List<ECS.Model.A_CityAreas> list = new ECS.BLL.A_CityAreas().GetList(null, "deep=3 and ParentID=" + id, null);
            if (list != null && list.Count > 0)
            {
              
                System.Text.StringBuilder sb = new System.Text.StringBuilder();
                sb.Append("[");
                foreach (ECS.Model.A_CityAreas item in list)
                {
                    sb.Append("{");
                    sb.Append("\"DistrictID\":\"" + item.id + "\",\"DistrictName\":\"" + item.AreaName + "\",\"IsCOD\":\"" + item.IsCOD + "\"");
                    sb.Append("},");
                }
                sb.Remove(sb.Length - 1, 1);
                sb.Append("]");
                str = sb.ToString();
            }
           
        }
        return str;
    }
    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}


 

 

相关实践学习
一小时快速掌握 SQL 语法
本实验带您学习SQL的基础语法,快速入门SQL。
7天玩转云服务器
云服务器ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,可降低 IT 成本,提升运维效率。本课程手把手带你了解ECS、掌握基本操作、动手实操快照管理、镜像管理等。了解产品详情:&nbsp;https://www.aliyun.com/product/ecs
目录
相关文章
|
30天前
|
JSON 程序员 数据格式
深入探索 “JSON for Modern C++“:安装、构建与应用
深入探索 “JSON for Modern C++“:安装、构建与应用
40 0
|
1月前
|
开发框架 前端开发 JavaScript
使用JavaScript、jQuery和Bootstrap构建待办事项应用
使用JavaScript、jQuery和Bootstrap构建待办事项应用
13 0
|
1月前
|
JavaScript 前端开发 索引
JQuery样式操作、click事件以及索引值-选项卡应用示例
JQuery样式操作、click事件以及索引值-选项卡应用示例
22 1
|
1月前
|
JavaScript 前端开发
jQuery第一天---六大功能的简单应用
jQuery第一天---六大功能的简单应用
31 0
|
21天前
|
JSON JavaScript 前端开发
解锁JSON的奇妙世界:从基础到高级应用,一文搞懂JSON的妙用(中)
解锁JSON的奇妙世界:从基础到高级应用,一文搞懂JSON的妙用(中)
|
2月前
|
Web App开发 JSON JavaScript
SAP UI5 应用程序小技巧 - 一键将 JSON 对象导出成本地 json 文件
SAP UI5 应用程序小技巧 - 一键将 JSON 对象导出成本地 json 文件
25 0
|
1月前
|
JSON 前端开发 数据格式
vue-cli3读取本地json文件
vue-cli3读取本地json文件
49 1
|
2月前
|
编解码 JavaScript 前端开发
TypeScript【第三方声明文件、自定义声明文件、tsconfig.json文件简介、tsconfig.json 文件结构与配置】(六)-全面详解(学习总结---从入门到深化)
TypeScript【第三方声明文件、自定义声明文件、tsconfig.json文件简介、tsconfig.json 文件结构与配置】(六)-全面详解(学习总结---从入门到深化)
63 0
|
16天前
|
XML JSON JavaScript
Java中XML和JSON的比较与应用指南
本文对比了Java中XML和JSON的使用,XML以自我描述性和可扩展性著称,适合结构复杂、需验证的场景,但语法冗长。JSON结构简洁,适用于轻量级数据交换,但不支持命名空间。在Java中,处理XML可使用DOM、SAX解析器或XPath,而JSON可借助GSON、Jackson库。根据需求选择合适格式,注意安全、性能和可读性。
26 0
|
21天前
|
XML JSON JavaScript
使用JSON和XML:数据交换格式在Java Web开发中的应用
【4月更文挑战第3天】本文比较了JSON和XML在Java Web开发中的应用。JSON是一种轻量级、易读的数据交换格式,适合快速解析和节省空间,常用于API和Web服务。XML则提供更强的灵活性和数据描述能力,适合复杂数据结构。Java有Jackson和Gson等库处理JSON,JAXB和DOM/SAX处理XML。选择格式需根据应用场景和需求。