用Jquery訪問WebService並返回Json

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

經常會用JavaScript訪問asp.net的Webservice的需求，通常的方法是用asp.net ajax來解決，但asp.net ajax架構在不國內並不經常被使用。
在我們的應用中一般會是這樣的，使用了jquery作為用戶端架構，ajax請求也通常返回html或者json。html這裡就不討論了。返回json一般都是搞一個handler.ashx來處理請求，拼湊字串來返回json。從而放棄了ws，因為ws返回的是xml，使用起來不方便。
所以我覺著比較完美的解決方案是讓ws返回json而且不用asp.net ajax的用戶端框是比較理想的解決方案。
通過觀測發現asp.net ajax的用戶端架構請求webservice的時候返回的是json，為什麼webservice沒有返回xml而返回了json呢？抓包分析到，關鍵在request的headers中 “Content-Type: application/json;utf-8” ，因此webservice就使用了json的序列化，應該是“System.Web.Script.Serialization.JavaScriptSerializer”這個類完成的工作，通過web.config的配置，把*.asmx交給了System.Web.Extensions.Dll。也就是這裡還是用了asp.net ajax，不過是用的服務端部分，我這裡直接用的asp.net 3.5
以上都是在囉嗦，具體的方法很簡單，看例子

ws1.asmx 程式碼using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;

namespace test2
{
    /// <summary>
    /// Summary description for WS1
    /// </summary>
    [WebService(Namespace = "http://onewww.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [ToolboxItem(false)]

    [System.Web.Script.Services.ScriptService]
    public class WS1 : System.Web.Services.WebService
    {

        [WebMethod]
        public string HelloWorld()
        {
            return "Hello World";
        }

        [WebMethod]
        public TestUser CreateUser(string name,int age)
        {
            return new TestUser { Name = name, Age = age };
        }
    }

    public class TestUser
    {
        public string Name { get; set; }
        public int Age { get; set; }
    }
}

test.html 程式碼<!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>Untitled Page</title>
<script src="jquery-1.2.2.js" type="text/javascript"></script>
</head>
<body>

    <input type="button" onclick="requestHelloWorld();" value="請求HelloWorld" />
    <input type="button" onclick="requestCreateUser();" value="請求CreateUser" />
    <script type="text/javascript">


    function requestHelloWorld(){
        WebService('ws1.asmx/HelloWorld',function(obj){alert(obj);});
    }

    function requestCreateUser(){
        WebService('ws1.asmx/CreateUser',function(obj){alert(obj.Name);},'{name:"林子",age:25}');
    }


    function WebService(url,callback,pars){
        $.ajax({
          data:pars,
          url: url,
          type: "POST",
          contentType: "application/json;utf-8",
          dataType:'json',
          cache: false,
          success: function(json){
            callback(json.d);
          },
          error:function(xml,status){
            if(status=='error'){
                try{
                var json = eval('(' + xml.responseText + ')');
                alert(json.Message+'\n'+json.StackTrace);
                }catch(e){}
            }else{
                alert(status);
            }
          },
          beforeSend:function(xml){
            if(!pars)  xml.setRequestHeader("Content-Type", "application/json;utf-8")
          }
        });
    }
    </script>
</body>
</html>

web.config為vs2008在.net 3.5狀態下建立的預設的也有很重要的作用這裡貼出來程式碼<?xml version="1.0"?>
<configuration>
    <configSections>
        <sectionGroup name="system.web.extensions" type="System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
            <sectionGroup name="scripting" type="System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
                <section name="scriptResourceHandler" type="System.Web.Configuration.ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="MachineToApplication"/>
                <sectionGroup name="webServices" type="System.Web.Configuration.ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
                    <section name="jsonSerialization" type="System.Web.Configuration.ScriptingJsonSerializationSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="Everywhere"/>
                    <section name="profileService" type="System.Web.Configuration.ScriptingProfileServiceSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="MachineToApplication"/>
                    <section name="authenticationService" type="System.Web.Configuration.ScriptingAuthenticationServiceSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="MachineToApplication"/>
                    <section name="roleService" type="System.Web.Configuration.ScriptingRoleServiceSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="MachineToApplication"/>
                </sectionGroup>
            </sectionGroup>
        </sectionGroup>
    </configSections>
    <appSettings/>
    <connectionStrings/>
    <system.web>
        
        <compilation debug="true">
            <assemblies>
                <add assembly="System.Core, Version=3.5.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/>
                <add assembly="System.Data.DataSetExtensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/>
                <add assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
                <add assembly="System.Xml.Linq, Version=3.5.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/>
            </assemblies>
        </compilation>
        
        <authentication mode="None"/>
        <!--
            The <customErrors> section enables configuration
            of what to do if/when an unhandled error occurs
            during the execution of a request. Specifically,
            it enables developers to configure html error pages
            to be displayed in place of a error stack trace.

用javascript直接存取asp.net的webservice，方法類似，自己構建ajax請求而已，注意的就是設定header,剩下的asp.net 3.0以上版本會自動序列化為json

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

用Jquery訪問WebService並返回Json

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support