我正在嘗試讓我的搜索框正常工作并對文本搜索和標題執行 getJSON 。但在控制臺日志中，我得到 text=undefined?title=undefined。所以它不顯示任何 JSON。不確定我的點擊是否正常工作或者是否必須創建 JSON 對象？腳本 <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貢獻1831條經驗 獲得超4個贊
問題是因為您僅在頁面首次加載且頁面為空時從字段中讀取值。要解決此問題，請將該邏輯移至click處理程序內。
下一個問題是您應該this從 中刪除$('input[type="text"]', this)。這里不需要上下文選擇器，無論如何，這個選擇器都是不正確的。
另請注意，有效的查詢字符串以 開頭?并用 分隔每個值&，因此url需要稍微修改您的連接。此外，您不應url在每次點擊時更新該值。如果您這樣做，您的 AJAX 請求將只能工作一次。
最后，metadata您的響應中的 是一個對象，而不是數組。data是數組，因此您需要對其進行循環。還可以使用 來簡化循環map()。嘗試這個：
$(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 關注
- 114 瀏覽
添加回答
舉報
0/150
提交
取消