AJAX submit form, return success

Question

Как видно из названия, я использую ajax для отправки результатов формы во внешний файл.

jQuery отлично работает (то есть, форма появляется, когда я нажимаю соответствующую ссылку) до тех пор, пока я не добавлю Ajax - тогда вся вещь ломается.

Я просмотрел его десятки раз, и я действительно не вижу, что я делаю неправильно.

Jquery + Ajax:

$(document).ready(function(){ 
    $("#change_shelves").click(function(){ 
     $("#add_to_shelf").fadeIn(function(){}); 

    }); 

    $("#add_to_shelf_submit_button").click(function(){ 
     var shelfID = $('#shelf').val(); 

     $.ajax({       
      type: "post", 
     url: "add_to_shelf.php", 
     data: "shelfID=" + shelfID + "&bookID=" + <?php $_GET['id'] ?>, 
        success: function() { 
         $("#add_to_shelf").fadeOut(function(){}); 
          $("#success").fadeIn(function(){}); 
        } 
    }); 
    }); 
}); 

HTML:

<p id="on_shelf">This book is on your <a href="want_to_read.php">want to read</a> shelf. <span id="change_shelves"><a href="#">Change shelves</a></span>.</p> 

<form style="display: none;" id = "add_to_shelf" method="POST" action="add_to_shelf.php"> 
      <select name = "shelf"> 
       <option value = "1">Read</option> 
       <option value = "2">Want to Read</option> 
       <option value = "3">Reading</option> 
      </select> 
      <input type = "submit" id="add_to_shelf_submit_button" value = "submit" name = "Submit" /> 
     </form> 
    <p style="display: none;" id="success">Shelf updated.</p> 

Внешний файл add_to_shelf.php это не проблема - данные успешно отправлен только при использовании JQuery, так что я знаю, что файл верный.

Answer 1

Нет элемента со связанным идентификатором shelf; это не получится:

var shelfID = $('#shelf').val(); 

Plus убедитесь, что вы используете preventDefault() в любом случае OnClick на входных элементов, как:

$(...).onClick(function(e){(
    e.preventDefault(); 
}); 

Это предотвращает форму формы представляемый как типичный без AJAX один.

---

Там также может быть проблемой при использовании $('#shelf').val(), чтобы получить выбранный вариант в любом случае. Попробуйте вместо этого:

$('#shelf option:selected').val(); 

---

Для устранения вы можете попробовать использовать .post() вместо .ajax(). Я нашел это намного более удобным.

$("#add_to_shelf_submit_button").click(function(e){ 
    e.preventDefault(); 
    var shelfID = $('#shelf').val(); 
    alert('#add_to_shelf_submit_button clicked'); 
    $.post("add_to_shelf.php", {"shelfID": shelfID, "bookID" : <?php $_GET['id'] ?>}, function(data){ 
      alert(data);//response from add_to_shelf.php 
    }); 
}); 

Я предполагаю, что здесь, что вы знаете, что $_GET['id'] это значение берется из текущей страницы отправить запрос POST в PHP и получил, прежде чем любой из JS даже загружен.

Перед использованием убедитесь, что вы проверяете $ _GET ['id']. То, как это происходит сейчас, каждый может ввести что-либо в ваш JS (по крайней мере).

Answer 2

В выборе «полки» нет прикрепленного удостоверения.

var shelfID = $('#shelf').val(); 

не определено. Добавить идентификатор избранных и он должен работать

Answer 3

Попробуйте изменить эту строку

success: function() { ... 

этим

success: function (data) { ... 

Answer 4

Try:

$("#add_to_shelf_submit_button").click(function(e){ 
    e.preventDefault(); 
    ... 

, чтобы избежать подачи.