需要使用jQuery-AJAX调用webMethod的援助

Question

请在我的介绍/中级编程类中为我的最终项目提供帮助。

使用存储过程，表适配器和业务类，他希望我们用“供应商”表（我有这个工作）填充字段的ASP.NET网格视图。

然后他希望我们列出每个供应商的产品，使用传递参数的存储过程根据supplierID列出产品。我可以使用ASP.NET对象和可视网格视图功能（gridview“select”属性来传递参数，dataobjectsouruces）来完成此操作。

但他希望我们使用AJAX来检索每个供应商的产品清单，方法是从下拉列表框中选择供应商名称。

当我运行这个，我不断收到我的错误功能警报。我也不知道我怎么会写的AJAX成功函数来显示的产品信息可能多行（数组？）

任何及所有帮助是极大的赞赏，所有的代码如下，

谢谢！

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#Button1").click(function() { 
      var supplierid = { supplierid: $('#DropDownList1').val() }; 
      supplierid = JSON.stringify(supplierid); 
      alert(supplierid); 
      $.ajax({ 
       type: "POST", 
       dataType: "JSON", 
       data: supplierid, 
       contentType: "application/JSON", 
       url: "MainForm.aspx/getProductDetails", 
       success: function (data) { 
        $.each((data.d), function(index,m) { 
         $('#output').append('<p><strong>' + m.productid + 
         ' ' + m.productname + ' ' + m.supplierid + ' ' + m.categoryid + ' ' + unitprice + '</strong></p>'); 
        }); 
       }, 
       error: function (x, e) { 
        alert("The call to the Supplier failed. " + x.responseText); 
       } 
      }) 
     }); 
    }); 
</script> 

MainForm.aspx：

Partial Class MainForm 
Inherits System.Web.UI.Page 
<WebMethod()> _ 
Public Shared Function getProductDetails(ByVal supplierid As Integer) As List(Of Products) 
    Dim prodData As New ProductData 
    Return prodData.getProductById(supplierid) 
End Function 

“这部分将填充下拉列表

Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load 
    Dim supplierdata As New supplierdata 
    DropDownList1.DataSource = supplierdata.getSupplierData() 
    DropDownList1.DataTextField = "companyname" 
    DropDownList1.DataValueField = "supplierid" 
    DropDownList1.DataBind() 
End Sub 

的 “产品” 和 “productData” 类和业务功能：

Public Class Products 
    Public Property productid As Integer 
    Public Property productname As String 
    Public Property supplierid As Integer 
    Public Property categoryid As Integer 
    Public Property unitprice As Integer 
End Class 

Public Class ProductData 
    Public Function getProductById(ByVal supplierid As Integer) As List(Of Products) 
     Dim ProductList As New List(Of Products) 
     Dim dt As New DataSet1.GetProductdataBySupplierDataTable 
     Dim productRow As DataSet1.GetProductdataBySupplierRow 

     // retrieves the data from the database and loads into the datatable 
     // closes the connection at the end. 

     Using ta As New DataSet1TableAdapters.GetProductdataBySupplierTableAdapter 
      Try 
       dt = ta.GetProdcutsbySupplier(supplierid) 
       If dt.Count = 0 Then 
        //no matching record found, return false 
        Throw New ApplicationException("Retrieve: No such record") 
       Else 

        productRow = dt(0) 
        Dim aProduct As New Products() 
        With aProduct 
         .productid = productRow.productid 
         .productname = productRow.productname 
         .supplierid = productRow.supplierid 
         .categoryid = productRow.categoryid 
         .unitprice = productRow.unitprice 
        End With 
        ProductList.Add(aProduct) 
       End If 
      Catch ex As Exception 
       Throw New ApplicationException("Error Getting Members " & ex.Message) 
      End Try 
     End Using 
     Return ProductList 
    End Function 
End Class 

Answer 1

第一问题EM（你在错误处理程序结束了的原因）是你需要一个JSON字符串传递到的WebMethod：

$(document).ready(function() { 
    $("#Button1").click(function() { 
     // Use a JSON string, not a JavaScript object. 
     var supplierid = '{ "supplierid": "' + $('#DropDownList1').val() + '" }'; 
     supplierid = JSON.stringify(supplierid); 
     alert(supplierid); 
     $.ajax({ 
      type: "POST", 
      // Possible issue: dataType is case sensitive. 
      dataType: "json", 
      data: supplierid, 
      contentType: "application/json", 
      url: "MainForm.aspx/getProductDetails", 
      success: function (data) { 
       $.each((data.d), function(index,m) { 
        $('#output').append('<p><strong>' + m.productid + 
        ' ' + m.productname + ' ' + m.supplierid + ' ' + m.categoryid + ' ' + unitprice + '</strong></p>'); 
       }); 
      }, 
      error: function (x, e) { 
       alert("The call to the Supplier failed. " + x.responseText); 
      } 
     }) 
    }); 
}); 

在这里看到更多的信息在特定的错误：http://encosia.com/2010/05/31/asmx-scriptservice-mistake-invalid-json-primitive/

---

更新：

您面临的另一个问题是Button1是一个提交按钮，当点击时提交该页面的表单。因此，即使您正在启动AJAX请求，表单提交在响应回来之前也会用作页面刷新，并且会丢失。这就是为什么你没有看到有意义的错误信息。

您可避免通过你的点击处理程序中进行到了preventDefault（）的调用，就像这样：

$(document).ready(function() { 
    $("#Button1").click(function (evt) { 
    // This prevents the form submission from happening. 
    evt.preventDefault(); 

    // The rest of your previous code here...