Question

包含名为services.json的Json文件：

{
"0": "Dog",
"1": "Cat",
"2": "Pony"
}

HTML：

   <form class="form-horizontal">
                    <div class="form-group" id="radiobuttongroup">
                        <label for="inputservice" class="col-sm-2 control-label">Service</label>
                            <div class="radio">
                                <label>
                                <input type="radio" class="buttondog" name="optionsRadios" id="optionsRadios1" value="Dog">
                                Dog</label>
                            </div>
                        <label for="inputservice" class="col-sm-2 control-label">&nbsp</label>
                            <div class="radio">
                                <label>
                                <input type="radio" class="buttoncat" name="optionsRadios" id="optionsRadios2" value="Cat">
                                Cat</label>
                            </div>
                        <label for="inputservice" class="col-sm-2 control-label">&nbsp</label>
                            <div class="radio">
                                <label>
                                <input type="radio" class="buttonpony" name="optionsRadios" id="optionsRadios3" value="Pony">
                                Pony</label>
                            </div>
                        </div>
                    <span id="displayresults"></span>

Jquery我正在尝试：

    <script type="text/javascript">
$(document).ready(function() {
     $('.buttondog').click(function(){
        $.ajax({
            url: "services.json",
            dataType: "text",
            success: function(data){
                var json = $.parseJSON(data);
                     $('#displayresults').html(json.dog);
                }
            });
        });
    });
</script>

我尝试了很多东西，但没有任何效果。这似乎削减了很多不相关的剧本，但即使这样也没有用。我当时打算使用这种方法为每个按钮创建一个脚本。我想要的是，一旦选择了狗单选按钮，当猫，1和小马2时，0将显示在跨度中。

我做错了什么？

Answer 1

您可以尝试使用此脚本，但这不是推荐的做事方式。您要查询的参数应该是所需值的键。

var data = {
"0": "Dog",
"1": "Cat",
"2": "Pony"
}; // Replace this with your ajax call

$(document).ready(function(){
    $('input').on("click", function(e){
         for(var i = 0; i < data.length; i++){
             if(data[""+i] == $(this).attr("value")) {
                 $("#displayresults").html(i);
             } else {
                 continue;
             }
         }
    });
});

从Ajax调用json文件，并使用单选按钮显示数据

1 个答案: