2

我正在尝试使用以下 API 获取实时汇率。

"http://www.exchangerate-api.com/INR/USD/1?k=FQRxs-xT2tk-NExQj"

当我点击一个按钮时，它会提醒费率并且工作得很好。我正在使用以下 Ajax 代码。

<script type="text/javascript" language="javascript">
    function testCurrencyRate()
    {
        $.ajax({
                datatype:"html",
                type: "GET",
                url: "ajax/LiveCurrencyRate.php",
                data: "t="+new Date().getTime(),
                success: function(response)
                {       
                    alert(response);                    
                },
                error: function(e)
                {
                    alert('Error while fetchig the live currency rate.');                       
                }
            }); 
    }
</script>

Ajax 请求转到LiveCurrencyRate.php如下页面。

$url="http://www.exchangerate-api.com/INR/USD/1?k=FQRxs-xT2tk-NExQj";               
$result = file_get_contents($url);
echo $result;

并且<form></form>其中包含唯一的按钮，单击该按钮会在此 URL 上发出 Ajax 请求ajax/LiveCurrencyRate.php。

<form id="testForm" name="testForm" action="" method="post">    
    <input type="submit" id="btnTestCurrencyRate" name="btnTestCurrencyRate" value="Test" onclick="testCurrencyRate();"/>
</form>

一切安好。然而，当我将按钮类型从 更改为 时，问题就出现type="button"了type="submit"，它不起作用。Ajax 函数的错误部分的警告框只显示了一段时间，然后突然消失了。我找不到任何可能阻止此请求完成的合理原因。在我以前的项目中，同样的事情对我有用，但我XMLHttpRequest用于发出 Ajax 请求。这里出了什么问题？

4

4 回答 4

11

type="submit"导致 Web 浏览器通过回发提交表单（因为您的method属性设置为“POST”），从而导致页面刷新。标签的action属性<form>决定了数据被发送到哪里，然后页面加载提供的数据。发生这种情况时，页面上的所有 javascript 都会终止，因为您实际上要转到另一个页面或重新加载当前页面。

于 2012-10-03T18:48:56.323 回答
4

该页面正在提交，因为您没有取消单击的默认操作。您需要阻止该事件的发生。使用您的代码，您可以将 a 添加return false到 onclick，但最好以不显眼的方式添加事件。

$("#btnTestCurrencyRate").on("click",function(e){
    testCurrencyRate();
    e.preventDefault();
});

最好在表单提交时抓住它而不是点击

$("#testForm").on("submit",function(e){
    testCurrencyRate();
    e.preventDefault();
});
于 2012-10-03T18:49:04.900 回答
4

当您单击提交按钮时，您的表单将被发布到您的 Web 服务器。您需要使用以下方式阻止表单发布：

$("#testForm").submit(function(e){
    e.preventDefault();
});
于 2012-10-03T18:50:35.620 回答
4

因为您的页面正在提交。如果要阻止提交，则需要从 onclick 处理程序返回 false。

HTML：

<input type="submit" id="btnTestCurrencyRate" name="btnTestCurrencyRate" value="Test"/>

JS：

document.getElementById('btnTestCurrencyRate').onclick = testCurrencyRate;

function testCurrencyRate() {
    ... snip ...
    return false;
}
于 2012-10-03T18:50:52.997 回答