更改URL的一部分以在JavaScript中显示不同的数据

Question

JSFiddle Code

在这段代码中，我将数据从JSON url解析到一个表中。

当URL的某一部分被更改时，会出现不同的搜索结果。因此，我尝试让用户选择输入不同的关键字，从而产生不同的结果。

在python中我会使用f字符串请求，在JavaScript中有类似的选项吗？

Python示例：

device_name = simpledialog.askstring(title="510K Database",
prompt="Enter Keyword:")

r = requests.get(f'https://api.fda.gov/device/510k.json?search=device_name:{device_name}&limit=1000')`

我的JavaScript代码

    $(document).ready( function () {
  var table = $('#example').DataTable({
    ajax: {
      url: 'https://api.fda.gov/device/510k.json?search=device_name:glucose&limit=1000',
      dataSrc: 'results',
      cache: true,
    },

非常感谢

Answer 1

您可以提示该变量，然后将其用作URL中的模板文字

​

$(document).ready(function() {
  $('#echo').click(function() {
    $('.error').empty();
    let keyword = $('#keyword').val().trim();
    if (!keyword) return $(this).prev('.error').html("Please enter a keyword first");
    console.log(`The keyword is ${keyword}`);
    /* let table = $('#example').DataTable({
      ajax: {
        url: `https://api.fda.gov/device/510k.json?search=device_name:${keyword}&limit=1000`,
        dataSrc: 'results',
        cache: true,
      },
      // ....
    })
*/
  })

})

.error {
  color: #f00;
  padding: 5px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>510k Database // Enter Keyword
<input id="keyword" />
</label>
<div class='error'></div>
<button id='echo'>Click me</button>

​