刚开始使用 JQuery 进行 AJAX 调用，我认为是一个简单的脚本让我困惑了两天。基本上我希望将表单数据发布到服务器，如果用户输入的数据正常，则返回“谢谢”消息，或者返回一条消息说有错误。
在这两个事件中，我想要返回的都是 HTML。但是，当表单数据出现错误并且再次提交表单时，会发生这种情况（我知道这是因为按 F5 会产生浏览器默认对话框询问发送或取消）。
此页面刷新仅在第二次提交表单（初始 AJAX 调用时从服务器返回的 HTML）时发生。否则似乎没有其他故障。用户输入并通过初始 AJAX 调用发送到服务器的数据也可以。
当出现错误时，这只是服务器将 HTML 发送回客户端后发生的情况。我已经在下面发布了代码和 HTML，此时任何想法都会受到欢迎，因为我对这个 JQuery / AJAX 东西真的很陌生！
<!-- found on the contact page -->
<script type="text/javascript">
$(document).ready( function() {
$( '#submit' ).click( function() {
var payload = $( '#form' ).serialize();
// var name = $('input[name=name]');
// var data = 'name=' + name.val();
$.ajax({
url: '/contact/post/',
type: 'post',
data: payload,
cache: false,
success: function( html ) { console.log( html );
$( '#formbox' ).html( html );
}
});
return false;
}); // close of #submit
});
</script>
<!-- ... ... -->
<div id="formbox">
<form
id="form"
method="post"
accept-charset="utf-8"
action="#">
<!-- using only one field at the moment (debugging purposes) -->
<div class="lft"><p><label for="_name">Name</label> </p></div>
<div class="rgt"><p> <input type="text" id="_name" name="name" size="16" maxlength="32" value="Elizabeth Q" /></p></div>
<div class="lft"><p> </p></div>
<div class="rgt"><p>
<input type="submit" id="submit" name="submit" value="Send Message" />
</p></div>
</form>
</div>
<!-- what is returned from server if no errors with user data -->
<div class="both">
<p>Thank you for contacting us, please expect a prompt reply shortly.</p>
</div>
<!-- what is returned from server if there are errors with user data -->
<form
id="form"
method="post"
accept-charset="utf-8"
action="#">
<div class="both">
<p class="error">Please amend the following error(s) shown below before trying again.</p>
<br />
<ul>
<?php foreach( $this -> get( 'logger' ) -> export() as $error ): ?>
<li><p><?php echo $error; ?></p></li>
<?php endforeach; ?>
</div>
<div class="lft"><p><label for="_name">Name</label> </p></div>
<div class="rgt"><p> <input type="text" id="_name" name="name" size="16" maxlength="32" value="<?php echo $this -> get( 'name' ); ?>" /></p></div>
<div class="lft"><p> </p></div>
<div class="rgt"><p>
<input type="submit" id="submit" name="submit" value="Send Message" />
</p></div>
</form>
<!-- the php file that determines user data is valid or not and returns response -->
final class QPage_Handler_Ajax extends QPage_Handler_Validator {
public function __construct() {
$this -> initialise();
$this -> id = 'site';
}
public function execute( QDataspace_Interface $dataspace ) {
if( !$this -> validate( $request = QRegistry::get( 'request' ), QRegistry::get( 'logger' ) ) ) {
// execute this handler as errors found
$this -> handler -> execute( $dataspace );
} else {
// no errors with data sent to server
$page = new QPage_View( $request = QRegistry::get( 'request' ) );
$page -> render( 'contact/post/body.tpl' );
}
}
protected function initialise() {
$this -> forward( new QPage_Handler_Ajax_Success() );
$this -> addCondition( QValidator::factory()
-> addCondition( new QValidator_Condition_Required( 'name', 'The field "name" is required.' ) )
-> addCondition( new QValidator_Condition_Expression( 'name', '/^[a-zA-Z ]+$/', 'The field "name" has illegal character(s).' ) )
-> addCondition( new QValidator_Condition_Size_Maximum( 'name', 32, 'The field "name" must not exceed 32 characters.' ) )
);
}
}
final class QPage_Handler_Ajax_Success extends QPage_Handler {
public function __construct() {
$this -> id = 'site';
}
public function execute( QDataspace_Interface $dataspace ) {
$page = new QPage_View( $request = QRegistry::get( 'request' ) );
$page -> set( 'logger', QRegistry::get( 'logger' ) );
$page -> render( 'contact/post/error.tpl' );
}
}
任何关于如何解决我遇到的问题的建议都非常受欢迎和赞赏。请记住，我是使用 JQuery 的新手，但我使用 PHP 已经很多年了。