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

我试图使用以下API获取实时货币汇率。使用提交按钮时，ajax调用不起作用

"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;

和包含唯一的按钮点击它时，对此作出URL ajax/LiveCurrencyRate.php Ajax请求<form></form>。

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

来源

2012-10-03 Tiny

可能是因为你需要处理它的形式，而不是按一下按钮动作 –

提交的提交行动中触发的默认行为的表单元素（包括页面重新加载）。这很容易预防，应该有很多关于这方面的问题。 – m90

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

来源

2012-10-03 18:48:56

页面正在提交，因为您没有取消点击的默认操作。你需要停止这个事件的发生。使用您的代码，您可以在onclick上添加return false，但最好以不显眼的方式添加事件。

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

更好地抓住它的表单提交，而不是的onclick

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

来源

2012-10-03 18:49:04 epascarello

当你点击提交按钮，您的形式被发布到你的Web服务器。您需要使用类似的方式阻止表单发布：

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

来源

2012-10-03 18:50:35 Aknosis

因为您的网页正在提交。如果您想阻止提交，您需要从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-03 18:50:52 jbabey

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

回答

相关问题