Question

我正试图让这个ajax调用工作：

<script type="text/javascript">
$( document ).ready(function() {

        $('#home_location').change(function(){
                $.ajax({
                        url: 'GetCommunities.php',
                        data: {id: $(this).val()},
                        datatype: 'json',
                        success: function(data){
                                console.log(data);
                        }
                });
        });

});
</script>

控制台日志返回我的数据：

[{"rb_communityId":"8","rb_communityLabel":"Sunflower","rb_communityOrder":"12","rb_locationId":"4"}]

我的问题是如何将rb_communitiyId转换为数组并使用该数组来选择替换当前下拉列表的选项？

Answer 1

此代码：

$.ajax({
   url: 'GetCommunities.php',
   data: {id: $(this).val()},
   datatype: 'json',
   success: function(data){
      console.log(data);
   });
});

NOT 会导致 JSON 对象，但是在字符串中！将数据类型替换为 dataType ，并确保在您的php文件中调用echo json_encode(your_array); exit;。

通常情况下，您可以访问success中的数据（data.rb_communityId）以及更改下拉列表，只需使用以下内容:(将#mydropdown替换为您自己的ID）< / p>

$("#mydropdown").val( data.rb_communityId );

假设 .communityId 是您的下拉列表的值。

如果您想完全根据数据替换下拉列表，请执行此操作（再次成功）：

$("#mydropdown option").remove();
$.each(data,function(key,value) {
   $("#mydropdown").append($("<option></option>",{value:value["rb_communityId"],text:value["rb_communityLabel"]}));
});

我找不到其他两个变量的用途，上面会添加值和文字。

Answer 2

您的数据是Json格式，因此您需要遍历数据并使用jquery处理您的html -

     <script type="text/javascript">
    $( document ).ready(function() {

            $('#home_location').change(function(){
                    $.ajax({
                            url: 'GetCommunities.php',
                            data: {id: $(this).val()},
                            datatype: 'json',
                            success: function(data){
                                   alert(data.rb_communityId);
//this how you access to ther b_communityId

                            }
                    });
            });

    });
    </script>

Answer 3

假设您要替换特定<option>元素的所有<select>元素，您可以执行以下操作。但是，请记住更新<select>元素选择器 - 我使用了虚拟选择器selectEleSelector。

$( document ).ready(function() {
    $('#home_location').change(function(){
        $.ajax({
            url: 'GetCommunities.php',
            data: {id: $(this).val()},
            datatype: 'json',
            success: function(data){
                // Empty the <select> element of interest
                $(selectEleSelector).empty();

                // Iterate through your json array
                $.each(data, function(i,v) {
                    // Construct <option>
                    var $opt = $('<option />', {
                        value: this.rb_communityId,
                        text: this.rb_communityLabel
                    });

                    // Append construct to <select>
                    $opt.appendTo(selectEleSelector);
                });
            }
        });
    });
});

我的回答是假设您希望rb_communityId成为选项的值，而rb_communityLabel作为文本。如果那不是您想要的，您可以在适当的时候切换密钥:)

Answer 4

您需要在success部分

中替换组合框构建器代码

$('#home_location').change(function(){
    $.ajax({
       url: 'GetCommunities.php',
       data: {id: $(this).val()},
       datatype: 'json',
       success: function(data){
          var s = $('<select />');

          var obj = $.parseJSON(data);
          $('<option />', {value: obj.rb_communityId, text: obj.rb_communityLabel}).appendTo(s);
       }
    });
});

如果它是返回值中的多个选项，则需要将解析部分放在$.each

中

Jquery Ajax调用php脚本我该如何处理数据？

4 个答案: