[英]How to consume Json data from asp.net webservice with javascript
Once upon a time, there was a project on which a person was working. 曾几何时,有一个人在工作的项目。 This project had a master page and a content page.
该项目有一个母版页和一个内容页面。 The content page had a drop-down list and two text boxes.
内容页面有一个下拉列表和两个文本框。 However, when the person selected any product name from the drop-down list, how curious, it's
totalQuantity
and pricePerItem
values did not appear in the text boxes! 但是,当这个人从下拉列表中选择任何产品名称时,有多好奇,它的
totalQuantity
和pricePerItem
值没有出现在文本框中! He was trying to write web service code and javascript code for this project, but unfortunately it did not do what he had in mind it should and would do. 他试图为这个项目编写Web服务代码和javascript代码,但不幸的是,它并没有按照他应该和将要做的那样做。 Therefore, he is requesting your help.
因此,他正在请求你的帮助。
public class QuantityAndPrice
{
public string totalQuantity { get; set; }
public string pricePerItem { get; set; }
}
webservice code
网络服务代码
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
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>
and here aspx code
这里是aspx代码
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<h6> Available Qty</h6>
<asp:TextBox ID="tbxAvailableQuantity" CssClass="form-control" ReadOnly="true" runat="server"></asp:TextBox>
</div>
<div class="col-md-6">
<h6> 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> Sales Qty</h6>
<asp:TextBox ID="tbxSalesQtuantity" CssClass="form-control" runat="server"></asp:TextBox>
</div>
<div class="col-lg-6">
<h6> 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>
ResponseFormat = ResponseFormat.Json
. ResponseFormat = ResponseFormat.Json
。 contentType: "application/json; charset=utf-8"
and dataType: 'json'
should be specified. contentType: "application/json; charset=utf-8"
和dataType: 'json'
应该被指定。 d
eg like this data.d.totalQuantity
. d
例如像data.d.totalQuantity
。 data:JSON.stringify({ productName: pName })
data:JSON.stringify({ productName: pName })
[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);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.