jqueryを使用したドロップダウンリスト

Question

単純なJqueryドロップダウンを実装しようとしています。

HTML

<h2> Networked Graphs</h2> 
<p> Select the node ID from the drop down to see graphs up to a depth of 5 </p> 
<form id="my form"> 
    <label for="Node_type">Node_Type</label> 
    <select id="dropdown_change"> 
    <option value="Customer">Customer</option> 
    <option value="Phone">Phone</option> 
    <option value="ID_Card">ID_Card</option> 
    </select> 
    <input type='submit' value='Submit'> 
</form> 

これはjqueryのコードです：

var selectID = $("#dropdown_change").val(); 
$.ajax({ 
    type: "POST", 
    url: '/echo/html/', 
    data: { 
    html: "<span>This is the ajax response...</span>", 
    delay: 2 
    }, 

    success: function(data) { 
    showMsg('SUCCESS: ' + data); 
    }, 

    error: function (xhr, textStatus, errorThrown) { 
    document.getElementById('dropdown_change').selectedIndex = 0; 
    showMsg('ERROR: ' + errorThrown); 
    return false; 
    } 
}); 

}) // closes ? 

ドロップダウンから選択し、送信ボタンをクリックし、成功メッセージ「SUCCESSを表示する必要があります。これは、 Ajaxレスポンス '私が指定したにもかかわらず

"タイプ：POST" とSUCCESSなどERRORメッセージは、それが以下のエラーで失敗します。

ここ

{"error": "Please use POST request"}

がJsfiddleです。 javascript/jqueryを学習しようとしています。

Answer 1

jQueryのAjaxはページが読み込まれるとすぐに実行されています。ボタンをクリックしても実行されません。ボタンをクリックすると、HTMLフォームが送信されます。

これを実行する方法は、送信を傍受し、jQuery Ajaxを呼び出すリスナーをボタンに追加することです。ここで

$('input[type=submit]').click(function() { 
    var selectID = $("#dropdown_change").val(); 
    $.ajax({... 
    return false; 
}); 

が働いfiddle

Answer 2

jqueryの1.9.0の後、あなたが使用する必要があります

method: "POST" 

代わりの

type: "POST" 

Link