动态更改Ajax请求的url
动态更改Ajax请求的url
提问于 2019-11-02 10:40:57
我的网页上有一个普通的数据表，看起来是这样的：
$(document).ready(function() {
var table = $('#mydb').DataTable({
"serverSide": true,
"ajax": "/myapi/?item=free&format=datatables",
"columns": [
{data: "item",
{data: "Price"},
]
});
setInterval( function () {
table.ajax.reload();
}, 10000 );
});此表每10秒刷新一次，从我的数据库中检索最新值。
现在，我想添加一个按钮来动态地更改网页的内容，这样它就可以从?item=taken而不是?item=free检索值，而无需刷新页面。
以下是我尝试过的：
var myvar = 'item=free'
function ChangeVar(){
myvar = 'item=taken'
}
$(document).ready(function() {
var table = $('#mydb').DataTable({
"serverSide": true,
"ajax": "/myapi/?'+ myvar + '&format=datatables",
"columns": [
{data: "item",
{data: "Price"},
]
});
setInterval( function () {
table.ajax.reload();
}, 10000 );
});<button onclick="ChangeVar()" name="button5" type="submit" class="btn btn-primary">See taken items</button>我添加了一个指向函数ChangeVar()的按钮，函数应该更改主变量的名称，这是在ajax请求中使用的。这没有起作用，可能是因为我没有正确地使用变量的作用域，而且我认为它不会工作，因为Ajax是无时的，所以我需要添加更多内容。
有人能告诉我一个解决这个问题的方法吗？
回答 5
Stack Overflow用户
回答已采纳
发布于 2019-11-05 01:45:52
DataTables有自己的方法来动态地更改ajax：table.ajax.url('URL')。这样你就不用每次都毁了这个物体。
我已经做了下面的例子，所以每个间隔的间隔都会重新加载。但是，当使用table.ajax.url('')时，您可以链接.load()方法来立即检索数据。
参见此示例：
$(document).ready(function() {
let test = $('#example').DataTable({
ajax: {
url: 'https://jsonplaceholder.typicode.com/posts',
dataSrc: ''
},
columns: [{
data: 'userId'
},
{
data: 'id'
},
{
data: 'title'
}
]
});
changeVar = function() {
test.ajax.url("https://jsonplaceholder.typicode.com/albums");
}
setInterval(function() {
test.ajax.reload();
console.log("Interval");
}, 10000);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" rel="stylesheet" />
<body>
<button onclick="changeVar()" name="button5" type="submit" class="btn btn-primary">See taken items</button>
<br><br>
<div id="container">
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Body</th>
</tr>
</thead>
</table>
</div>
</body>
Stack Overflow用户
发布于 2019-11-05 03:25:36
您的代码有一个问题
"ajax": "/myapi/?item=free&format=datatables",定义ajax时，URL将保存在表实例上，因此修改变量myvar将无法更改表实例中的url。但是Datatable允许您通过API table.ajax.url(newURL).更改ajax url。我还修改了变量和函数的作用域，下面的脚本将工作
var myvar = 'item=free';
var table;
function ChangeVar(){
myvar = 'item=taken'
table.ajax.url("/myapi/?'+ myvar + '&format=datatables");
}
$(document).ready(function() {
table = $('#mydb').DataTable({
"serverSide": true,
"ajax": "/myapi/?'+ myvar + '&format=datatables",
"columns": [
{data: "item",
{data: "Price"},
]
});
setInterval( function () {
table.ajax.reload();
}, 10000 );
});不破坏表并重新创建新表，这不利于性能
Stack Overflow用户
发布于 2019-11-05 11:11:35
代码中有语法错误，您使用的是单引号而不是双引号。
"ajax": "/myapi/?'+ myvar + '&format=datatables"所以js将myvar作为字符串而不是变量。试一试
"ajax": "/myapi/?"+ myvar + "&format=datatables"另外，你在这里漏掉了一个结束括号，{data: "item"
var table = $('#mydb').DataTable({
"serverSide": true,
"ajax": "/myapi/?"+ myvar + "&format=datatables",
"columns": [
{data: "item"},
{data: "Price"},
]
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58670298
复制相关文章
相似问题
腾讯云开发者
