2017-03-04 10 views
0

私はapi new york times検索エンジンを使用しています。私の質問は簡単です。私のHTMLの入力タイプテキストを使用してURLのパラメータを変更したいだけです。 どうすればいいですか? 終了日と並べ替えはパラメータの1つです。ちょうどhtmlの入力フィールドで文字列を変更する方法を知りたいだけです。入力文字列を使用してクエリ文字列にパラメータを追加する方法

HTML::

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <link rel='stylesheet' type="text/css" href="nyt.css"> 
    <link rel='stylesheet' type="text/css" href="font.css"> 
    <link rel='stylesheet' type="text/css" href="grille.css"> 
</head> 
<body> 
    <div class='container'> 
     <button type="submit" id='searchButton'></button> 
     <input type="text" id='searchTerm' placeholder="search"> 
    </div> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src='nyt.js'></script> 
</body> 
</html> 

JS:

var url = "https://api.nytimes.com/svc/search/v2/articlesearch.json"; 
var searchTerm = document.getElementById('searchButton'); 
url += '?' + $.param({ 
    'api-key': "[API KEY]", 
    'end_date': "19440606", 
    'sort': "newest" 
}); 
$.ajax({ 
    url: url, 
    method: 'GET', 
    q: searchTerm, 
}).done(function(result) { 
    console.log(result); 
}).fail(function(err) { 
    throw err; 
}); 

答えて

0

あなたがそうのように、「値」プロパティを使用して入力フィールドの値を取得することができます

ここに私のコードのコピー
var searchTerm = document.getElementById('searchButton').value; 

も参照してください:JavaScript: how to get value of text input field?

+0

ありがとう、それは動作します! – CELB

0
function sendRequest(searchTerm) { 
    var url = "https://api.nytimes.com/svc/search/v2/articlesearch.json"; 
    url += '?' + $.param({ 
    'api-key': "[API KEY]", 
    'end_date': "19440606", 
    'sort': "newest" 
    }); 
    console.log(searchTerm); 
    return $.ajax({ 
    url: url, 
    method: 'GET', 
    q: searchTerm, 
    }); 
} 

document.querySelector('#searchButton').addEventListener('click', function(e){ 
    e.preventDefault(); 
    var query = document.querySelector('#searchTerm').value.trim(); 

    if (query.length > 0) { 
    sendRequest(query) 
     .done(function(result) { 
     console.log(result); 
     }).fail(function(err) { 
     throw err; 
     }); 
    } 
}) 
関連する問題