2016-04-01 20 views
1

ユーザーが[送信]ボタンをクリックしたときに、このようなAPIへのAJAX呼び出しをしようとしています。ユーザーがテキストボックスに入力する値を取得することによって、API呼び出しのURLを形成したいと考えています。ユーザー入力に基づいてAPIコールを作成するにはどうすればよいですか?

<script type = "text/javascript"> 

$("#submit").click(function(){ 
    var stock = $("#stocks").val(); 
    var url = "http://dev.markitondemand.com/MODApis/Api/v2/Quote/jsonp?symbol=" + stock; 

$.ajax({ 
    url: url, 
    dataType: 'jsonp', 
    success: function(results){ 
     var status = results.Status; 
     var company = results.Name; 
     $('#results').append(status + '. Company is: ' + company); 
    } 
}); 

}); 

</script> 

体は

<body> 
    <input id="stocks" /> 
    <button type="submit" id="submit">Submit</button> 

    <div id="results"></div> 

</body> 

$url仕事や私が何か間違ったことをやっているだろう、このように見えますか?ここで

私が働いているコードのコピーである - 文書レディ機能でコードをラップし、ページの一番下に置きhttp://jsbin.com/pizoruxoyo/edit?html,output

+0

実際に行うにはあなたが何を意味するのか取得しないでくださいここで "仕事"は、またあなたのdec上のコードので、それは何を応答しますそれをテストすることはできません。少なくとも私はそれが入力の価値を取得し、jQueryでコンテンツを適用する方法であることを確認することができます。データタイプに誤植があります。 – Tran

答えて

1

問題を解決する一つの方法は、document.ready()でスクリプト全体をラップするか、コードに明示的に特定の名前を付ける関数にコードを入れ、次にonlclick = "myFunction()"関数を使って関数を呼び出すことです。ボタンのプロパティ

function loadDoc() { 
    var stock = $("#stocks").val(); 
    var url = "http://dev.markitondemand.com/MODApis/Api/v2/Quote/jsonp? symbol=" + stock; 

    $.ajax({ 
     url: url, 
     dataType: 'jsonp', 
     success: function(results){ 
      var status = results.Status; 
      var company = results.Name; 
      $('#results').append(status + '. Company is: ' + company); 
     } 
    }); 
}; 

そして、これはあなたのボタンが機能を呼び出すために使用される方法である:ここでは

<button type="button" onclick="loadDoc()">Request data</button> 

は、デモへのリンクです:http://jsbin.com/pohofegiko/edit?html,output

+0

ありがとうございます。これも役立ちます! –

1

<script type = "text/javascript"> 
$(function(){ 
$("#submit").click(function(){ 
    var stock = $("#stocks").val(); 
    var url = "http://dev.markitondemand.com/MODApis/Api/v2/Quote/jsonp?symbol=" + stock; 
    console.log(stock); 
$.ajax({ 

    url: url, 
    dataType: 'jsonp', 
    success: function(results){ 
     var status = results.Status; 
     var company = results.Name; 
     $('#results').append(status + '. Company is: ' + company); 

    } 
}); 

}); 

}); 

</script> 

demo here

+1

もう一度ありがとう。 :) ありがとうございます! –

関連する問題