问动态更改Ajax请求的url
EN

Stack Overflow用户

提问于 2019-11-02 02:40:57

回答 5查看 1.9K关注 0票数 1

我的网页上有一个普通的数据表，看起来是这样的：

$(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是无时的，所以我需要添加更多内容。

有人能告诉我一个解决这个问题的方法吗？

datatable

javascript

jquery

ajax

人脸识别特惠活动

精准实时的人脸检测、分析、识别等服务，在线、离线满足多样需求，可应用于智慧零售、智慧社区、在线娱乐等多种应用场景

回答 5

Stack Overflow用户

回答已采纳

发布于 2019-11-04 17: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>

票数 4

Stack Overflow用户

发布于 2019-11-04 19: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 );
});

不破坏表并重新创建新表，这不利于性能

票数 1

Stack Overflow用户

发布于 2019-11-05 03: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"},

    ]
});