Простой 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>
У вас есть две основные проблемы:
Вы определили myFunction
в рамках другой функции. Он не является глобальным, поэтому вы не можете получить доступ к нему из своей функции onsubmit
.
Сделать myFunction
глобальным:
$(document).ready( // Remove this line
function myFunction() {
// ...
}
); // Remove this line
Вы запускаете свой JS при отправке формы.
Добавьте 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);
}
);
Попробуйте этот код, вы пытаетесь отправить действие. поэтому, как только результат придет, страница будет обновлена. Таким образом, вы не сможете увидеть ответ 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>
Нет необходимости объявлять функцию 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
не требуется.