2011-03-09 63 views
0

所以,我是新來的JSON/AJAX/jQuery的/ web服務驗證用戶名Ajax和JSON和asp.net

我試圖做一個連接頁面由此幾個字母的用戶類型和獲得的即時反饋無論用戶名是否可用。

我有一個HTML文件[用戶前端],和ASMX web服務,web服務檢查,看是否任何文本已經得到了存在[運行存儲過程的正常工作]

我的HTML文件似乎不是調用我的web服務。

我已通過訪問asmx頁面並手動輸入值來驗證webservice的工作原理,並且它爲我返回true或false。
一個問題是它似乎是回到它在XML,如下圖所示,而不是JSON我是它是在

<?xml version="1.0" encoding="utf-8"?> 
<string xmlns="http://localhost">{"available": false}</string> 

所以到代碼/標記!

我的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"> 
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 
     <script type="text/javascript"> 
    <!-- 

     $(document).ready(function() { 
      var validateUsername = $('#validateUsername'); 
      $('#username').keyup(function() { 
       var t = this; 
       if (this.value != this.lastValue) { 
        if (this.timer) clearTimeout(this.timer); 
        validateUsername.removeClass('error').html('<img src="images/ajax-loader.gif" height="16" width="16" /> checking availability...'); 
        this.timer = setTimeout(function() { 
         $.ajax({ 
          contentType: "application/json; charset=utf-8", 
          url: 'ValidateUser.asmx/GetUsernameAvailable', 
          data: '{username: "'+t.value + '"}', 
          dataType: 'json', 
          type: "post", 
          success: function (j) { 
           validateUsername.html('I willl have my logic in here for changing the html on the label to reflect success or failure!'); 
          } 
         }); 
        }, 200); 

        this.lastValue = this.value; 
       } 
      }); 
     }); 
//--> 
     </script> 

</head> 
<body> 
    <fieldset> 
     <div> 
       <label for="username">Username, valid: a-z.-_</label> 
       <input type="text" name="username" value="" id="username" /> 
       <span id="validateUsername"></span> 
     </div> 
    </fieldset> 
</body> 
</html> 

我ASMX文件

<%@ WebService Language="C#" Class="ValidateUser" %> 
using System; 
using System.Web; 
using System.Collections; 
using System.Web.Services; 
using System.Web.Services.Protocols; 
using System.Data; 
using System.Data.Odbc; 
using System.Web.Script.Serialization; 
using System.Web.Script.Services; 
using UserSite.DataClasses; 

[WebService(Description = "Web services to query Username availability.", Namespace = "http://localhost")] 
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 
[ScriptService] 
public class ValidateUser: System.Web.Services.WebService 
{ 

    [WebMethod(Description = "Gets the availability of a username.")] 
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)] 
    public string GetUsernameAvailable(string username) 
    { 

     if (username == null) 
     { 
      username = ""; 
     } 
     DbaseExecSpWithReturnValue Sproc = new DbaseExecSpWithReturnValue(); 
     Sproc.SetSp("sp_CheckUsernameAvailable"); 
     Sproc.AddParam(1); 
     Sproc.AddParam("Username", SqlDbType.Char, username, 20); 
     int RetVal = Sproc.Execute(); 
     Sproc.Close(); 
     if (RetVal == 0) 
     { 
      return @"{""available"": false}"; 
     } 
     else 
     { 
      return @"{""available"": true}"; 
     } 

    } 
} 

所以存儲過程的工作,因爲我看到的時候我手動跑了ASMX文件,但是HTML頁面並不調用它,我ASMX文件沒有返回數據.....所以基本上它驅使我堅果!

回答

1
.NET的版本,你使用的是哪個

的東西 - 如果3.5然後確保你有ScriptHandlerFactory和ScriptModule在網站註冊。配置 - 這些負責處理JSON請求。

第二個問題是,在實際的服務實現中,您應該返回所需的對象,並且ASP.NET基礎結構將處理JSON序列化 - 您不必輸出實際的JSON數據。例如,

public bool GetUsernameAvailable(string username) 
{ 
    ... 
    return (RetVal == 0) ? false : true; 
} 

以上將返回布爾值,並在您的通話功能j.d調用訪問它。例如,

... 
$ajax({ 
... 
success: function (j) { 
    alert(j.d); // will alert either true or false 
} 
... 

最後,導航到ASMX端點瀏覽器將調用SOAP端點,你總是會得到XML請求 - 響應(這是因爲ASP.NET腳本處理程序將執行JSON序列只有請求POST請求和內容類型是JSON)。正確的方法來調試這將是檢查你的工具,如Fiddler服務調用。

+0

哇,完全工作...我有適當的web.config,但我不明白,它的服務將它轉換爲我[這是合乎邏輯的]。非常感謝! – Jordan 2011-03-09 05:08:15

1

我認爲你的ajax調用的數據不正確。根據jquery文檔: 數據選項可以包含形式爲key1 = value1 & key2 = value2的查詢字符串或形式爲{key1:'value1',key2:'value2'}的映射。如果使用後一種形式,則在發送數據之前使用jQuery.param()將數據轉換爲查詢字符串。嘗試使用AJAX,而不發送日期來測試,如果你可以打電話給你的WS然後嘗試像

data :{'username':t.value }