Получить результат, помещенный в <div>, используя AJAX и jQuery

Question

Получить результат, помещенный в <div>, используя AJAX и jQuery

-3

Простой GET с использованием AJAX и jQuery. Попытка поместить полученный html в div ниже формы. DIV не заселяет, что я делаю неправильно?

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script type="text/javascript">
    $(document).ready(
        function myFunction()
        {
            var name = document.forms["form"]["name"].value;
            $.get( "fetch-photographer.php?name="+name,(
                function( data ) {
                    $( "#responseArea" ).html( data );
                })
            );
        }
    );
</script>
</head>

<body>
<form name="form" method="post" onsubmit="myFunction()">
<input type="text" name="name" value="Enter a search">
<input type="submit" value="Submit">
</form>
<div id="responseArea"></div>
</body>

Prometheus 03 июнь 2014, в 12:56

Источник

0

Что происходит ? В чем ошибка?
BastienSander 03 июнь 2014, в 10:12
0

Div не имеет никакого результата.
Prometheus 03 июнь 2014, в 17:01

Теги:

php

javascript

jquery

html

ajax

3 ответа

Ещё вопросы

Quentin · Answer 1 · 2014-06-03T08-00-00.000Z

У вас есть две основные проблемы:

Вы определили myFunction в рамках другой функции. Он не является глобальным, поэтому вы не можете получить доступ к нему из своей функции onsubmit.

Сделать myFunction глобальным:

$(document).ready( // Remove this line
    function myFunction() {
        // ...
    }
); // Remove this line

Вы запускаете свой JS при отправке формы.

JavaScript отправляет HTTP-запрос
Форма отправляет
Страница уходит
Новая страница загружается
Нет JS для обработки HTTP-ответа

Добавьте return false в конец функции onsubmit.

<form name="form" method="post" onsubmit="myFunction(); return false;">

Еще лучше, используйте современный способ привязки обработчиков событий:

<form id="form" method="post">

$("#form").on("submit", myFunction);

function myFunction(event) {
    event.preventDefault();
    // rest of your function
}

Обратите внимание, что вы не можете избежать каких-либо специальных символов, которые пользователь может ввести. Не создавайте строки запроса вручную, если вы используете jQuery, используйте для этого встроенные функции: Передайте данные как объект через второй аргумент $.get.

$.get(
    "fetch-photographer.php",
    { name: document.forms["form"]["name"].value },
    function (data) {
        $("#responseArea").html(data);
    }
);

Я попробовал предложения, функция для обработки GET не стреляет.

Thaangaraj · Answer 2 · 2014-06-03T08-16-00.000Z

Попробуйте этот код, вы пытаетесь отправить действие. поэтому, как только результат придет, страница будет обновлена. Таким образом, вы не сможете увидеть ответ AJAX в вашем div.

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script type="text/javascript">
function myFunction()
{
    var name = document.forms["form"]["name"].value;
    $.get( "fetch-photographer.php?name="+name,(
        function( data ) {
            $( "#responseArea" ).html( data );
        })
    );
    return false;
}
</script>
</head>

<body>
<form name="form" method="post" onsubmit="return myFunction();">
<input type="text" name="name" value="Enter a search">
<input type="submit" value="Submit">
</form>
<div id="responseArea"></div>
</body>
</html>

та же проблема, что и выше, функция внутри get не вызывается.
Используйте firebug для отслеживания того, запущен ли вызов AJAX или нет. Также убедитесь, что вы получаете ответ от fetch-photographer.php

kamesh · Answer 3 · 2014-06-03T08-12-00.000Z

Нет необходимости объявлять функцию Javascript внутри функции jquery ready... Я сделал то же самое, используя событие отправки формы в jquery и удаляю дополнительную парную скобку

 $(document).ready(function(){
        $('form').submit(function(e){
            var name = document.forms["form"]["name"].value;
            $.get( "fetch-photographer.php?name="+name,
                function( data ) {
                    $( "#responseArea" ).html( data );
                });
        });
    });

С этим кодом атрибут onsubmit в теге form не требуется.
не будет попадать в $ ("#responseArea") .html (data);