Раскрывающийся список с помощью 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 ? 

Выбор из выпадающего списка и нажав на кнопку отправки должен отображать УСПЕХ сообщение об успехе»: Это ответ Ajax ".

Даже если я указываю "типа:" POST и УСПЕХ, а также 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