亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

使用兩個不同的 url 調用 Ajax 調用

使用兩個不同的 url 調用 Ajax 調用

慕妹3242003 2023-04-27 15:17:35
我有一個搜索框                <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,
查看完整描述

3 回答

?
Helenr

TA貢獻1780條經驗 獲得超4個贊

在 AJAX 調用之前獲取輸入的值,而不是在事件偵聽器中。


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

$.ajax({

    dataType: "json",

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

    ...

});

此外,您需要使用 分隔多個查詢參數&,而不是?。您應該調用encodeURIComponent()以確保搜索字符串在 URL 中正確編碼。


查看完整回答
反對 回復 2023-04-27
?
飲歌長嘯

TA貢獻1951條經驗 獲得超3個贊

只需做一個條件檢查以確保搜索輸入有一個值并且在構建 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

    }

  }


查看完整回答
反對 回復 2023-04-27
?
哆啦的時光機

TA貢獻1779條經驗 獲得超6個贊

將 ajax 調用包裝在一個將搜索詞作為參數的函數中。
如果搜索詞不是空白,則將其添加到正確編碼的 URL 中,否則將其保留。
第一次調用它時傳遞一個空字符串。
在按鍵事件中調用以搜索變量作為參數的函數。

查看完整回答
反對 回復 2023-04-27
  • 3 回答
  • 0 關注
  • 137 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號