Question

我对AJAX和表单提交都不熟悉。我有一个页面可以加载股票市场数据并填充最新价格，变化，高，低等字段......

我正在尝试通过获取输入字段的值来更改股票市场代码（AJAX URL），并希望在不刷新页面的情况下更改AJAX URL。

在这个plunkr中，你可以看到我有一个用于为AAPL提取数据的AJAX URL的硬编码值，但是，我需要将该URL更改为html表单输入字段中的任何值但是无法弄清楚如何。所有需要更改的是URL的最后一个股票代码部分。我真的很感激别人的帮助。

click the eye/live-preview icon on Plunker

remoteFruits

这是HTML的样子（它使用bootstrap）：

$.ajax({
dataType: 'jsonp',
url: 'http://dev.markitondemand.com/Api/v2/Quote/jsonp?symbol=AAPL',
success: function(data) {
$('h1').html(data.Name);
$('.container #companyName').html(data.Name);
$('#lastPrice').html(data.LastPrice.toFixed(2));
$('#change').html(data.Change.toFixed(2));
$('#changePercent').html("(" + data.ChangePercent.toFixed(2) + "%)");
$('#range p').html(data.Low + '- ' + data.High);
$('#open p').html(data.Open.toFixed(2));
$('#volume p').html(Math.round(data.Volume / 100000));
$('#marketCap p').html(Math.round(data.MarketCap / 1000000000));

var vol = data.Volume.toString();
if (vol > 6) {
$('#volume p').append('M');
}

var cap = data.Volume.toString();
if (cap > 7) {
$('#marketCap p').append('B')
}


var date = new Date();
var hours = date.getHours() > 12 ? date.getHours() - 12 : date.getHours();
var am_pm = date.getHours() >= 12 ? "PM" : "AM";
//hours = hours < 10 ? "" + hours : hours;
var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes():date.getMinutes();
var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() :date.getSeconds();
time = hours + ":" + minutes + ":" + seconds + " " + am_pm;
$('#time').html('As of ' + time);

$("#getQuote").submit(function(event) {
var newURL = 'http://dev.markitondemand.com/Api/v2/Quote/jsonp?symbol=' + $('#symbolInput').val();
$.ajax({url:newURL});
event.preventDefault();
});
}
});

Answer 1

将ajax代码包装在函数ala ..

中

function fireAjax(data){

   $.ajax({
     dataType: 'jsonp',
     url: data.url,
     success: function(data) {
       $('h1').html(data.Name);
       $('.container #companyName').html(data.Name);
       $('#lastPrice').html(data.LastPrice.toFixed(2));
    // etc...
}

然后，您在该功能之外提交代码。现在，你“可以”将所有内容保存在一起并在“提交点击”上添加一个监听器。它的概念是相同的。

$("#getQuote").submit(function(event) {
  var newURL = 'http://dev.markitondemand.com/Api/v2/Quote/jsonp?symbol=' + $('#symbolInput' ).val();
  fireAjax({url:newURL});
  event.preventDefault();
});

Answer 2

方法$ .ajax接受一个带有options作为参数的对象，因此你可以这样重写你的代码

var options = {
    dataType: 'jsonp',
    url: 'http://dev.markitondemand.com/Api/v2/Quote/jsonp?symbol=AAPL'
    // here go other options
}

$('.someForm').bind('submit', function(e)
{
    $.ajax(options);     // send request
    e.preventDefault();  // stop default form action
    return false;        // do some form specific action
});

然后，如果在第一次提交后您决定将URL更改为另一个，那么只需更改＆＃34;选项中的相关属性即可。对象，可以在JS或表单上的某些DropDown控件中定义所有可能的URL，例如：

$('.someForm .urlSelector').bind('click', function()
{
    var selector = $(this);
    options.url = selector.val();
});

在此之后，当您点击＆＃34;提交＆＃34;再次按钮，它将发送请求到取自＆＃34; urlSelector＆＃34;你表单上的元素。

Answer 3

您可以将输入值与网址连接起来，试试这个

url: 'http://dev.markitondemand.com/Api/v2/Quote/jsonp?symbol='+ $('input#symbolInput').val(),

如何在表单提交时使用输入文本更改jQuery AJAX URL？

3 个答案: