Ajax - jQuery + HTMLフォーム - 提出されたフォームから選択したオプションを表示できません。

Question

フォームでAJAXを練習しようとしています。

私はこの権利を設定しているかわかりません。

私がしようとしているのは、送信を押すと、ドロップダウンから選択した番号の「＃あなたが選んだ番号です」というメッセージが表示されます。

投稿をクリックすると、エラーページが表示されます。明らかに間違っています。機能が必要かどうか分かりませんか？私は基本的にCodeSchoolからシナリオを複製しようとしています:)

https://jsfiddle.net/zjtbf64p/4/

編集：事前に感謝！

******HTML******* 
<form action="/echo/html" method="POST"> 
    <select> 
    <option>1</option> 
    <option>2</option> 
    </select> 
    <input type="submit" value="submit"/> 
</form> 
<div></div> 


******JAVASCRIPT******* 
function test() { 
    $('form').on('submit', function(e) { 
    e.preventDefault(); 
    var form = $(this); 
     $.ajax('/echo/html/', { 
     type: 'POST', 
     data: form.serialize(), 
     success: function(result) { 
      $('div').html('you chose ' + result); 
     } 
    }); 
    }); 
}; 

$(document).ready(function() { 
    test(); 
}); 

Answer 1

テスト後に拡張子（.php）は必要ありませんか？ - それは正しいパスでもあります - 同じディレクトリ内にあれば、 "/"文字は必要ありません。

また

$.ajax('/test.php',... 

- そう、彼らはしませんそれらを正しくターゲットに、ID、クラスまたは名前を経由して、それぞれを識別するための最良の、そしてあなたの入力要素に名前を置くことを忘れないでください - あなたが他のフォームやdivを持っていることを想定しフォーム要素としてアクセス可能。

******HTML******* 
<form name="testForm" action="/test.php" method="POST"> 
    <select name="testSelect"> 
    <option>1</option> 
    <option>2</option> 
    </select> 
    <input type="submit" value="submit"/> 
</form> 
<div id="testDiv"></div> 


******JAVASCRIPT******* 

$(document).ready(function() { 
    $('[name=testform]').on('submit', function(e) { 
    e.preventDefault(); 
    var form = $(this); 
     $.ajax('/test.php', { 
     type: 'POST', 
     data: form.serialize(), 
     success: function(result) { 
      $('#testDiv').html('you chose ' + result); 
      } 
     }); 
    }); 
}); 

Answer 2

あなたのフィドルは意図したとおりに動作しています。ここで何が起こっているのですか？

1. Javascriptが
2. ユーザーが送信ボタンをヒット（データとしてフォームフィールドにaction=にURLを楽しみにあなたを）それが正常に何をやってからそれを防ぐ、提出上のフォームに引っ掛け、とされますあなたのフォーム
3. フォームは正常に提出されませんが、あなたのJavaScriptが引き継ぎます。
4. あなたのjavascriptは/testにAJAXリクエストを送信します。これはjavacriptから取得したものであり、フォームフィールドaction=ではありません。 jsfiddleで
5. サーバーは、彼らが
6. 使いのブラウザではJavaScriptがそのエラーの内容を受信して​​、それとは何かを探しエラーを返送するように設定した/testの内容を、アップ奉仕しようとします。エラーオブジェクトは設定されていないため、エラーは破棄されます。

次にあなたの関数test()を編集してみてください。

function test() { 
    $('form').on('submit', function(e) { 
    e.preventDefault(); 
    var form = $(this); 
     $.ajax('/test', { 
     type: 'POST', 
     data: form.serialize(), 
     success: function(result) { 
      $('div').html('you chose ' + result); 
     }, 
     error: function(result) { 
      alert("an error!"); 
     } 
    }); 
    }); 
}; 

あなたはjsfiddleからエラーをバック取得していることがわかります。

実際の環境では、何が必要なのは、サーバーサイドのスクリプトです。 test.phpにAJAXリクエストを送信した場合、コードはフォーム変数をサーバー上のtest.phpに渡し、test.phpはこれらの変数で何かを行い内容を返します。

AJAXは、ページの一部を更新するだけでなく、サーバーと通信する方法です。情報を取得し、サーバースクリプトに送信し、その情報でサーバースクリプトが何かを実行し、変更されたデータをブラウザーに送り返し、そのデータで何かを実行します。