Почему щелчок формы Ajax Jquery не работает против Div, который работает? - PullRequest
Новая
       15

Почему щелчок формы Ajax Jquery не работает против Div, который работает?

1 голос
/ 09 июля 2010

Форма Ajax Jquery не работает против div, почему это происходит и как я могу исправить свою ошибку?

view.html-код с формой

не работает 

<html>
    <head>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    </head>
    <body>
        <form id="parse-form" action="#" method="post">
            <button type="submit" id="submit-html">submit ajax request without parameters</button>
        </form>
        <div>array values: <div id="array-values"></div></div>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#submit-html').click(function() {
                    $.ajax({
                        url: 'controller.php',
                        type: 'POST',
                        dataType:'json',
                        success: function(data) {
                            alert("response begin");
                            alert(data);
                            $.each(data, function (i, elem) {
                                $('#array-values').append('<div>'+elem+'</div>');
                            });
                        }
                    });
                });
            });
        </script>
    </body>
</html>

view.html -форма заменена на div

работает 

<html>
    <head>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    </head>
    <body>
        <div id="parse-form">
            <button type="submit" id="submit-html">submit ajax request without parameters</button>
        </div>
        <div>array values: <div id="array-values"></div></div>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#submit-html').click(function() {
                    $.ajax({
                        url: 'controller.php',
                        type: 'POST',
                        dataType:'json',
                        success: function(data) {
                            alert("response begin");
                            alert(data);
                            $.each(data, function (i, elem) {
                                $('#array-values').append('<div>'+elem+'</div>');
                            });
                        }
                    });
                });
            });
        </script>
    </body>
</html>

controller.php - простой файл php, который возвращает массив json: 

<?php
$arr=array ('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);
echo json_encode($arr);
?>

Спасибо

Ответы [ 4 ]

1 голос
/ 09 июля 2010

Я предполагаю, что form отправляет и обновляет страницу, прежде чем ajax сможет ответить.

Попробуйте поставить return false; в конце обработчика click. 

  $('#submit-html').click(function() {
        $.ajax({
            url: 'controller.php',
            type: 'POST',
            dataType:'json',
            success: function(data) {
                alert("response begin");
                alert(data);
                $.each(data, function (i, elem) {
                    $('#array-values').append('<div>'+elem+'</div>');
                });
            }
        });
        return false; 
    });

Конечно, у вас возникнет та же проблема, если пользователь нажмет Enter в одном из полей.Если вы не препятствуете отправке формы ключом Enter, вы можете обработать событие, используя обработчик submit(). 

  $('#parse-form').submit(function() {
        $.ajax({
            url: 'controller.php',
            type: 'POST',
            dataType:'json',
            success: function(data) {
                alert("response begin");
                alert(data);
                $.each(data, function (i, elem) {
                    $('#array-values').append('<div>'+elem+'</div>');
                });
            }
        });
        return false; 
    });
1 голос
/ 09 июля 2010

Элемент type=submit внутри <form> будет выполнять запрос формы при нажатии.

Необходимо прекратить поведение по умолчанию, запустив event.preventDefault() внутри обратного вызова click.

1 голос
/ 09 июля 2010

Форма имеет действие по умолчанию с кнопкой type="submit", которая отправляет, поэтому вам нужно остановить это, добавив return false или event.preventDefault(), например так: 

$(document).ready(function() {
    $('#submit-html').click(function(e) {
        $.ajax({
            url: 'controller.php',
            type: 'POST',
            dataType:'json',
            success: function(data) {
                alert("response begin");
                alert(data);
                $.each(data, function (i, elem) {
                    $('#array-values').append('<div>'+elem+'</div>');
                });
            }
        });
        return false;
        //or e.preventDefault();
    });
});

Без этого форма отправляется, как обычно, без JavaScript, оставляя страницу.Таким образом, он эффективно обновляет, вместо того, чтобы AJAX отправлял вашу форму (которая не успела завершиться ... потому что вы ушли:)

0 голосов
/ 09 июля 2010

Попробуйте использовать submit () http://api.jquery.com/submit/, это должно работать как с событиями клавиатуры, так и с щелчками.Вы можете использовать serialize () для получения любых данных формы в переменную данных объектов ajax.

...