AJAX отправить форму, вернуть успех - PullRequest
Новая
       11

AJAX отправить форму, вернуть успех

0 голосов
/ 26 февраля 2012

Как видно из названия, я использую 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, поэтому я знаю, что файл правильный.

Ответы [ 4 ]

4 голосов
/ 26 февраля 2012

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

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

Кроме того, убедитесь, что вы используете preventDefault() внутри любого события onClick для таких элементов ввода, как: 

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

Это предотвращает отправку формы формы, как обычно-AJAX one.

Также может быть проблема с использованием $('#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 (по крайней мере).

4 голосов
/ 26 февраля 2012

У выбранной «полки» нет прикрепленного идентификатора. 

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

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

0 голосов
/ 26 февраля 2012

Попробуйте: 

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

, чтобы избежать отправки.

0 голосов
/ 26 февраля 2012

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

success: function () { ...

на эту 

success: function (data) { ...
...