ASP.NET使用Ajax返回Json對象

来源:http://www.cnblogs.com/beast-king/archive/2017/05/25/6903877.html
-Advertisement-
Play Games

一、新建一個html頁面,如註冊頁面"Register.htm" 二、新建一js文件，如：reg.js 三、處理ajax請求 方法一：手動拼接json字元串 新建一般處理程式，如：Register.ashx 方法二：使用Json.NET工具來將C#對象轉換json輸出 1、新建信息類“Msg.cs” ...


一、新建一個html頁面,如註冊頁面"Register.htm"

<!DOCTYPE html>
<html >
<head>
    <title>用戶註冊</title>
    <meta charset="utf-8" />
    <style type="text/css">
        .msg
        {
            color:Red;
        }
    </style>
</head>
<body>
    <!-- 
        因為是ajax提交,html表單控制項可以不必放在form里,且不能使用提交按紐(type="submit"),而使用普通按紐(type="button")
    -->
    用戶名:<input type="text" name="id" id="id" /><span id="idMsg" class="msg"></span><br /> <!-- span用來顯示錯誤信息 -->
    密　碼:<input type="password" name="pwd" id="pwd" /><span id="pwdMsg" class="msg"></span><br />
    姓　名:<input type="text" name="name" id="xm" /><span id="nameMsg" class="msg"></span><br />                
    <input id="btnReg" type="button" value="註冊" />
    <script type="text/javascript" src="bootstrap/js/jquery.js">        
    </script>
    <script src="reg.js" type="text/javascript"></script>    
</body>
</html>

二、新建一js文件，如：reg.js

$(function() {
    //定義清除錯誤信息的函數
    function clearMsg() {
        $(".msg").html("");
    }
    
    //定義獲取表單數據的函數,註意返回json對象
    function formData() {
        return {
            id: $("#id").val(),
            pwd: $("#pwd").val(),
            name: $("#xm").val()
        };
    }
    
    //定義註冊功能的函數
    function reg() {
        var url = "Register.ashx";
        var data = formData();
        clearMsg();
        $.ajax({
            type: 'GET', //自動會把json對象轉換為查詢字元串附在url後面如：http://localhost:49521/Register.ashx?id=a&pwd=b&name=c
            url: url,
            dataType: 'json', //要求伺服器返回一個json類型的數據,如：{"success":true,"message":"註冊成功"}
            contentType: 'application/json',//發送信息給伺服器時，內容編碼的類型
            data: data, //提交給伺服器的數據,直接使用json對象的數據,如:{"id":"a","pwd":"b","name":"c"}　（如果要求json格式的字元串，可使用用JSON.stringify(data)）
            success: function(responseData) {//如果響應成功（即200）
            if (responseData.success == true) {//responseData也是json格式，如：{"success":true,"message":"註冊成功"}
                    alert(responseData.message);
                } else {
                var msgs = responseData.msgs;//msgs對象是一個數組，如下所示：
                //{"success":false,"message":"註冊失敗","msgs":[{"id":"pwdMsg","message":"密碼不能為空."},{"id":"nameMsg","message":"姓名不能為空."}]}
                    for (var i = 0; i < msgs.length; i++) {
                        $('#' + msgs[i].id).html(msgs[i].message);
                    }
                }
            },
            error: function() {
            //要求為Function類型的參數，請求失敗時被調用的函數。該函數有3個參數，即XMLHttpRequest對象、錯誤信息、捕獲的錯誤對象(可選)。ajax事件函數如下：
            //function(XMLHttpRequest, textStatus, errorThrown){
            //通常情況下textStatus和errorThrown只有其中一個包含信息
            //this;   //調用本次ajax請求時傳遞的options參數
                alert(arguments[1]);
            }
        });//ajax
    }
    
    //定義一個初始化函數
    function init() {
        $("#btnReg").click(function() {
            reg();
        });
    }
    
    //調用初始化函數
    init();
});

三、處理ajax請求

方法一：手動拼接json字元串

新建一般處理程式，如：Register.ashx

using System;
using System.Collections;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
using System.Collections.Generic;

namespace WebLogin
{
    /// <summary>
    /// $codebehindclassname$ 的摘要說明
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class Register1 : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "application/json";//設置響應內容的格式是json格式
            string id = context.Request["id"];
            string pwd = context.Request["pwd"];
            string name = context.Request["name"];
            List<string> msgList = new List<string>();
            if (String.IsNullOrEmpty(id))
            {
                msgList.Add("{\"id\":\"idMsg\",\"message\":\"用戶名不能為空.\"}");
            }
            if (pwd==null || pwd=="")
            {
                msgList.Add("{\"id\":\"pwdMsg\",\"message\":\"密碼不能為空.\"}");//形如：{"id":"pwdMsg","message":"密碼不能為空."}
            }
            if (name==null || name=="")
            {
                msgList.Add("{\"id\":\"nameMsg\",\"message\":\"姓名不能為空.\"}");
            }

            
            string responseText = "";
            if (msgList.Count == 0)
            {
                //調用後臺代碼寫入資料庫
                responseText = "{\"success\":true,\"message\":\"註冊成功\"}";
            }
            else
            {
                string msgsValue = "";
                for (int i = 0; i < msgList.Count; i++)
                {
                    msgsValue += msgList[i] + ",";//將列表中的每一個字元串連接起來，用","隔開,不過最後還會多","
                }
                msgsValue=msgsValue.Substring(0, msgsValue.Length - 1);//去掉末尾的","
                msgsValue = "[" + msgsValue + "]";//用"[]"括起來,如:[{"id":"pwdMsg","message":"密碼不能為空."},{"id":"nameMsg","message":"姓名不能為空."}]
                responseText = "{\"success\":false,\"message\":\"註冊失敗\",\"msgs\":" + msgsValue + "}";
                //最的形如:{"success":false,"message":"註冊失敗","msgs":[{"id":"pwdMsg","message":"密碼不能為空."},{"id":"nameMsg","message":"姓名不能為空."}]}
            }
            context.Response.Write(responseText);
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

方法二：使用Json.NET工具來將C#對象轉換json輸出

1、新建信息類“Msg.cs”

using System;
using System.Data;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

namespace WebLogin
{
    public class Msg
    {
        private string id;

        public string Id
        {
            get { return id; }
            set { id = value; }
        }
        private string message;

        public string Message
        {
            get { return message; }
            set { message = value; }
        }
        public Msg(string id, string message)
        {
            this.id = id;
            this.message = message;
        }
    }
}

2、新建返回json對象的類“ResponseData.cs”

using System;
using System.Data;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Collections.Generic;

namespace WebLogin
{
    public class ResponseData
    {
        private bool success;

        public bool Success
        {
            get { return success; }
            set { success = value; }
        }
        private string message;

        public string Message
        {
            get { return message; }
            set { message = value; }
        }
        private List<Msg> msgs;

        public List<Msg> Msgs
        {
            get { return msgs; }
            set { msgs = value; }
        }

        public ResponseData(bool success, string message)
        {
            this.success = success;
            this.message = message;
        }
        public ResponseData(bool success, string message, List<Msg> msgs)
        {
            this.success = success;
            this.message = message;
            this.msgs = msgs;
        }
    }
}

3、去官網下載Json.NET，並複製引用

官網：http://www.newtonsoft.com/json

下載地址：http://pan.baidu.com/s/1nvz9JBV

下載解壓後將“Newtonsoft.Json.dll”複製到項目的“bin”目錄中，並引用（註意和.net版本保持一致）

4、新建一般處理程式“reg.ashx”

using System;
using System.Collections;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
using System.Collections.Generic;

using Newtonsoft.Json;//引入

namespace WebLogin
{
    /// <summary>
    /// $codebehindclassname$ 的摘要說明
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class reg : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "application/json";//設置響應內容的格式是json格式
            string id = context.Request["id"];
            string pwd = context.Request["pwd"];
            string name = context.Request["name"];
            List<Msg> msgs = new List<Msg>();
            if (String.IsNullOrEmpty(id))
            {
                msgs.Add(new Msg("idMsg", "用戶名不能為空."));
            }
            if (String.IsNullOrEmpty(pwd))
            {
                msgs.Add(new Msg("pwdMsg", "密碼不能為空."));
            }
            if (String.IsNullOrEmpty(name))
            {
                msgs.Add(new Msg("nameMsg", "姓名不能為空."));
            }

            ResponseData rData;
            if (msgs.Count == 0)
            {
                //調用註冊方法，寫入資料庫
                rData = new ResponseData(true, "註冊成功.");
            }
            else
            {
                rData = new ResponseData(false, "註冊失敗.", msgs);
            }

            context.Response.Write(JsonConvert.SerializeObject(rData));//直接調用方法將rData轉換為json字元串
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

 

四、完成效果如圖

 如果你覺得有用，就點個贊!


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • ManualResetEvent 用法
    第一、簡單介紹 ManualResetEvent 允許線程通過發信號互相通信。通常，此通信涉及一個線程在其他線程進行之前必須完成的任務。當一個線程開始一個活動（此活動必須完成後，其他線程才能開始）時，它調用 Reset 以將 ManualResetEvent 置於非終止狀態，此線程可被視為控制 Ma ...
  • C#面向對象編程 封裝 繼承 多態
    C#面向對象編程 什麼是面向對象？ 面向對象編程是上個實際六十年代繼面向結構編程之後提出的一個新的編程思想 封裝，繼承，多態 封裝，繼承，多態是面向對象編程的核心： 封裝是實現面向對象程式設計的第一步，封裝就是將數據或函數等集合在一個個的單元中（我們稱之為類）。被封裝的對象通常被稱為抽象數據類型 意 ...
  • 1.4c#中條件判斷
    c#3種基本的條件判斷語句有1.if 2.if...else... 3.switch 1.5.1if結構 c#中if結構的語法與java完全相同，即 1. if(表達式) { 代碼塊 } 2. if...else...結構如下 if() { 代碼塊1 } else { 代碼塊2 } 3. 多重if結 ...
  • .net core 根據資料庫生成實體類
    微軟最近幾年在跨平臺上不斷發力，很多.net程式員也摩拳擦掌，對微軟寄以厚望。就在最近，微軟還推出了asp .net core2.0預覽版。 通過對.net core的簡單嘗試，我發現以往我們開發MVC項目時，是通過新建一個.edmx文件來生成和更新實體模型，但是在core中，微軟去掉了.edmx， ...
  • Windows Server 2012 R2 或 2016 無法安裝 .NET Framework 3.5.1
    問題描述 使用 Windows Server 2012 R2 或 Windows Server 2016系統，發現在安裝 .NET Framework 3.5.1 時報錯，報錯內容如下圖所示。 原因分析 找不到安裝源文件。 解決辦法 您可以使用如下 PowerShell 腳本進行安裝。 從 開始 菜 ...
  • ASP.NET使用富文本控制項KindEditor（一步到位，親測有效）
    １、將解壓後的“KindEditor”文件夾複製到項目的根目錄（此KindEditor文件夾已經經過優化） 下載地址為： http://pan.baidu.com/s/1eS1PRii ２、在<head>標簽中引入KindEditor外部樣式表文件和必需的外部js文件。如下所示： <!--引入樣式表 ...
  • 多線程之Parallel類
    Parallel類是對線程的一個抽象。該類位於System.Threading.Tasks名稱空間中，提供了數據和任務並行性。 Paraller類定義了數據並行地For和ForEach的靜態方法，以及任務並行的Invoke的靜態方法。Parallel.For()和Parallel.ForEach() ...
  • WCF(遠程伺服器返回錯誤: 400 錯誤的請求)
    類似相關問題有以下： WCF- restful介面 POST方式調用報錯(遠程伺服器返回錯誤: 400 錯誤的請求) WCF Rest：不使用UriTemplate使用post方式傳參解決HTTP400問題以及參數映射問題 等等！ 具體原因參照：原創：轉載請標明出處：http://www.cnblo ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類