2013-07-29 18 views
2

比方說,我有在看一個SQL Server數據庫中的表像jQuery的Ajax調用數據庫上點擊ASP.net

StateName notes 
alabama 'notes about alabama' 
alaska  'notes about alaska' 
.....  ......... 

編輯:這個問題將分爲兩個部分,一個用於最初的問題,爲什麼它不工作,我的改革,希望更準確的第二個解決方案。

在Web窗體中,狀態的名稱在表格內部表示爲鏈接按鈕。我嘗試使用jQuery在用戶單擊狀態名稱時進行Ajax數據庫調用,鏈接按鈕的文本值將發送到數據庫中的存儲過程。 該存儲過程是一樣的東西

create proc spGetStateData 
@stateName varchar(50) 
as 
begin 
select notes from 
states 
where statename = @stateName 
end 

出於測試目的,我加了AA文本框和一個按鈕,這樣,當用戶鍵入狀態變成文本框的名稱,從States數據庫表中的Notes列被展示。

[WebMethod] 
     public static string GetStateData(string stateName) 
     { 
      string stateNotes = string.Empty; 
      string cs = ConfigurationManager.ConnectionStrings["dbcs"].ConnectionString; 
      using (SqlConnection con = new SqlConnection(cs)) 
      { 
       using (SqlCommand cmd = new SqlCommand("spGetStateData", con)) 
       { 
        con.Open(); 
        cmd.CommandType = CommandType.StoredProcedure; 
        cmd.Parameters.AddWithValue("@stateName", stateName); 
        stateNotes = cmd.ExecuteScalar().ToString(); 
       } 
      } 
      return stateNotes; 
     } 

     protected void btnSubmit_Click(object sender, EventArgs e) 
     { 
      lblStateNotes.Text = GetStateData(txtStateName.Text); 
      hiddenDiv.Visible = true; 
     } 

這部分工作,所以我知道這不是我的WebMethod或數據庫連接失敗。當我嘗試用jQuery做同樣的事情時,它失敗了。

<script type="text/javascript" language="javascript"> 
     $(document).ready(function() { 
      $("#states a").click(function() { 
       $.ajax({ 
        type: "POST", 
        contentType: "application/json; charset=utf-8", 
        url: "WebForm1.aspx/GetStateData", 
        data: $(this).text(), 
        dataType: "json", 
        success: function (data) { 
         response(data.d); 
        }, 
        error: function (x) { 
         alert('error'); 
        } 
       }); 
      }); 
     }); 

    </script> 

好吧,我拉開了開發工具與Chrome和發現了什麼的AJAX失敗的原因是,我得到一個「無法加載資源HTTP 500錯誤」。它告訴我方法名稱和參數找不到(儘管它們在那裏有所有權利)。所以我嘗試了第二種方式,這似乎是一種更好的方式(如果我可以得到它的工作!)

然後,我想'讓我們使用WebService'。這裏是我的該譯本:

<!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></title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("a").click(function() { 
       var stateName = JSON.stringify({ "stateName": $(this).text() }); 
       $.ajax({ 
        type: "POST", 
        url: "GetStateData.asmx/GetData", 
        contentType: "application/json; charset=utf-8", 
        data: stateName, 
        dataType: "json", 
        success: function (data) { 
         $("#lblNotes").text(data); 
        }, 
        error: function (x) { 
         alert('message'); 
        } 
       }); 
      }); 

     }); 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
    <a href="#">Alabama</a> 
    <a href="#">Alaska</a> 
    <asp:Label runat="server" ID="lblNotes"></asp:Label> 

    </div> 
    </form> 
</body> 
</html> 

Web服務:

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Services; 
using System.Configuration; 
using System.Data; 
using System.Data.SqlClient; 
using System.Web.Script.Services; 

namespace jQueryAjaxWebservice 
{ 

    [WebService(Namespace = "http://tempuri.org/")] 
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 
    [System.ComponentModel.ToolboxItem(false)] 

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

     [WebMethod] 
     [ScriptMethod] 
     public string GetData(string stateName) 
     { 
      string cs = ConfigurationManager.ConnectionStrings["dbcs"].ConnectionString; 
      string stateNotes ="test" ; 
      using (SqlConnection con = new SqlConnection(cs)) 
      { 
       using (SqlCommand cmd = new SqlCommand("spGetStateData",con)) 
       { 
        con.Open(); 
        cmd.CommandType = CommandType.StoredProcedure; 
        cmd.Parameters.AddWithValue("@stateName", stateName); 
        stateNotes = cmd.ExecuteScalar().ToString(); 
       } 

      } 
      return stateNotes; 
     } 
    } 
} 

我測試過的WebService,和它的作品。但是,當我嘗試從default.aspx調用Web服務代碼時,我將[Object object]作爲lblNotes文本。如果我將(數據)更改爲「測試」,那麼我會在屏幕上獲得正確的「測試」輸出。所以有問題的部分位於Ajax調用的success部分。我在GetData函數上放置了一個斷點,並且stateNotes正在接收正確的文本值,因此問題所在的唯一位置是在ajax調用的success行中。

+1

將您的數據更改爲數據:「{'stateName':'」+ $(this).text()+「'}」, – Zaki

+0

在您的return語句中放置一個斷點,確保代碼到達該行並具有預期的價值。 – Jay

+0

@Jay是的,它正在從數據庫中讀取並獲得正確的值。 – wootscootinboogie

回答

6

我認爲你在ajax格式化data選項的方式可能是錯誤的。它始終在鍵值對中起作用。在目前的形式中,你只發送價值,沒有鑰匙。您可能必須將其更改爲以下格式:

var stateName = { "stateName" : $(this).text()} 

var stateName = JSON.stringify({ "stateName" : $(this).text()}) 

但大多數情況下,我只看到了第二個工作,部分原因是因爲jQuery的不預處理它的data選項可以在C#中讀取。所以總是推薦使用stringifyajax請求type設置爲"POST"

然後,在你ajax電話,

$.ajax({ 
    //ajax options 
    data : stateName 
    //some more ajax options 
}); 

此外,您可能想使你的error選項的詳細描述,如:

$.ajax({ 
     //ajax options 
     error: function (xhr, ajaxOptions, thrownError) { 
     alert(xhr.status); 
     alert(thrownError); 
     } 
}); 

這會告訴你你要去哪裏錯了,你也可以調試它。

編輯:

success功能,嘗試尋找data.d而不是data。你會發現你的數據在裏面。此外,如前所述(,我無法強調這足夠的),請使用error處理程序與xhr選項。然後調試會更容易。 Read this if you want to know why the result returns data.d and not just data.

$.ajax({ 
    //some ajax options 
    success: function (data) { 
     //data.d will contain your data 
     console.log(data.d); 
     $("#lblNotes").text(data.d); 
    }, 
    error: function (xhr, ajaxOptions, thrownError) { 
     console.log(xhr); 
     alert(xhr.status); 
     alert(thrownError); 
    } 
}); 

希望這有助於!

+0

這是我不太確定的部分。讓我測試一下,看看她說了些什麼。 – wootscootinboogie

+0

任何不接受的原因?我會盡力改善這個問題 – krishgopinath

+0

是的,我認爲你的解決方案是我需要的,但是我遇到了一些麻煩,在接受測試之前我應該​​在測試中做得更徹底。我仍然在努力嘗試使其運轉並阻止奇蹟發生,我將更新我的問題以反映我的新問題。感謝您的勤奮! :) – wootscootinboogie