正确使用jQuery.Ajax脚本中JSON的返回值
我有2个DropDownList，就像Master-Slave一样。 这是我的Default.aspx：
这是我的脚本：
$(document).ready(function () { $('select#Masterddl').change(function () { MasterChangeHandler($(this).val()); }); function MasterChangeHandler(Value) { $.ajax({ type: 'Post', url: 'MasterSlaveHandler.ashx', dataType: "text", data: 'ItemSelected=' + Value, async: 'true', success: function (data) { SuccessHandler1(data); } }); } function SuccessHandler1(data) { $('select#Slaveddl').empty(); $.each(data, function (i, slaveValue) { $('select#Slaveddl').append( $('').val(slaveValue.Value).html(slaveValue.Text) ); }); }
和我的处理程序：
public class SlaveValues { public string Value { get; set; } public string Text { get; set; } } public class MasterSlaveDropDownListsHandler : IHttpHandler { public bool IsReusable { get { return true; } } public void ProcessRequest(HttpContext context) { string valueSelected = context.Request["ItemSelected"]; List slaveValues = new List(); SlaveValues sv; sv = new SlaveValues(); sv.Text = "SV1"; sv.Value = valueSelected + "s1"; slaveValues.Add(sv); sv = new SlaveValues(); sv.Text = "SV2"; sv.Value = valueSelected + "s2"; slaveValues.Add(sv); string responseText = Newtonsoft.Json.JsonConvert.SerializeObject(slaveValues); context.Response.ContentType = "text/json"; context.Response.Write(responseText); } }
但是没有什么要追加的。 另外，我在firebug窗口中看到响应如下（当我从Master ddl中选择G2时）：
[{"Value":"G2s1","Text":"SV1"},{"Value":"G2s2","Text":"SV2"}]
对于更具体的视图，当我在Master ddl中选择G3时，以下图片是firebug窗口中的JSON选项卡：
我用这个新的测试方法更改了我的脚本成功方法：
function SuccessHandler2(data) { $('select#Slaveddl').empty(); $.each(data, function (i, slaveValue) { $('select#Slaveddl').append( $('').val('Member' + i).html('Member' + i) ); }); }
当尝试这个新脚本时，对Slave ddl的绑定工作正常，但有一些额外的项目：索引显示member0到member30，我不知道为什么。
我也尝试这个并正确追加：
function SuccessHandler3(data) { var values = [{ "Value": "G2s1", "Text": "SV1" }, { "Value": "G2s2", "Text": "SV2"}]; $('select#Slaveddl').empty(); $.each(values, function (i, slaveValue) { $('select#Slaveddl').append( $('').val('Member' + slaveValue.Value).html('Member' + slaveValue.Text) ); }); }
所以我认为操纵返回值（数据）存在问题。
我也尝试这个，只出现第一个警报，显然（data.d）是null或未知对象：
function SuccessHandler4(data) { var selection = $('select#Slaveddl'); $(selection).children().remove(); alert('in handler and remove children correctly'); if (data.d) { alert('data.d is not null'); $(data.d).each(function (index, item) { $(selection).append('').val(item.Value).html(item.Text); alert('after append in index: ' + index); }); } }
如何正确使用返回值并附加到Slave ddl？ 问题出在哪儿？
编辑：
通过脚本和处理程序中的一些更改找到它，如下所示：
脚本：
$(document).ready(function () { $('select#Masterddl').change(function () { CallHandler(); }); function CallHandler() { $.ajax({ url: "FinalRequest.ashx", contentType: "application/json; charset=utf-8", data: { 'ItemSelected': $('select#Masterddl').val(), 'ID': $('select#Masterddl').attr('id') }, dataType: "json", responseType: "json", success: function (data) { SuccessHandler(data); }, error: OnFail }); return false; } function SuccessHandler(data) { $('select#Slaveddl').empty(); $.each(data, function (i, slaveValue) { $('select#Slaveddl').append( $('').val(slaveValue.Value).html(slaveValue.Text) ); }); } function OnFail(result) { alert('Request failed'); } });
处理器：
public class FinalMasterSlaveHandler : IHttpHandler { public bool IsReusable { get { return false; } } public void ProcessRequest(HttpContext context) { string valueSelected = context.Request["ItemSelected"]; string IDSelected = context.Request["ID"]; List slaveValues = new List(); SlaveValues sv; sv = new SlaveValues(); sv.Text = valueSelected + IDSelected + "T1"; sv.Value = valueSelected + IDSelected + "V1"; slaveValues.Add(sv); sv = new SlaveValues(); sv.Text = valueSelected + IDSelected + "T2"; sv.Value = valueSelected + IDSelected + "V2"; slaveValues.Add(sv); JavaScriptSerializer javaScriptSerializer = new JavaScriptSerializer(); string responseText = javaScriptSerializer.Serialize(slaveValues); context.Response.ContentType = "text/json"; context.Response.Write(responseText); } }
在你的代码的海洋中，我发现dataType: 'text'应该是dataType: 'json' 。
请参阅jQuery.ajax(settings)文档 。