Искал и просматривал форум, пробовал много примеров использования ajax и отправки форм, но не смог найти ничего близкого к работе для того, чего я пытаюсь достичь. Должен признаться, я несколько дней ходил по кругу с этим, и мне нужен кто-то с парой свежих глаз.
У меня 2 страницы: page1.php page2.php
Использование Google jquery / 1.9.0 / jquery.js и локальная разработка.
page1.php выглядит следующим образом (для ясности я опустил теги head и body / html)
$(document).ready(function() {
$('#theForm').submit(function(){
$.ajax({
type: "POST",
url: "page2.php",
data: 'html',
success: function(html){
if(html == 'success'){
$('#address').fadeOut('slow');
$('#done').fadeIn('slow');
}else if(html == 'fail'){
alert('fail');
}
}
});
return false;
});
});
<div id="address">
<form action="page2.php" method="post" name="theForm">
<input name="checkname" type="text" id="checkname">
<input name="Proceed" type="submit" id="submit" value="Next Page" />
</form>
</div>
<div id="done">
That Worked!
</div>
Page2.php Имеет запрос mysql, который проверяет базу данных на предмет проверки имени и отображает «успех» или «сбой» в зависимости от результата. Запрос выполняется нормально и не показывает никаких ошибок.
Когда форма отправлена, page2.php загружается и просто показывает «успех» в браузере. Firebug также показывает успех как с ответом, так и с html. В firebug ошибок нет.
Я в основном хочу, чтобы page1.php оставался, а div #address скрывался, а div #done показывал, когда успех передается из page2.php
Надеюсь, кто-то может помочь.
Обновить Я попробовал эту тестовую страницу:
ajaxone.php
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#theForm').submit(function(){
$.ajax({
type: "POST",
url: "ajaxtwo.php",
data: 'html',
success: function(html){
if(html == 'success'){
$('#address').fadeOut('slow');
$('#payment').fadeIn('slow');
alert('ok');
}else if(html == 'fail'){
alert('fail');
}
}
});
return false;
});
});
</script>
<style type="text/css">
#payment{
visibility:hidden;
}
</style>
<div id="address">
<form action="ajaxtwo.php" method="post" name="theForm" id="theForm">
<p>
<input name="name" type="text" id="name">
</p>
<p>
<input type="submit" name="submit" value="submit">
</p>
</form></div>
<div id="payment">Name is correct</div>
ajaxtwo.php
print_r($_POST);
if($_POST['name'] == 'rob'){
echo 'success';
}else{
echo 'fail';
}
Использование вышеуказанного firebug показывает следующую ошибку:
Array () Неопределенный индекс: сбой имени
Однако, когда я удаляю вызов ajax, отправка работает, и данные передаются. Итак, правильно ли я предполагаю, что если вы не укажете переменные формы в вызове ajax, на следующую страницу ничего не будет отправлено?
Обновление 2. Извините, я отвечаю сам. Похоже, что вам нужно указать данные формы для отправки в вызове ajax. Я только что добавил:
$('#theForm').serialize();
внутри вызова ajax, и теперь форма отправляется без ошибок. Однако это по-прежнему относится к ajaxtwo.php и не показывает успех или неудачу на странице ajaxone.php. Итак, мой следующий этап - добиться успеха или не показать на ajaxone.php
