如何讓輸入文本輸入到json請求？

我正在嘗試將輸入元素內部的文本輸入爲可用於JSON請求。如何讓輸入文本輸入到json請求？

$("document").ready(function() { 
    var search = $('#input').val() 
    var api = 
    "https://en.wikipedia.org/w/api.php?callback=?&action=opensearch&format=json&search=" + 
    search + 
    "&namespace=0&limit=10&profile=fuzzy&suggest=1"; 

    // Button function 
    $(".btn").click(function() { 
    function listClear() { 
     $("ul").empty(); 
    } 
    listClear(); 
    $.getJSON(api, function(data) { 
     function listCreate() { 
     var arr = data[1]; 
     for (i = 0; i < arr.length; i++) { 
      $("ul").append("<li>" + arr[i] + "</li>"); 
     } 
     } 

     listCreate(); 
    }); 
    }); 
});

和我的元素看起來像這樣

<input type="search" id="input" class="form-control" placeholder=". . .">

當我不喜歡這樣，控制檯顯示一個錯誤，指出未定義的長度不能被發現。我知道這意味着我目前的值檢索方法不起作用。有任何想法嗎？

ps。我也在codepen上做這個編碼（https://codepen.io/WatchConnorCode/pen/JybGVJ?editors=1010）我不知道這是否會導致問題？

編輯：我以前曾經在val時忘了將它改回來。它仍然沒有按預期工作。

來源

2017-08-08 WatchConnorCode

正試圖在DOM準備好了，這在這一點上，沒有人進入任何東西到讓你的輸入值箱子呢。你應該在按鈕點擊處理程序中完成它。另外，如果您確實已經檢查了響應，您會看到api發回錯誤，即檢查'data.error'，並說您沒有提供正確的搜索參數 –

如何執行錯誤回調？我還是很新的編碼 – WatchConnorCode

也應該是$（'＃input'）。val（）。不是$（'＃input'）。text（）來讀取文本框的內容。 – gjijo

首先使用.val()而不是.text()。

第二次搬遷的search和api定義內的點擊功能

$("document").ready(function() { 

    // Button function 
    $(".btn").click(function() { 
    var search = $('#input').val() 
    var api = 
    "https://en.wikipedia.org/w/api.php?callback=?&action=opensearch&format=json&search=" + 
    search + 
    "&namespace=0&limit=10&profile=fuzzy&suggest=1"; 
    function listClear() { 
     $("ul").empty(); 
    } 
    listClear(); 
    $.getJSON(api, function(data) { 
     function listCreate() { 
     var arr = data[1]; 
     for (i = 0; i < arr.length; i++) { 
      $("ul").append("<li>" + arr[i] + "</li>"); 
     } 
     } 

     listCreate(); 
    }); 
    }); 
});

https://codepen.io/anon/pen/eEvWLz?editors=1010

來源

2017-08-08 05:25:31 Pit