使用用户输入的参数更改AJAX URL [英] Change AJAX URL with user inputted parameters

问题描述

我正在使用HighStocks javascript库在我的网站上使用从雅虎获取的财务数据创建图表。



我有一个带有以下功能的外部javascript文件：

  //  使用AJAX调用来检索数据，然后使用数据创建图表 
  function  createChart（ticker）{
 
 $ .ajax（{
 type：'  post'，
 url：< span class =code-string>'  http：// ...' + ticker + '   .... com'，
成功：功能（数据，状态）{
  //  图表在这里呈现 
} 
 
  //  从HTML输入框中获取用户输入的股票代码符号 
  //  并传递给图表函数 
  function  getTicker（）{
 < span class =code-keyword> var  ticker =  document  .getElementById（' < span class =code-string> userInput'）。value; 
 createChart（ticker）; 
} 
 

我的HTML文件只有一个简单的表单，带有一个输入框和一个点击按钮调用getTicker函数。出于某种原因，当我尝试使用用户输入的参数给它一个新的URL时，AJAX调用似乎不起作用。



有人可以看到我做错了吗？任何建议都将不胜感激。

解决方案

.ajax（{
type：' post'，
url：' http：// ...' + ticker + ' .... com'，
成功： function （数据，状态）{
// 图表在此处呈现
}

// 从HTML输入框中获取用户输入的股票代码
// 并传递给图表功能
function getTicker（）{
var ticker = document .getElement ById（' userInput'）。value;
createChart（ticker）;
}

我的HTML文件只有一个简单的表单，带有一个输入框和一个点击按钮调用getTicker函数。出于某种原因，当我尝试使用用户输入的参数给它一个新的URL时，AJAX调用似乎不起作用。



有人可以看到我做错了吗？任何建议将不胜感激。

你好，



你好，



通常，您的URL将被修复，将要发送的数据将是您要发送的数据，可以作为查询字符串参数发送，也可以作为POST请求参数发送。由于您使用的是POST请求，因此您的代码应该类似于

  //  使用AJAX调用来检索数据，然后使用数据创建图表 
  function  createChart（ticker）{

.ajax（{
type：' post'，
url：' http：// your chart service url'，
data ：{ chartData：ticker}，
成功：功能（数据，状态）{
// 图表在此处呈现
}
}）;

// 从HTML输入框中获取用户输入的股票代码
// 并传递给图表功能
function getTicker（）{
var ticker = document .getElementById（ ' userInput'）。value;
createChart（ticker）;
}

欲了解更多信息，请查看 JQuery文档。



工作样本

  <  ！DOCTYPE     html     PUBLIC     -  // W3C // DTD     XHTML     1.0     Transitional / / EN   http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd >  
 <   html     xmlns   =  http://www.w3.org/1999/xhtml >  
 <   head  >  
 <   meta     http-equiv   =  X-UA兼容    content   =  IE = Edge >  <   / meta  >  
 <   meta     http-equiv   = 内容类型   内容  =  text / html; charset = UTF-8 >  <   / meta  >  
 <   meta     name   =  作者   内容 < span class =code-keyword> =  Prasad P. Khandekar >  <   / meta  >  
 <   meta    名称  = 所有者    content   =  Fundtech INDIA Ltd. >  <   / meta  >  
 <   meta    名称  =  copyright    content   =  Fundtech INDIA Ltd. >  <   / meta  >  
 <   meta     http-equiv   = 过期   内容  =  0 >  <   / meta  >  
 <   meta     http-equiv   =  Pragma    content   =  no-cache >  <   / meta  >  
 <   meta     http-equiv   = 缓存控制    content   =   no-cache >  < ;   / meta  >  
 <   meta     http-equiv   =  Pragma-directive    content   =  no-ca che >  <   / meta  >  
 <   meta     http-equiv   =  cache-directive    content  < span class =code-keyword> =  no-cache >  < span class =code-keyword><   / meta  >  
 <   script     type   =  text / javascript    src   =  js / jquery-1.8.2.min.js >  <   /   script  >  
 <   script    类型  =  text / javascript    src   =  js / highstock.js >  <   /  脚本 >  
 <   script     type   =  text / javascript    src   =  js / highcharts-more.js  >  <   /   script  >  
 <   script     type   =  text / javascript    src   =  js / modules / exports .js >  <   /   script  >  
 < ;   script     type  < span class =code-keyword> =  text / javascript >  
  var  closePrices =  new  数组 （）; 
  var  dateArray =  new  数组（）; 
  var  timeStampArray =  new  数组（）; 
  var  timeClose =  new  数组（）; 
  var  ticker =  股票行情< /跨度>; 
 
  //   var ticker = userInput.value;  
 < span class =code-comment> //   alt：尝试使用URL normal调用函数，看看调用函数是否有问题。 
  function  renderChart（data，status，jqXHR）{
  console  .log（status ）; 
  console  .log（data）; 
 
  //  将所有收盘价格放入数组并转换为浮点数 
  for （ var  i =  0 ; i< data.query.results.quote.length; i ++）{
 closePrices [i] =  parseFloat （data.query.results。引用[I] .Close）; 
} 
 
  //  显示closePrices数组中的值 
  console  .log（closePrices）; 
 
  //  将所有日期放入数组 
 < span class =code-keyword> for （ var  i =  0 ; i< ; data.query.results.quote.length; i ++）{
 dateArray [i] = data.query.results.quote [i] .date; 
} 
 
  //  将所有日期转换为JS时间戳 
  for （ var  i =  0 ; i< dateArray.length; i ++）{
 timeStampArray [i] =  new  日期（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）; 
 
  //  显示dateArray  
 控制台 .log中（dateArray）; 
  console  .log（timeStampArray）; 
 
  //  创建图表 

I am using the HighStocks javascript library to create a chart on my website using finance data taken from Yahoo.

I have an external javascript file with these functions:

//uses AJAX call to retrieve data and then creates the chart with the data
function createChart(ticker) {

    $.ajax({
        type: 'post',
        url: 'http://...' + ticker + '....com',
        success: function (data, status) {
        //chart is rendered in here
        }

//gets the user inputted ticker symbol from a HTML input box
// and passes to chart function
function getTicker() {
    var ticker = document.getElementById('userInput').value;
    createChart(ticker);
}

My HTML file just has a simple form with an input box and a button that when clicked calls the getTicker function. For some reason the AJAX call doesnt seem to work when I try to give it a new URL with user inputted parameters.

Can anybody see what I am doing wrong? Any suggestions would be appreciated.

解决方案

.ajax({ type: 'post', url: 'http://...' + ticker + '....com', success: function (data, status) { //chart is rendered in here } //gets the user inputted ticker symbol from a HTML input box // and passes to chart function function getTicker() { var ticker = document.getElementById('userInput').value; createChart(ticker); }

My HTML file just has a simple form with an input box and a button that when clicked calls the getTicker function. For some reason the AJAX call doesnt seem to work when I try to give it a new URL with user inputted parameters.

Can anybody see what I am doing wrong? Any suggestions would be appreciated.

Hello,

Hello,

Generally your URL will be fix, what''s going to change is the data you will be sending, which can either be sent as query string parameters or as POST request parameters. Since you are using POST request, your code should look something like

//uses AJAX call to retrieve data and then creates the chart with the data
function createChart(ticker) {

.ajax({ type: 'post', url: 'http://your chart service url', data: {"chartData": ticker}, success: function (data, status) { //chart is rendered in here } }); //gets the user inputted ticker symbol from a HTML input box // and passes to chart function function getTicker() { var ticker = document.getElementById('userInput').value; createChart(ticker); }

For more information please have a look at JQuery documentation.

Working sample

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"></meta>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
<meta name="author" content="Prasad P. Khandekar"></meta>
<meta name="owner" content="Fundtech INDIA Ltd."></meta>
<meta name="copyright" content="Fundtech INDIA Ltd."></meta>
<meta http-equiv="Expires" content="0"></meta>
<meta http-equiv="Pragma" content="no-cache"></meta>
<meta http-equiv="Cache-Control" content="no-cache"></meta>
<meta http-equiv="Pragma-directive" content="no-cache"></meta>
<meta http-equiv="cache-directive" content="no-cache"></meta>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/highstock.js"></script>
<script type="text/javascript" src="js/highcharts-more.js"></script>
<script type="text/javascript" src="js/modules/exporting.js"></script>
<script type="text/javascript">
var closePrices = new Array();
var dateArray = new Array();
var timeStampArray = new Array();
var timeClose = new Array();
var ticker = "Stock Quotes";

//var ticker = userInput.value;
//alt: try calling the function with the URL normal to see if calling the funciton is the problem.
function renderChart(data, status, jqXHR) {
	console.log(status);
	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

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