使用两个不同的 url 调用 Ajax 调用

Question

我有一个搜索框                <div id="" class="col-10 pt-2  page-title">                    <label>                        <input type="search" id="search" class="form-control form-control-sm " placeholder="Search">                    </label>                </div>我的要求是当我按下任何字符并单击需要搜索的输入按钮时var x = document.getElementById("search");x.addEventListener("keyup", function(event) {  if (event.keyCode === 13) {   var search = document.getElementById("search").value;    console.log(search)  }});这将打印我在控制台中输入的单词....我正在进行 Ajax 调用     $.ajax({        dataType: "json",        url: "{% url 'some url name' %}?limit=10",        },这将加载 10 条记录....相同的 API 也可以与搜索一起使用......在此我们需要传递一个额外的参数......     $.ajax({        dataType: "json",        url: "{% url 'some urn name' %}?limit=10?q="+seach,        },但是在调用 url 时搜索值变为未定义如何使用 url = "{% url 'some url name' %}?limit=10" 调用相同的 Ajax 调用，如果用户使用 url "{% url 'some urn name ' %}?limit=10?q="+seach,

Answer 1

在 AJAX 调用之前获取输入的值，而不是在事件侦听器中。

var search = document.getElementById("search").value;

$.ajax({

    dataType: "json",

    url: "{% url 'some urn name' %}?limit=10&q="+encodeURIComponent(search),

    ...

});

此外，您需要使用 分隔多个查询参数&，而不是?。您应该调用encodeURIComponent()以确保搜索字符串在 URL 中正确编码。

Answer 2

只需做一个条件检查以确保搜索输入有一个值并且在构建 url 之前不是未定义的，这样的事情应该削减它：

function makeApiCall() {

    const searchValue = document.querySelector('#search').value;

    const url = searchValue ? `http://myapi.com?limit=10&q=${searchValue}` : 'http://myapi.com?limit=10';

    

    $.ajax({

      dataType: "json",

      url

    }

  }

Answer 3

将 ajax 调用包装在一个将搜索词作为参数的函数中。
如果搜索词不是空白，则将其添加到正确编码的 URL 中，否则将其保留。
第一次调用它时传递一个空字符串。
在按键事件中调用以搜索变量作为参数的函数。