繁体   English   中英

如何更新Stock Quote API以获取搜索结果?

[英]How can I update Stock Quote API to take in search results?

这是我对StackOverflow的第一个问题。 我正在研究如何使用API​​进行学校作业,并且发现了一个API(可从Markit按需提供)返回股票报价-但我不知道如何更新JS以查询来自DOM的搜索结果。 现在,它仅在搜索预定义的“ AAPL”符号-如何更新JS以查询搜索结果? 谢谢!

 /** * Version 1.0, Jan 2012 */ var Markit = {}; /** * Define the QuoteService. * First argument is symbol (string) for the quote. Examples: AAPL, MSFT, JNJ, GOOG. * Second argument is fCallback, a callback function executed onSuccess of API. */ Markit.QuoteService = function(sSymbol, fCallback) { this.symbol = sSymbol; this.fCallback = fCallback; this.DATA_SRC = "http://dev.markitondemand.com/Api/v2/Quote/jsonp"; this.makeRequest(); }; /** * Ajax success callback. fCallback is the 2nd argument in the QuoteService constructor. */ Markit.QuoteService.prototype.handleSuccess = function(jsonResult) { this.fCallback(jsonResult); }; /** * Ajax error callback */ Markit.QuoteService.prototype.handleError = function(jsonResult) { console.error(jsonResult); }; /** * Starts a new ajax request to the Quote API */ Markit.QuoteService.prototype.makeRequest = function() { //Abort any open requests if (this.xhr) { this.xhr.abort(); } //Start a new request this.xhr = $.ajax({ data: { symbol: this.symbol }, url: this.DATA_SRC, dataType: "jsonp", success: this.handleSuccess, error: this.handleError, context: this }); }; new Markit.QuoteService("AAPL", function(jsonResult) { //Catch errors if (!jsonResult || jsonResult.Message){ console.error("Error: ", jsonResult.Message); return; } //If all goes well, your quote will be here. console.log(jsonResult); //Now proceed to do something with the data. $(".results").first().append("<p>Name: " + jsonResult.Name + "</p> <p>Symbol: " + jsonResult.Symbol + "</p><p>Last Price: " + jsonResult.LastPrice + "</p><p>Change: " + jsonResult.Change + "</p>"); /** * http://dev.markitondemand.com */ }); 
 <!doctype html> <html> <head> <script src="jquery.min.js"></script> <script src="script.js"></script> </head> <body> <form id = "searchWrap"> Search Stocks <input type = "text" id = "stock_search"> </form> <button class="submit">submit</button> <div class = "results"> </div> </body> </html> 

Markit.QuoteService是这里的主要内容,您必须向其传递2个参数1引用2是函数回调,以防它设法提取数据

在代码中添加以下功能

function submitForm(){
 stock = $('#stock_search').val();
 Markit.QuoteService(sock,drawHtml);
 return false;
}

function drawHtml(jsonResult){
  $(".results").first().append("<p>Name: " + jsonResult.Name + "</p> <p>Symbol: " + jsonResult.Symbol + "</p><p>Last Price: " + jsonResult.LastPrice + "</p><p>Change: " + jsonResult.Change + "</p>");
}

添加到表单onsubmit事件

<form onsubmit="return submitForm();">

没有Markit内容的完整工作示例:

<!DOCTYPE HTML>
<html>
  <head>      
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <title></title>
  </head>
  <body>
    <form action="" onsubmit="return submitForm()">
      Search Stocks
      <input name="stock" type="text" id="stock_search" />
      <input type="submit" value="submit">
    </form>
    <div id="results">
    </div>

    <script type="text/javascript">
      function getStock(stock) {
        $.ajax({
          url: 'http://dev.markitondemand.com/Api/v2/Quote/jsonp',
          data: {'symbol': stock},
          jsonp: "callback",
          dataType: "jsonp",
          success: function(ds){
            drawHtml(ds);
          }
        });
        return false;
      }
      function submitForm() {
        stock = $('#stock_search').val();
        getStock(stock);
        return false;
      }

      function drawHtml(jsonResult) {
        $("#results").append("<p>Name: " + jsonResult.Name + "</p> <p>Symbol: " + jsonResult.Symbol + "</p><p>Last Price: " + jsonResult.LastPrice + "</p><p>Change: " + jsonResult.Change + "</p>");
        return false;
      }
    </script>
  </body>
</html>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM