Question

我正在尝试使用以下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>在点击时会在此网址ajax/LiveCurrencyRate.php上发出Ajax请求。

<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请求。这里出了什么问题？

Answer 1

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

Answer 2

页面正在提交，因为您没有取消点击的默认操作。您需要阻止该事件发生。使用您的代码，您可以在onclick中添加return false，但最好以不引人注目的方式添加事件。

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

最好在表单提交上捕获它而不是onclick

$("#testForm").on("submit",function(e){
    testCurrencyRate();
    e.preventDefault();
});

Answer 3

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

$("#testForm").submit(function(e){
    e.preventDefault();
});

Answer 4

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

HTML：

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

JS：

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

function testCurrencyRate() {
    ... snip ...
    return false;
}

使用提交按钮时，ajax调用不起作用

4 个答案: