使用两个不同的 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({&nbsp; &nbsp; dataType: "json",&nbsp; &nbsp; url: "{% url 'some urn name' %}?limit=10&q="+encodeURIComponent(search),&nbsp; &nbsp; ...});此外，您需要使用 分隔多个查询参数&，而不是?。您应该调用encodeURIComponent()以确保搜索字符串在 URL 中正确编码。

Answer 2

只需做一个条件检查以确保搜索输入有一个值并且在构建 url 之前不是未定义的，这样的事情应该削减它：function makeApiCall() {&nbsp; &nbsp; const searchValue = document.querySelector('#search').value;&nbsp; &nbsp; const url = searchValue ? `http://myapi.com?limit=10&q=${searchValue}` : 'http://myapi.com?limit=10';&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; dataType: "json",&nbsp; &nbsp; &nbsp; url&nbsp; &nbsp; }&nbsp; }

Answer 3

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