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 関数のエラー部分のアラート ボックスに、アラート ボックスがしばらく表示され、突然表示されなくなります。このリクエストの完了を妨げる合理的な理由が見つかりません。以前のプロジェクトでも同じことが機能しましたが、XMLHttpRequestAjax リクエストの作成に使用していました。ここで何がうまくいかないのですか？

4

4 に答える 4

11

type="submit"Web ブラウザーがポストバックを介してフォームを送信し (method属性が「POST」に設定されているため)、ページが更新されます。タグのaction属性によって<form>データの送信先が決まり、そのページが提供されたデータとともに読み込まれます。これが発生すると、事実上別のページに移動するか、現在のページをリロードするため、ページ上のすべての JavaScript が終了します。

于 2012-10-03T18:48:56.323 に答える
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 に答える
4

クリックのデフォルト アクションをキャンセルしていないため、ページは送信されています。そのイベントが起こらないようにする必要があります。コードでreturn falseonclick に a を追加できますが、目立たない方法でイベントを追加することをお勧めします。

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

onclickではなく、フォーム送信時にキャッチすることをお勧めします

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