我正在嘗試讓我的搜索框正常工作并對(duì)文本搜索和標(biāo)題執(zhí)行 getJSON 。但在控制臺(tái)日志中，我得到 text=undefined?title=undefined。所以它不顯示任何 JSON。不確定我的點(diǎn)擊是否正常工作或者是否必須創(chuàng)建 JSON 對(duì)象？腳本 <script> var searchstring = $('input[type="text"]', this).val(); var url = "https://data.edu/api/v1/metadata"; url += "?text=" + searchstring; url += "?title=" + searchstring; $(document).ready(function() { $('button[type="button"]').click(function(event){ $.ajax({ type: "GET", url: url, success: function(res){ console.log(res); var items = res.data.metadata; var ins = ""; for (var i = 0; i < items.length; i++){ ins += "<div>"; ins += "Title" + items[i].title; ins += "Title" + items[i].title; ins += "Title" + items[i].title; ins += "</div><br />"; }; $('#results').html(ins); } }); }); }); </script>html <form class="destinations-form" role="search" > <div class="input-line"> <input id="searchForm" type="text" class="form-input check-value" placeholder="Search Documents" /> <button type="button" class="form-submit btn btn-special" "</button> </div> </form> <div class="container"> <div class="hero-text align-center"> <div id="results"></div> </div> </div>jsondata: [ { collection_id: "ADGM-1552427432270-483", metadata:{ year: "2019", files: text , title: text, },
1 回答
慕容708150
TA貢獻(xiàn)1831條經(jīng)驗(yàn) 獲得超4個(gè)贊
問(wèn)題是因?yàn)槟鷥H在頁(yè)面首次加載且頁(yè)面為空時(shí)從字段中讀取值。要解決此問(wèn)題，請(qǐng)將該邏輯移至click處理程序內(nèi)。
下一個(gè)問(wèn)題是您應(yīng)該this從 中刪除$('input[type="text"]', this)。這里不需要上下文選擇器，無(wú)論如何，這個(gè)選擇器都是不正確的。
另請(qǐng)注意，有效的查詢字符串以 開(kāi)頭?并用 分隔每個(gè)值&，因此url需要稍微修改您的連接。此外，您不應(yīng)url在每次點(diǎn)擊時(shí)更新該值。如果您這樣做，您的 AJAX 請(qǐng)求將只能工作一次。
最后，metadata您的響應(yīng)中的 是一個(gè)對(duì)象，而不是數(shù)組。data是數(shù)組，因此您需要對(duì)其進(jìn)行循環(huán)。還可以使用 來(lái)簡(jiǎn)化循環(huán)map()。嘗試這個(gè)：
$(document).ready(function() {
const url = "https://data.edu/api/v1/metadata";
$('button[type="button"]').on('click', function(e) {
let searchstring = $('input[type="text"]').val();
let requestUrl = url + `?text=${searchstring}&title=${searchstring}`;
$.ajax({
type: 'GET',
url: requestUrl,
success: function(res) {
let html = res.data.map(item => `<div>Title ${item.metadata.title}</div><br />`);
$('#results').html(html);
}
});
});
});
- 1 回答
- 0 關(guān)注
- 100 瀏覽
添加回答
舉報(bào)
0/150
提交
取消