ajaxで送信されたフォームの結果としてhtmlページを返します。

Question

AJAXでフォームを送信し、結果のHTMLページにタグdivを挿入しようとしています。送信ボタンをクリックするたびに、フォームがあるページがリフレッシュされます（これはAJAXで私が理解したものでは起こりません）。結果はありません。

私はjavascriptとは異なる解決策を見つけましたが、私はAJAXを学ぼうとしているので、どこでミスをしたのかを知りたいと思います。ここで

htmlコード：

<form action="book.php" id="infoPrn"> 
    <p><input type="text" placeholder="Name" required name="name"></p> 
    <p><input type="text" placeholder="Email" required name="email"></p> 
    <p><input type="text" placeholder="Tel" name="tel"></p> 
    <p><input type="submit" role="button" value="Book"></p> 
</form> 

ここでのjQueryコード：助けを

<script > 
    $("#infoPrn").submit(function(e) { 
     e.preventDefault(); 
       $.ajax({ 
        type: 'POST', 
        data: $("#infoPrn").serialize(), 
        url: 'book.php', 
        success: function(data) { 
         $(".confirm").html(data); 
        } 
      }); 
     }); 
</script> 

感謝。

Answer 1

あなたのAJAXは問題ありません。あなたのフォーム提出も問題ありません。あなたが忘れてしまったことは、単にあなたの出力を含むように<div>を作成することです：

<div class="confirm"></div> 

この<div>は、最初は空白になります、とフォームが送信されるとbook.phpの内容が読み込まれます。ここで

は完全なコードです：

<form action="book.php" id="infoPrn"> 
    <p><input type="text" placeholder="Name" required name="name"></p> 
    <p><input type="text" placeholder="Email" required name="email"></p> 
    <p><input type="text" placeholder="Tel" name="tel"></p> 
    <p><input type="submit" role="button" value="Book"></p> 
</form> 
<div class="confirm"></div> 

<script> 
    $("#infoPrn").submit(function(e) { 
    e.preventDefault(); 
    $.ajax({ 
     type: 'POST', 
     data: $("#infoPrn").serialize(), 
     url: 'book.php', 
     success: function(data) { 
     $(".confirm").html(data); 
     } 
    }); 
    }); 
</script> 

は、この情報がお役に立てば幸い！ :)