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

Question

JSFiddle Code

In this code, I parse data from a JSON url into a table.

When a certain portion of the URL becomes altered, different search results come out. So I'm trying to give the user an option to input a different keyword that will bring different results.

In python I would use af string request, is there a similar option in JavaScript?

Python example:

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')`

My JavaScript code

    $(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,
    },

many thanks

Answer 1

You would prompt and then use that variable as a template literal in your 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>