使用jQuery绑定ajax数据

本文关键字：数据 ajax 绑定 jQuery 使用 | 更新日期: 2023-09-27 18:21:22

我正在从我的C#WebMethod中取回数据。我不知道如何将WebMethod中的Key和Value绑定到下拉列表：

 <select name="rest" id="rest" maxlength="50" style="width: 200px;"></select>

C#

 [WebMethod]
public static Dictionary<string, string> LoadRestByCityState(string city, string state)
{
        DataSet ds = new DataSet();
        Database db = DatabaseFactory.CreateDatabase(ConfigManager.AppSettings["ConnectionString.Data"]);
        DbCommand dbCommand = db.GetStoredProcCommand("sel_RestByCityState_p");
        db.AddInParameter(dbCommand, "@pListCity", DbType.String, city);
        db.AddInParameter(dbCommand, "@pListState", DbType.String, state);
        ds = db.ExecuteDataSet(dbCommand);
        Dictionary<string, string> rest = new Dictionary<string,string>();
        foreach (DataRow row in ds.Tables[0].Rows)
        {
            rest.Add(row[0].ToString(), row[1].ToString());
        }
            return rest;
}

jQuery

  function LoadRest() {
        __state = $("#State :selected").val();
        __state = '"' + __state + '"'
        __city = $("#City :selected").val();
        __city = '"' + __city + '"'
        $.ajax({
            type: "POST",
            url: "Default.aspx/LoadRestByCityState",
            data: '{"city":' + __city + ',"state":'+ __state +'}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: true,
            cache: false,
            success:
                function (data) {
                    $.each(data[0], function(key....not sure about this stuff
                    alert('parks loaded');
                },
            fail: function () {
                alert("Error.");
            }
        });
        return false;
    }

数据正在将其传递给WebMethod

{
"state": "AL",
"city": "Auburn"
}

调试WebMethod时，我将鼠标悬停在"rest"上，它会显示Key和Value。

使用jQuery绑定ajax数据

不要使用字典，因为它不会作为集合序列化。使用列表： 
public static List<KeyValuePair<string, string>> LoadRestByCityState(string city, string state)
{
    ...
}

然后：

success: function (data) {
    var rest = $('#rest');
    rest.empty();
    $.each(data.d, function(index, item) {
        rest.append(
            $('<option/>', {
                value: item.Key,
                text: item.Value
            })
        );
    });
}

还要确保在发送值之前对其进行正确编码。我建议您使用JSON.stringify方法，因为如果城市名称中有报价，您的请求将中断：

data: JSON.stringify({city: __city, state: __state }),

JSON.stringify方法内置于现代浏览器中，但如果您需要支持传统浏览器，可以在页面中包含json2.js脚本。

尝试这个

success : function(data){
   $.each(data, function(index, elem){
      $.each(elem, function(key,value){
         $('select#rest').append('<option value="'+key+'">"'+value+'"</option>');  
      });
   });
}

更新：其他解决方案

success : function(data){
    $.each(data, function(index, elem){
          for(var key in elem){
             $('select#rest').append('<option value="'+key+'">"'+elem[key]+'"</option>');  
          }
    });
}
相关文章：