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

Posted 2023-05-09

【中文标题】更改 URL 的一部分以在 JavaScript 中显示不同的数据

【英文标题】：Change portion of URL to show different data in JavaScript

【发布时间】：2021-09-27 07:31:50

【问题描述】：

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,
    ,

非常感谢

【参考方案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>

【讨论】：

正是我想要的，谢谢。是否可以在我包含在 html 中的按钮中输入关键字，而不是弹出提示？ <input id="myInput" value=""> <button id="myButton" onclick="javascript:alert('Data Shows Here')">Enter</button>

注意：这个例子容易受到代码注入的影响。

@Tibrogargan - 你能详细说明一下，或者用这个例子举例说明风险吗？

有更好的方法吗？我很难让（更新的）上面的代码运行。

克雷格。在没有任何其他脚本的情况下进入按钮本身？