送信ボタンを使用してAJAX機能を有効にするにはどうすればよいですか？

私のWebページには、次のフォームとjavascript機能があります。これは私がやりたいことが可能かどうかをテストするために使用しているダミー関数です。送信ボタンを使用してAJAX機能を有効にするにはどうすればよいですか？

私がしようとしているのは、AJAXリクエストをサーバーに送信して、ページ自体が所定のパスに沿ってデータベースを更新できるようにすることです。私はタイトな時間を過ごしているので、残念ながらこれをより良くサポートするためにページ全体を書き換える時間がありません。私が持っている問題は、xmlhttpオブジェクトが正しく返されないようです。 readyStateは4ですが、statusは0です。誰かが何をする必要があるのか説明してください。ここで

は私のコードです：

<html> 
<head> 
<script type="text/javascript"> 
function test(){ 
    var xmlhttp = new XMLHttpRequest(); 

    xmlhttp.onreadystatechange=function(){ 
     document.getElementById("new").innerHTML+="<b>"+xmlhttp.readyState+"</b> "+xmlhttp.status; 

     if (xmlhttp.readyState==4 && xmlhttp.status==200){ 
      document.getElementById("hello").innerHTML=xmlhttp.responseText; 
     } 
    } 

    xmlhttp.open("GET","response.php",true); 
    xmlhttp.send(); 
} 
</script> 
</head> 

<body> 
<?php 
if ($_POST){ 
    echo $_POST['hello']; 
} 
?> 

<form action="ajax.php" method="post"> 
<input type="text" name="hello" /> 
<input type="submit" value="submit" onclick="test();" /> 
</form> 

<div id="hello"></div> 
<h3>debug</h3> 
<div id="new"></div> 
</body> 
</html>

response.php

<?php 
echo "Hello there"; 
?>

EDIT

ajax.php私が前にしたくないんことに注意してくださいデフォルトの動作です。実際には、はを通常どおり提出する必要があります。 AJAXリクエストをプロセスに追加するだけです。

出典

2012-01-13 ewok

http://stackoverflow.com/questions/5081674/jquery-prevent-default-browser-form-submit-behaviour-but-submit-form-with-jquer – check123

http://stackoverflow.com/questions/1357118/javascript-event-preventdefault-vs-return-false – check123

@ check123デフォルトの動作をしないようにしないでください。フォームは通常通りに提出する必要がありますが、AJAXリクエストも同様に実行したいと思います。 – ewok

あなたは、AJAX要求をトリガし、フォームが同時に提出することを許可することはできません。不完全なAJAXリクエストは、ページがリロードされるとキャンセルされます（フォームが送信された場合のように）。 ではなく、にフォームを送信するか、フォームを送信する前にAJAXコールが完了するまで待つかのいずれかになります。あなたが2番目のルートを行きたいと思った場合、あなたのコードに次の変更を行うことができます：

<html> 
<head> 
<script type="text/javascript"> 
function test(){ 
    var xmlhttp = new XMLHttpRequest(); 

    xmlhttp.onreadystatechange=function(){ 
     document.getElementById("new").innerHTML+="<b>"+xmlhttp.readyState+"</b> "+xmlhttp.status; 

     if (xmlhttp.readyState==4 && xmlhttp.status==200){ 
      document.getElementById("hello").innerHTML=xmlhttp.responseText; 
      **document.getElementById("ajaxform").submit();** 
     } 
    } 

    xmlhttp.open("GET","response.php",true); 
    xmlhttp.send(); 
} 
</script> 
</head> 

<body> 
<?php 
if ($_POST){ 
    echo $_POST['hello']; 
} 
?> 

<form action="ajax.php" method="post" **id="ajaxform"**> 
<input type="text" name="hello" /> 
<input type="submit" value="submit" onclick="test();**return false;**" /> 
</form> 

<div id="hello"></div> 
<h3>debug</h3> 
<div id="new"></div> 
</body> 
</html>

変更/追加が**でマークされています。

JavaScriptのイベントハンドラをアタッチするためにHTMLタグのonsubmitなどの属性を使用して、私が気に入らないプラクティスがいくつかあります。

出典

2012-01-13 14:37:59

ありがとう、これは動作します。ポップアップする可能性のある別のものは、複数の送信ボタンでこれを行うことができるかどうかです。 – ewok

@ewokもしそれらがすべて同じフォームに入っていれば、それらはすべて同じAJAX呼び出しを実行し、いつでもフォームの送信にユーザーの1人だけをクリックすることを期待します。 AJAX呼び出しを各ボタンに対してユニークにする（つまり、あるボタンが別のURLに投稿された/別のデータを送信する）場合は、 –

設定方法は、ページに変更を投稿するボタン（「適用」ボタン）と、それをコミットする別のボタンをアクティブにするボタンがあります。（document.getElementById（ "ajaxform"）。submit（）; 'を呼び出すと、どのボタンがクリックされたと認識されるのでしょうか？ – ewok

これはあなたの質問に直接答えるものではありませんが、時間があれば、jQueryを使ってAJAXを処理することをお勧めします。

あなたは、ボタンの押しに添付して、いくつかのコードを呼び出すことができます。あなたがそれらを必要とする場合http://api.jquery.com/jQuery.ajax/

私はいくつかのコード例を掘ることができます。

出典

2012-01-13 14:16:37 webnoob

送信ボタンを押すと、ブラウザはサーバーにデータを送信し、新しいページが読み込まれます。あなたはフォームのサブミットイベントをバインドすることができ、イベントではajaxコールを作成しますが、2つの問題があります。

AJAX呼び出しが

成功したかどうか、すべてのAjaxのデータが

送信される前にブラウザがリダイレクトすることがありますが、見当がつかない私はあなたにAJAXを経由して送信されたデータを送信しようとするだろう隠された入力を使用して同じフォームデータ。両方のコールが異なるURLを目的としている場合、この方法を試してください。

var ajaxSent = false; 
$('#myForm').submit(function(e){ 
    if (!ajaxSent){ 
     e.preventDefault(); 
     $.ajax({ 
      url: "ajaxUrl", 
      // data, method, etc 
      success: function(){ 
       ajaxSent = true; 
       $('#myForm').trigger('submit'); 
      } 
    } 
    // else submit the form 
});

出典

2012-01-13 14:35:52 Juank

私は自分自身jQueryを使用するのが好きですが、質問内のコードは通常のJavascriptにあり、jQueryタグはありません。答えでは、コードがjQueryを使用していることを少なくとも指摘しておいてください。可能であれば、jQueryサイトへのリンクも必要です。 –

DownvoteはjQueryを使用してこれを参照していないため、OPはもともとはありませんでした。 – webnoob

送信ボタンを使用してAJAX機能を有効にするにはどうすればよいですか？

答えて

関連する問題