[英]Calling JSON once radio button selected
編輯:
包含名為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"> </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"> </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>
我嘗試了下面的代碼,但由於某種原因它無法正常工作。 這似乎削減了許多不相關的腳本,但即使這樣也不起作用。 然后,我打算使用此方法為每個按鈕創建一個腳本。 我想要的是,一旦選擇了“狗”單選按鈕,則在跨度中將顯示0,而在貓,1和小馬2的時候。
我做錯什么了嗎?
謝謝
我知道這個話題可能已經死了,但是我認為您的問題是在這行中var json = $.parseJSON(data); $('#displayresults').html(json.dog);
var json = $.parseJSON(data); $('#displayresults').html(json.dog);
您的對象沒有屬性'dog',因此您必須像json[1]
或json['1']
一樣調用它。
您可以使用jQuery綁定到單選點擊事件,然后匹配標簽中的值(或將單選value
更改為返回值,即“狗”,“魚”,“兔子”),然后使用它們來獲取“結果”。
例:
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"> </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"> </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。 如果data參數的值是純對象,則將其轉換為字符串並經過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"> </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"> </label> <div class="radio"> <input type="radio" name="optionsRadios" id="optionsRadios3" value="Rabbit"> <label>Rabbit</label> </div> </div> <div id="displaydata"></div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.