使用JSONP更改AJAX URL [英] Change AJAX URL using JSONP

问题描述

我使用AJAX调用获取JSON数据，并且当用户在输入框中键入新变量时，我想要更改ajax URL中的变量。

例如。它以www。''AAPL''开头。但是如果用户输入''GOOG''那么网址中的变量将会改变，所以新的网址是www.GOOG.com



我尝试过使用JSONP来完成这项工作，但我无法更改URL以便检索新数据。



使用警告语句我看到getTicker函数没问题，然后ajaxCall函数警告相同的值，但实际的AJAX调用是它全部失败的地方。



有什么建议吗？

Im fetching JSON data using an AJAX call and theres a variable in the ajax URL that I want to change when a user types in a new variable in an input box.
E.g. it starts as www.''AAPL''.com but if a user types ''GOOG'' then the variable in the url will change so the new url is www.GOOG.com

I have tried using JSONP to make this work but I cannot get the URL to change so that the new data is retrieved.

Using alert statements I see that the getTicker function is ok, then the ajaxCall function alerts the same value but the actual AJAX call is where it all fails.

Any suggestions?

	var closePrices = new Array();
	var dateArray = new Array();
	var timeStampArray = new Array();
	var timeClose = new Array();
   
	
function jsonCallback(data, ticker) {
			alert('JSON call: ' + ticker);
			console.log( data );

			//Put all the closing prices into an array and convert to floats
			for(var i=0; i < data.query.results.quote.length; i++)
			{
				closePrices[i] = parseFloat( data.query.results.quote[i].Close );
			}

            //displays the values in the closePrices array
			console.log( closePrices );
            
            //Put all the dates into an array
			for(var i=0; i < data.query.results.quote.length; i++)
			{
				dateArray[i] = data.query.results.quote[i].date;
			}

			//Convert all the dates into JS Timestamps
			for(var i=0; i < dateArray.length; i++)
			{
				timeStampArray[i] = new Date( dateArray[i] ).getTime();
			}

			
			for(var i=0; i<data.query.results.quote.length; i++)
			{
				   timeClose.push( [timeStampArray[i], closePrices[i]] );
			}

			timeClose = timeClose.reverse();
			console.log ( timeClose );

            //displays the dateArray
			console.log( dateArray );
			console.log( timeStampArray );

			// Create the chart
		$('#container').highcharts('StockChart', {
			

			rangeSelector : {
				selected : 1
			},

			title : {
				text : ticker + ' Stock Price'
			},
			
			series : [{
				name : ticker,
				data: timeClose,
				tooltip: {
					valueDecimals: 2
				}
			}]
		});
}

function ajaxCall(ticker) {  
    alert('ajax call: ' + ticker);
    var url = 'http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.historicaldata%20where%20symbol%20%3D%20%22' + ticker +'%22%20and%20startDate%20%3D%20%222013-01-01%22%20and%20endDate%20%3D%20%222013-02-25%22&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=?';
    //Ajax call retrieves the data from Yahoo! Finance API
	$.ajax( url, {
		dataType: "jsonp",  
		success: function(data, status){
			alert("success: " + ticker);
			console.log(status);
            jsonCallback(data, ticker);
		},
		error: function( jqXHR, status, error ) {
			console.log( 'Error: ' + error );
		}
	});
}


//Function to get ticker symbol from input box
function getTicker() {
	    ticker = document.getElementById('userInput').value;
	    alert('user input: ' + ticker);
	    ajaxCall(ticker);
	}

推荐答案

（' ＃container'）。highcharts（' StockChart'，{


rangeSelector：{
selected： 1
}，

title ：{
text：ticker + ' 股票价格'
}，

系列：[{
name：ticker，
data：timeClose，
tooltip：{
valueDecimals： 2
}
}]
}）;
}

function ajaxCall（自动收报机）{
alert（' ajax call：' + ticker）;
var url = ' http：// query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.historicaldata%20where%20symbol%20%3D%20%22' + ticker + ％22％20％20startDate％20％3D％20％222013-01-01％22％20％20endDate％20％3D％ 20％222013-02-25％22安培;格式= JSON&安培;诊断=真安培; ENV =商店％3A％2F％2Fdatatables.org％2Falltableswithkeys&安培;回调='？;
// Ajax调用从Yahoo!检索数据Finance API

('#container').highcharts('StockChart', { rangeSelector : { selected : 1 }, title : { text : ticker + ' Stock Price' }, series : [{ name : ticker, data: timeClose, tooltip: { valueDecimals: 2 } }] }); } function ajaxCall(ticker) { alert('ajax call: ' + ticker); var url = 'http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.historicaldata%20where%20symbol%20%3D%20%22' + ticker +'%22%20and%20startDate%20%3D%20%222013-01-01%22%20and%20endDate%20%3D%20%222013-02-25%22&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=?'; //Ajax call retrieves the data from Yahoo! Finance API

.ajax（url，{
dataType： jsonp，
成功： function （数据，状态）{
alert（ success： + ticker）;
console 。 log（status）;
jsonCallback（data，ticker）;
}，
error： function （jqXHR，status，error） {
console .log（' 错误： ' +错误）;
}
}）;
}


// 从输入中获取股票代码的功能框
function getTicker（）{
ticker = document 。 getElementById（' userInput'）。value;
alert（' 用户输入：' + ticker）;
ajaxCall（自动收报机）;
}

.ajax( url, { dataType: "jsonp", success: function(data, status){ alert("success: " + ticker); console.log(status); jsonCallback(data, ticker); }, error: function( jqXHR, status, error ) { console.log( 'Error: ' + error ); } }); } //Function to get ticker symbol from input box function getTicker() { ticker = document.getElementById('userInput').value; alert('user input: ' + ticker); ajaxCall(ticker); }

你好，



因为这是你上一个问题的延续[ ^ ]我正在建立一个小片段来说明如何做到这一点（假设参数代码表示您要替换的值。

Hello,

Since this is a continuation of your last question[^] I am putting up a small snippet to show how this can be done (Assuming parameter ticker represents value you want to replace.

function createChart(ticker) {

这篇关于使用JSONP更改AJAX URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！