如何使用javascript从asp.net webservice中使用Json数据

时间:2016-11-12 12:47:07

标签: javascript c# asp.net json web-services

曾几何时,有一个人在工作的项目。该项目有一个母版页和一个内容页面。内容页面有一个下拉列表和两个文本框。但是,当此人从下拉列表中选择任何产品名称时,它的totalQuantitypricePerItem值并没有出现在文本框中!他试图为这个项目编写Web服务代码和javascript代码,但不幸的是,它并没有按照他应该和将要做的那样做。因此,他正在请求你的帮助。

 public class QuantityAndPrice
{
    public string totalQuantity { get; set; }
    public string pricePerItem { get; set; }
}
  

网络服务代码

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

    [WebMethod]
    public void GetQuantityAndPrice(string productName)
    {
        QuantityAndPrice quantityAndpriceObject = new QuantityAndPrice();

        string connect_string = "datasource=localhost;port=3306;username=root;password=root;";
        MySqlConnection connection = new MySqlConnection(connect_string);
        string query = "select totalQuantity,pricePerItem from smart_shop.inventory where name='" + productName + "';";
        MySqlCommand  cmd = new MySqlCommand(query, connection);
        connection.Open();
        MySqlDataReader   reader = cmd.ExecuteReader();



        while (reader.Read())
        {
            quantityAndpriceObject.totalQuantity = reader.GetString("totalQuantity");
            quantityAndpriceObject.pricePerItem = reader.GetString("pricePerItem");
        }

        JavaScriptSerializer js = new JavaScriptSerializer(); 
       Context.Response.Write(js.Serialize(quantityAndpriceObject));


    }
}
  

的javascript



 <script type="text/javascript">

        $(document).ready(function () {
            $('#productNameDDL').change(function () {

                var pName = $('#productNameDDL').val();

                $.ajax({

                    url: 'QuantityAndPriceService.asmx/GetQuantityAndPrice',
                    data: { productName: pName },
                    method: 'post',
                    dataType: 'json',
                    success: function (data) {

                        $('#tbxAvailableQuantity').val(data.totalQuantity);
                        $('#tbxPricePerItem').val(data.pricePerItem);
                    },
                    error: function (err) {
                        alert(err);
                    }
                });
            });
        });


    </script>
&#13;
&#13;
&#13;

  

这里是aspx代码

<div class="panel-body">
                <div class="row">
                    <div class="col-md-6"> 
                         <h6>&nbsp;&nbsp;Available Qty</h6>
                         <asp:TextBox ID="tbxAvailableQuantity" CssClass="form-control" ReadOnly="true" runat="server"></asp:TextBox>
                    </div>

                    <div class="col-md-6">
                         <h6>&nbsp;&nbsp;Price/Item</h6>
                          <asp:TextBox ID="tbxPricePerItem" CssClass="form-control" ReadOnly="true" runat="server"></asp:TextBox>
                    </div>

                </div> 
                <div class="row">
                    <div class="col-lg-6">
                         <h6>&nbsp;&nbsp;Sales Qty</h6>
                         <asp:TextBox ID="tbxSalesQtuantity" CssClass="form-control" runat="server"></asp:TextBox>
                    </div>
                    <div class="col-lg-6">
                         <h6>&nbsp;&nbsp;Total Price</h6>
                         <asp:TextBox ID="tbxTotalPrice" CssClass="form-control" runat="server"></asp:TextBox>
                    </div>
                </div>                 

            </div>




  <asp:DropDownList ID="productNameDDL" CssClass="form-control" runat="server"></asp:DropDownList>

1 个答案:

答案 0 :(得分:0)

  1. Web服务类应该有 ScriptService 属性。
  2. Web服务方法应该有ScriptMethod 用于指定ResponseFormat = ResponseFormat.Json
  3. 的属性
  4. 在java脚本contentType: "application/json; charset=utf-8"中应指定dataType: 'json'
  5. ajax调用成功部分的结果包含在d中,例如像这样data.d.totalQuantity
  6. ajax调用中的数据应该被字符串化,例如像这样data:JSON.stringify({ productName: pName })
  7. [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    [ScriptService]
    public class QuantityAndPriceService : WebService
    {
        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public QuantityAndPrice GetQuantityAndPrice(string productName)
        {
            QuantityAndPrice quantityAndpriceObject = new QuantityAndPrice
            {
                totalQuantity = "totalQuantityValue",
                pricePerItem = "pricePerItemValue"
            };
            return quantityAndpriceObject;
        }
    }
    
    $.ajax({
        url: 'QuantityAndPriceService.asmx/GetQuantityAndPrice',
        data: JSON.stringify({ productName: pName }),
        method: 'post',
        contentType: "application/json; charset=utf-8",
        dataType: 'json',
        success: function (data) {
            $('#tbxAvailableQuantity').val(data.d.totalQuantity);
            $('#tbxPricePerItem').val(data.d.pricePerItem);
        },
        error: function (err) {
            alert(err.responseText);
        }
    });