ajax处理select下拉表单

最新推荐文章于 2022-03-25 01:32:24 发布

weixin_34128411

最新推荐文章于 2022-03-25 01:32:24 发布

阅读量184

点赞数

文章标签： json

本文详细介绍了如何通过JavaScript AJAX请求动态加载游戏服务器列表，并利用Chosen和Autocomplete插件提升用户选择体验。重点讨论了如何在选择列表中动态显示加载状态和错误处理机制，确保用户界面的流畅性和可用性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    $('#gameid').change(function() {
        var gameid = $(this).val();
        if (this.value != '') {
            $.ajax({
                url: '/market/task/?act=ajax_get_game_server_list&gameid=' + gameid,
                type: 'get',
                dataType: 'json',
                beforeSend: function() {
                    $('#load_game_server').html("<image src='http://pages.19youxi.me/admin/css/images/loading.gif'>");
                },
                success: function(data) {
                    if (data.errorNum == 0) {
                        var game_server_list = data.game_server_list;
                        $("#serverid").find('option').eq(1).nextAll().remove();
                        if (game_server_list) {
                            for(var i=0; i < game_server_list.length; i++) {
                                var option = "<option value='" + game_server_list[i]['id'] + "'>" + game_server_list[i]['servername'] + "</option"
                                $("#serverid").append(option);
                            }
                        }
                        $("#load_game_server").html("");
                    } else {
                        alert(data.errorMsg);
                    }
                },
                error: function() {
                    alert('未知错误！');
                }
            });
        }
    });

返回后处理data还可以用map函数处理：

$(function() {

$(".chzn-select").chosen();
$(".chzn-select-deselect").chosen({allow_single_deselect:true});

$('.chzn-choices input').autocomplete({
   source: function( request, response ) {
      $.ajax({
          url: "/change/name/autocomplete/"+request.term+"/",
          dataType: "json",
          success: function( data ) {
             response( $.map( data, function( item ) {
                $('ul.chzn-results').append('<li class="active-result">' + item.name + '</li>');

          }
       });
    }
});