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

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>其中包含唯一的按钮，当单击该按钮时，将对此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请求。这是怎么了

Answer 1

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