正确使用jQuery.Ajax脚本中JSON的返回值

阙庆

2023-03-14

问题内容：

我有2个DropDownList，例如Master-Slave。这是我的Default.aspx：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>
            <asp:Label ID="MsLbl" runat="server" Text="Groups" />
                </td>
                <td>
            <asp:DropDownList ID="Masterddl" runat="server">
                    <asp:ListItem Text="G1" Value="G1" />
                    <asp:ListItem Text="G2" Value="G2" />
                    <asp:ListItem Text="G3" Value="G3" />
            </asp:DropDownList>
                </td>
            </tr>
            <tr>
                <td>
            <asp:Label ID="Svlbl" runat="server" Text="Members" />
            </td>
                <td>
            <asp:DropDownList ID="Slaveddl" runat="server" />
            </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

这是我的脚本：

$(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(
    $('<option></option>').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> slaveValues = new List<SlaveValues>();
        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选项卡：

Firebug窗口中的JSON选项卡

我用这个新的脚本来更改脚本的成功方法：

function SuccessHandler2(data) {
    $('select#Slaveddl').empty();
    $.each(data, function (i, slaveValue) {
        $('select#Slaveddl').append(
    $('<option></option>').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(
$('<option></option>').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('<option>').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(
    $('<option></option>').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> slaveValues = new List<SlaveValues>();
        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)文档。

正确使用jQuery.Ajax脚本中JSON的返回值

相关阅读

相关文章

相关问答

相关工具

相关文档