选择单选按钮后调用JSON

我知道这个话题可能已经死了，但我认为你的问题在于这条线路var json = $.parseJSON(data); $('#displayresults').html(json.dog);您的对象没有属性"dog"，所以您必须像json[1]或json['1']那样调用它。

您可以使用jQuery绑定到单选点击事件，然后匹配标签中的值(或将单选value更改为返回值，即"Dog"、"Fish"、"Rabbit"(，然后使用它来获取"结果"。

示例：

var data = {
  "result1": "Dog",
  "result2": "Fish",
  "result3": "Rabbit"
};
$('input[name="optionsRadios"]').click(function(){
    
    var radioVal = $(this).val(); // <-- if you change input val
    var labelVal = $(this).next('label').html(); //<-- get the label HTML
    
    // get the correct item from the data object
    $.each(data, function(k,v){
    
        if(v === labelVal){
        
          // added to results div
          $('#displaydata').html(k + " " + v);
          
        }
      
    });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group" id="radiobuttongroup">
  <label for="inputservice" class="col-sm-2 control-label">Service</label>
  <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios1" value="Dog"> <!-- <-- Changed value -->
      <label>Dog</label>
  </div>
  <label for="inputservice" class="col-sm-2 control-label">&nbsp</label>
  <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios2" value="Fish">
      <label>Fish</label>
  </div>
  <label for="inputservice" class="col-sm-2 control-label">&nbsp</label>
  <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios3" value="Rabit">
      <label>Rabbit</label>
  </div>
</div>
<div id="displaydata"></div>

[编辑-JQuery .ajax()上的信息]

在您的评论中，您正在使用jQuery的.getJSON()函数。根据文档，这只是相当于的简写

// example:
$.ajax({
  dataType: "json",
  url: url,
  data: data,
  success: success
});

其中：

发送到服务器的数据[data]被附加到URL作为查询一串如果数据参数的值是普通对象，则为转换为字符串并编码url，然后将其附加到URL。

请同时查看.getJSON()文档[链接到上面]和.ajax()文档。

下面是一些伪代码，它有效地描述了如何处理获取ajax结果并使用jquery显示它：

[注意-如果您有更多特定于ajax的问题或需要帮助解决您的请求，请将该主题作为新问题打开，并提供您尝试过的示例]

// psuedo code for ajax request
// setup:
// global variable for results object so it can be used by other functions
// inentionally left as 'undefined' for debugging:
var results;
// radio click event:
$('input[name="optionsRadios"]').click(function() {
  
  var radioVal = $(this).val();
  
  //see helper function below
  // adds response objec to 'results` variable
  getObject(radioVal);
  
  
  $('#displaydata').html(results);
  
});
// seperate function for ajax call
function getObject(id) {
  
  var reqData = { "id" : id };
  
  // fake ajax:
  $.ajax({
    dataType: "json",
    url: "/objContoller/",
    data: reqData,
    success: function(data){
      // here's where you handle success!
      // data can be accessed exactly how it was in the previous example
      // you can parse it and...
      // global variable assignment:
      
      results = JSON.parse(data);
      
      // or just return the json
      // results = data;
      
    },
    error: function(response){
      // always handle the error..
      // how you deal with this is based on server side code
      alert("this is just an example, so it will always throw this error!!! ID: " + id + " || reqData: " + JSON.stringify(reqData));
    }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group" id="radiobuttongroup">
  <label for="inputservice" class="col-sm-2 control-label">Service</label>
  <div class="radio">
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="Dog">
    <label>Dog</label>
  </div>
  <label for="inputservice" class="col-sm-2 control-label">&nbsp</label>
  <div class="radio">
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="Fish">
    <label>Fish</label>
  </div>
  <label for="inputservice" class="col-sm-2 control-label">&nbsp</label>
  <div class="radio">
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="Rabbit">
    <label>Rabbit</label>
  </div>
</div>
<div id="displaydata"></div>