如何根据单击的按钮更新Ajax调用？
如何根据单击的按钮更新Ajax调用？
提问于 2019-09-27 14:56:57
我有下面的HTML代码，其中包含了引导标签/药片。我的目标是让用户看到前一天和最后七天的数据计数，这取决于他们选择的选项卡。我有一个阿贾克斯的工作电话，从过去的24小时到最后的7天都有记录。
但是，每当我单击“Week”选项卡时，数据仍然显示白天的数据。有人能告诉我哪里出了问题吗？
谢谢
HTML：
<div class="col-md-4 border rounded">
<h4><u>Count </u></h4>
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" onclick="$('#time_runs').text('day-time')" href="#today_num">Day</a></li>
<li><a data-toggle="pill" onclick="$('#time_runs').text('week-time')" href="#week_num">Week</a></li>
</ul>
</div>AJAX调用：
$(document).ready(function getMetadata() {
$(function poll() {
$.ajax({
url: "<!--#include virtual="../include/env"-->/count/" + ($('#time_runs').text() == '' ? 'day-time' : $('#time_runs').text()),
type: "GET",
cache: "false",
success: function(data) {
count(data);
},
dataType: "json"
});
})
})
;回答 2
Stack Overflow用户
回答已采纳
发布于 2019-09-30 08:24:32
下面是如何完全使用Bootstrap的内置选项卡功能来实现它。有关更多信息，请参见引导文档。
注意，我在这里使用了一个虚拟URL，它总是返回相同的数据，但这只是一个细节--这里的要点是
( a)根据文档正确设置选项卡
( b)响应“选项卡显示”事件，以便触发一个新请求以获取计数
( c)将发送给服务器的值存储在选项卡的数据属性中，告诉服务器要返回哪些数据，而不是在设置和读取另一个单独字段的值时搞砸。
注意:您可能需要考虑缓存数据和/或将这些计数预加载到页面中，而不是每次显示选项卡时都发出AJAX请求。由于您似乎有固定数量的选项卡，而且计数数据很小，所以每次用户单击选项卡时继续发出HTTP请求来获取这一微小的数据似乎效率低下。除非每隔几秒钟在服务器上更改这些数据，否则不太可能产生不同的结果。
$(document).ready(function() {
$('a[data-toggle="tab"]').on('shown.bs.tab', function() {
var time = $(this).data("time");
console.log(time);
$.ajax({
url: "https://api.myjson.com/bins/zzirx?time=" + time,
type: "GET",
cache: "false",
success: function(data) {
console.log(data);
},
dataType: "json"
});
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-4 border rounded">
<h4><u>Count </u></h4>
<ul class="nav nav-pills" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="day-tab" data-toggle="tab" data-time="day-time" href="#day" role="tab" aria-controls="day" aria-selected="true">Day</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-week" data-toggle="tab" data-time="week-time" href="#week" role="tab" aria-controls="week" aria-selected="false">Week</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="day" role="tabpanel" aria-labelledby="home-tab">Day</div>
<div class="tab-pane fade" id="week" role="tabpanel" aria-labelledby="profile-tab">Week</div>
</div>
</div>
Stack Overflow用户
发布于 2019-09-27 15:32:04
嗨，这里是一个使用代码进行一些修改的示例，这里是小提琴
- 在本例中，向
ul添加一个id，我们将使用#nav-pills。 - 将名为
selected的数据属性添加到ul元素中。 - 在您的每一次单击中，我都会为这个
onclick="$('#time_runs').text('week-time')"更改这个onclick="return $('#nav-pills').data('selected','today')"。 - 由于我们现在不执行您的轮询函数，所以我在您的
ul上添加了一个委托事件，比如这个$('#nav-pills').on('click','li>a'。
$(document).ready(()=>{
$('#nav-pills').on('click','li>a',(e)=>{
//your ajax call here instead of this example one
let time = $('#nav-pills').data("selected");
console.log(time);
json = {
today:"todays log yay!!!",
weak:"a Weak ago log,lets rock"
};
$.ajax({
url: '/echo/json/',
type: 'POST',
dataType: 'JSON',
data: {time: time, json:JSON.stringify(json)}
}).done((response)=>{
console.log(time,response)
})
})
}) <script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="col-md-4 border rounded">
<h4><u>Count </u></h4>
<ul id="nav-pills" class="nav nav-pills" data-selected="">
<li class="active"><a data-toggle="pill" onclick="return $('#nav-pills').data('selected','today')" href="#today_num">Day</a></li>
<li><a data-toggle="pill" onclick="return $('#nav-pills').data('selected','weak')" href="#week_num">Week</a></li>
</ul>
</div>
希望它能帮上忙
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58136990
复制相关文章
相似问题
腾讯云开发者
