調用Web服務jquery

Question

我有一個簡單的ajax請求，我試圖調用我創建的Web服務。 Web服務代碼永遠不會被執行。我從網上得到這個代碼示例，我想也許我打電話錯誤的jQuery我不知道？

這裏是jQuery的

<script type="text/javascript"> 
    $(document).ready(function() { 

    alert("Hi"); 
     $("#btnTitleQuery").bind("click", function() { 
      $("#query_results").empty(); 
      $("#query_results").append('<table id="ResultsTable" class="BooksTable"><tr><th>BookNum</th><th>Title</th><th>Author</th></tr>'); 
      $.ajax({ 
       type: "POST", 
       contentType: "application/json; charset=utf-8", 
       url: "BookServices.asmx/GetBooksByTitle", 
       data: '{ strTitle: "' + $("#txtTitle").val() + '" }', 
       dataType: "json", 
       success: function(msg) { 
        var c = eval(msg.d); 
        for (var i in c) { 
         $("#ResultsTable tr:last").after("<tr><td>" + c[i][0] + "</td><td>" + c[i][1] + "</td><td>" + c[i][2] + "</td></tr>"); 
        } 
       } 
      }); 
     }) 
     $("#btnAuthorQuery").bind("click", function() { 
      $("#query_results").empty(); 
      $("#query_results").append('<table id="ResultsTable" class="BooksTable"><tr><th>BookNum</th><th>Title</th><th>Author</th></tr>'); 
      $.ajax({ 
       type: "POST", 
       contentType: "application/json; charset=utf-8", 
       url: "BookServices.asmx/GetBooksByAuthor", 
       data: '{ strAuthor: "' + $("#txtAuthor").val() + '" }', 
       dataType: "json", 
       success: function(msg) { 
        var c = eval(msg.d); 
        for (var i in c) { 
         $("#ResultsTable tr:last").after("<tr><td>" + c[i][0] + "</td><td>" + c[i][1] + "</td><td>" + c[i][2] + "</td></tr>"); 
        } 
       } 
      }); 
     }) 
    }); 
</script> 

該網站的服務是我的根目錄。

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; 

namespace TryWillJSON 
{ 

[WebService(Description = "Web services to query the book database.", Namespace = "http://www.williamsportwebdeveloper.com/")] 

    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 

    [ScriptService] 

public class BookServices : System.Web.Services.WebService { 



     public BookServices() { 



     //Uncomment the following line if using designed components 

     //InitializeComponent(); 

    } 



    [WebMethod(Description = "Gets the books matching part of a title.")] 

    [ScriptMethod(ResponseFormat = ResponseFormat.Json)] 

    public string GetBooksByTitle(string strTitle) { 

     OdbcConnection objConnection = new OdbcConnection(System.Configuration.ConfigurationManager.ConnectionStrings["Books"].ConnectionString); 

     OdbcCommand objCommand = new OdbcCommand("SELECT * FROM reading WHERE Title LIKE '%" + strTitle + "%' ORDER BY BookNum;", objConnection); 

     DataSet objDataSet = new DataSet(); 

     OdbcDataAdapter objDataAdapter = new OdbcDataAdapter(objCommand); 

     objDataAdapter.Fill(objDataSet, "reading"); 

      objConnection.Close(); 



     // Create a multidimensional jagged array 

     string[][] JaggedArray = new string[objDataSet.Tables[0].Rows.Count][]; 

     int i = 0; 

     foreach (DataRow rs in objDataSet.Tables[0].Rows) 

     { 

      JaggedArray[i] = new string[] { rs["BookNum"].ToString(), rs["Title"].ToString(), rs["Author"].ToString() }; 

      i = i + 1; 

      } 



     // Return JSON data 

     JavaScriptSerializer js = new JavaScriptSerializer(); 

     string strJSON = js.Serialize(JaggedArray); 

     return strJSON; 

     } 



    [WebMethod(Description = "Gets the books matching part of an author's name.")] 

    [ScriptMethod(ResponseFormat = ResponseFormat.Json)] 

    public string GetBooksByAuthor(string strAuthor) 

     { 

     OdbcConnection objConnection = new OdbcConnection(System.Configuration.ConfigurationManager.ConnectionStrings["Books"].ConnectionString); 

     OdbcCommand objCommand = new OdbcCommand("SELECT * FROM reading WHERE Author LIKE '%" + strAuthor + "%' ORDER BY BookNum;", objConnection); 

     DataSet objDataSet = new DataSet(); 

     OdbcDataAdapter objDataAdapter = new OdbcDataAdapter(objCommand); 

     objDataAdapter.Fill(objDataSet, "reading"); 

     objConnection.Close(); 



      // Create a multidimensional jagged array 

     string[][] JaggedArray = new string[objDataSet.Tables[0].Rows.Count][]; 

     int i = 0; 

     foreach (DataRow rs in objDataSet.Tables[0].Rows) 

     { 
      JaggedArray[i] = new string[] { rs["BookNum"].ToString(), rs["Title"].ToString(), rs["Author"].ToString() }; 

      i = i + 1; 

     } 



      // Return JSON data 

     JavaScriptSerializer js = new JavaScriptSerializer(); 

     string strJSON = js.Serialize(JaggedArray); 

     return strJSON; 

    } 



    } 
} 

我可以看到警報命中，但在螢火當我檢查什麼在jQuery函數螢火蟲的「味精」參數告訴我這「的ReferenceError：味精是沒有定義」

這裏是哪裏我得到的代碼： williamsportwebdeveloper.com/cgi/wp/?p=494

如果有人有時間，你可以看到，如果你可以在Visual Studio

這裏正確設置它是一個小提琴我的設置以及它的價值 http://jsfiddle.net/npl77/U33XS/

Answer 1

您的參數沒有周圍的屬性名稱正確單刻度線 它們改寫成這樣：

data: "{ 'strAuthor': '" + $("#txtAuthor").val() + "' }", 

data: "{ 'strTitle': '" + $("#txtTitle").val() + "' }", 

正因爲如此，你的參數不匹配了對服務器 - 被檢查時，側。因此，您的代碼永遠不會執行。這是我發現的第一個錯誤...可能有更多，

檢查，然後我們會看到。

此外，你可以在JavaScript中使用JSON，這將使這個單調乏味和錯誤引導的字符串構建過程脫鉤。你只需要在這裏得到一個小JSON庫的副本，並將其添加到你的項目（它只是一個javascript文件btw）。

http://sourceforge.net/projects/json-lib/files/

下面是一個例子

//using native JSON 
    var per = { FirstName: $('#fName').val(), 
       LastName : $('#lName').val(), 
       Address : $('#address').val(), 
       City : $('#city').val(), 
       State : $('#state').val(), 
       ZipCode : $('#zip').val() 
       }; 

    $.ajax(
    { 
     type: "POST", 
     url: "Default.aspx/GetPersonObj", 
     data: JSON.stringify(per), //<---- right here the magic happens 
     contentType: "application/json; charset=uft-8", 
     dataType: "json", 
     success: function (rsp) { SetPerson(rsp); }, 
     error: function (rsp) 
     { 
      alert(rsp.responseText); //<--- this is always good to add, that way you can get some feedback from the ajax call about what the hell went wrong. 
     } 
    }); 

Answer 2

該文件使AJAX調用的位置是什麼？也許試圖修改您的JQuery網址：使用Firefox/Firebug的/控制檯或IE +小提琴手，看看是與$阿賈克斯（）調用發生

url: "/BookServices.asmx/GetBooksByTitle", 

Answer 3

嘗試。您也可以爲該$ .ajax（）調用添加一個錯誤處理程序來捕獲錯誤事件並吐出一些信息。

是否提出了任何要求？

你說「Web服務代碼永遠不會執行」，所以我猜你有一個調試器連接到VS.NET網站，但由於斷點沒有被擊中，你需要確定發生了什麼事情客戶端第一。

Answer 4

那些尚未提及的一些事情。

1）那些按鈕是<input type="submit" />（這是什麼asp:Button默認情況下呈現）？如果是這樣，您需要阻止其默認操作，以便在您的AJAX請求開始的同時不會重新加載頁面。

如果按鈕觸發屈服了，你應該避免靠近你的事件處理程序的頂部的默認操作，如：

$("#btnTitleQuery").bind("click", function(evt) { 
    // This prevents the form submission. 
    evt.preventDefault(); 

    // Your $.ajax() and rendering code here. 
}); 

2）你不應該手動序列化服務方法的返回值和反序列化它在客戶端。已經有一層JSON序列化發生了。相反，從這些方法返回的字符串類型，走的是這樣：

public class Book 
{ 
    public string BookNum { get; set; } 
    public string Title { get; set; } 
    public string Author { get; set; } 
} 

[WebMethod(Description = "Gets the books matching part of a title.")] 
public List<Book> GetBooksByTitle(string strTitle) { 

    OdbcConnection objConnection = new OdbcConnection(System.Configuration.ConfigurationManager.ConnectionStrings["Books"].ConnectionString); 

    // Be careful. You've got a SQL injection vulnerability here. 
    OdbcCommand objCommand = new OdbcCommand("SELECT * FROM reading WHERE Title LIKE '%" + strTitle + "%' ORDER BY BookNum;", objConnection); 

    DataTable dt = new DataTable(); 

    OdbcDataAdapter objDataAdapter = new OdbcDataAdapter(objCommand); 

    objDataAdapter.Fill(dt); 

    objConnection.Close(); 

    List<Book> result = new List<Book>(); 

    foreach (DataRow row in dt.Rows) 
    { 
    result.Add(new Book() { 
     BookNum = row["BookNum"].ToString(), 
     Title = row["Title"].ToString(), 
     Author = row["Author"].ToString() 
    }); 
    } 

    return result; 
} 

然後，你可以消費，通過改變你的$.ajax()電話這樣的：

$.ajax({ 
    type: "POST", 
    contentType: "application/json; charset=utf-8", 
    url: "BookServices.asmx/GetBooksByTitle", 
    data: '{ strTitle: "' + $("#txtTitle").val() + '" }', 
    dataType: "json", 
    success: function(msg) { 
    for(var i = 0; i < msg.d.length; i++) { 
     // You should avoid accessing the DOM during every loop. 
     $("#ResultsTable tr:last").after("<tr><td>" + msg.d[i].BookNum + "</td><td>" + msg.d[i].Title + "</td><td>" + msg.d[i].Author + "</td></tr>"); 
    } 
    } 
}); 

3）最後，這將是一個使用jQuery模板而不是所有字符串連接的好地方。你可以使用一個簡單的模板是這樣的：

<script type="text/x-jquery-tmpl" id="BooksQueryTemplate"> 
    <table id="ResultsTable" class="BooksTable"> 
    <tr> 
     <th>BookNum</th> 
     <th>Title</th> 
     <th>Author</th></tr> 
    </tr> 
    {{each d}} 
    <tr> 
     <td>${BookNum}</td> 
     <td>${Title}</td> 
     <td>${Author}</td> 
    </tr> 
    {{/each}} 
    </table> 
</script> 

然後，使其在$阿賈克斯（）調用是這樣的：

$.ajax({ 
    type: "POST", 
    contentType: "application/json; charset=utf-8", 
    url: "BookServices.asmx/GetBooksByTitle", 
    data: '{ strTitle: "' + $("#txtTitle").val() + '" }', 
    dataType: "json", 
    success: function(msg) { 
    $('#BooksQueryTemplate').tmpl(msg).appendTo('#query_results'); 
    } 
});