Question

请在我的介绍/中级编程课程中帮助完成我的最终项目。

使用存储过程，表适配器和业务类，他希望我们使用“Supplier”表中的字段填充ASP.NET gridview（我有这个工作）。

然后，他希望我们使用存储过程为每个供应商列出产品，并根据supplierID将参数列出到列表产品。我可以使用ASP.NET对象和可视gridview特性（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

“products”和“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

第一个问题（你在错误处理程序中结束的原因）是你需要将一个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...

需要协助使用JQuery-AJAX调用webMethod

1 个答案: