我有2个单选按钮，我想使不同的ajax页面加载到一个div元素取决于哪一个被选中

Question

我有2个单选按钮，用于在2个位置之间进行选择，以便在选择时可以从外部文件加载不同的PHP页面。但是这个文件也需要自动刷新，这样它就可以每3分钟显示一次最新的信息。

这些是我的单选按钮:

<div class="locationdrop">
<div class="dropbtn">Location</div>
<div class="locationlist">
<input type="radio" id="location1" name="location" value="Location 1" class="locationinput" checked="checked">
<label for="location1" class="locationlabel">Location 1</label>
<input type="radio" id="location2" name="location" value="Location 2" class="locationinput">
<label for="location2" class="locationlabel">Location 2</label>
</div>
</div>
</div>

这是我的脚本(使用自动更新AJAX):

<script>
$(document).ready(function() {
function getData() {
if(document.getElementById('location1').checked) {
$.ajax({
type: 'POST',
url: 'location1data.php',
success: function(data){
$('#locationoutput').html(data);
} 
});
}else if(document.getElementById('location2').checked) {
$.ajax({
type: 'POST',
url: 'location2data.php',
success: function(data){
$('#locationoutput').html(data);
} 
});
getData();
setInterval(function () {
getData(); 
}, 120000);  // it will refresh your data every 3 mins
};
};
});
</script>

这是我的原始(工作)代码加载php到div:

<script>
$(document).ready(function(){
function getData(){
$.ajax({
type: 'POST',
url: 'locationData.php',
success: function(data){
$('#locationoutput').html(data);
}
});
}
getData();
setInterval(function () {
getData(); 
}, 120000);  // it will refresh your data every 1 sec
});
</script>

我只需要它使用单选按钮在其中两个中进行选择。

感谢您的帮助:)

Answer 1

试试这个:

$(document).ready(function() {
function getData() {
if(document.getElementById('location1').checked) {
$.ajax({
type: 'POST',
url: 'location1data.php',
success: function(data){
$('#locationoutput').html(data);
} 
});
}else if(document.getElementById('location2').checked) {
$.ajax({
type: 'POST',
url: 'location2data.php',
success: function(data){
$('#locationoutput').html(data);
} 
});
};
};
getData();
setInterval(function () {
getData(); 
}, 120000);  // it will refresh your data every 3 mins
});

这样更有效率

$(document).ready(function() {
let location_one = document.getElementById('location1');
let location_two = document.getElementById('location2');
let getLocationOneData = function () {
$.ajax({
type: 'POST',
url: 'location1data.php',
success: function(data){
$('#locationoutput').html(data);
}
});
};
let getLocationTwoData = function () {
$.ajax({
type: 'POST',
url: 'location2data.php',
success: function(data){
$('#locationoutput').html(data);
}
});
};
let getData = function () {
if (location_one.checked) {
getLocationOneData();
} else if (location_two.checked) {
getLocationTwoData();
}
}
location_one.addEventListener('change', function () {
if (this.checked) {
getLocationOneData()
}
});
location_two.addEventListener('change', function () {
if (this.checked) {
getLocationTwoData();
}
});
setInterval(function () {
getData();
}, 120000);  // it will refresh your data every 3 mins
});

Answer 2

在变量中设置URL值，var myURL = "location2data.php"使用

$.ajax({
type: 'POST',
url: myURL,  //// here 
success: function(data){
$('#locationoutput').html(data);
}