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

【问题标题】：How to change jQuery AJAX URL with input text on form submit?如何在表单提交时使用输入文本更改 jQuery AJAX URL？
【发布时间】：2015-08-18 10:19:01
【问题描述】：

我对 AJAX 和表单提交有点陌生。我有一个页面可以加载股市数据并使用最新价格、变化、最高价、最低价等填充字段...

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

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

click the eye/live-preview icon on Plunker

$.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();
});
}
});

这是 HTML 的样子（它使用引导程序）：

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Stock Quotes</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

<body>
  <div id="quote-module" class="col-md-12">
    <h1></h1>
  </div>
  <hr id='hruleFat' />
  <div class="container">
    <div class="row">
      <div class='col-md-1' id='companyName'></div>
    </div>
    <div id='prices'>
      <div class='row'>
        <div id='lastPrice' class='col-md-6 pull-left'></div>
        <div id='changes'>
          <div id='changePercent' class='col-md-3 pull-right'></div>
          <div id='change' class='col-md-3 pull-right'></div>
        </div>
      </div>
    </div>
    <hr>
    <div id='range'>
      <p class='pull-right'></p>Range</div>
    <hr>
    <div id='open'>
      <p class='pull-right'></p>Open</div>
    <hr>
    <div id='volume'>
      <p class='pull-right'></p>Volume</div>
    <hr>
    <div id='marketCap'>
      <p class='pull-right'></p>Market Cap</div>
    <hr>
  </div>
  <div class='row'>
    <div id='time' class='col-md-6 pull-right'></div>
  </div>
  <hr>
  <div id='getQuoteForm' class='row'>
    <form class="form-inline" id='getQuote'>
      <div class="form-group" id='formGroup'>
        <div class='col-xs-6'>
          <input type="text" class="form-control" id="symbolInput">
        </div>
        <div class='col-xs-6'>
          <button type="submit" class="btn btn-default">Get New Quote</button>
        </div>
      </div>

    </form>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css" />
</body>
</html>

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

您可以将输入的值连接到 url，试试这个

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

【讨论】：

【解决方案2】：

将您的 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();
});

【讨论】：

这对我来说似乎是最有意义的。我不得不将其更改为 fireAjax(newURL)，但效果很好。伙计，我被困了好几个小时。再次感谢。
很高兴随时为您提供帮助。

【解决方案3】：

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

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 更改为另一个，那么只需更改“选项”对象中的相关属性，所有可能的 URL 都可以在 JS 或表单上的某些 DropDown 控件中定义，例如：

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

在此之后，当您再次单击“提交”按钮时，它将向从表单上的“urlSelector”元素获取的 URL 发送请求。

【讨论】：