刚刚开始使用JQuery进行AJAX调用，我认为这个简单的脚本让我感到困惑两天了。基本上我希望将表单数据POST到服务器，如果用户输入的数据没问题，则返回“Thank You”消息，或者返回消息说有错误。
在这两个事件中，我想要返回它的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多年了。
答案 0 :(得分：2)
我猜你应该使用event.preventDefault()
所以，试试这个：
$( '#form' ).submit( function(event) {
event.preventDefault();
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
答案 1 :(得分：1)
如果使用.submit()（对于FORM元素而不是提交按钮），它会更漂亮，即使表单是通过另一个动作提交的，而不是单击按钮，它也会触发提交功能。
您还必须使用event.preventDefault();
其他最佳做法是将您要提交的网址放在表单的action属性中，这将使该网站对停用javascript的用户有用。
答案 2 :(得分：0)
这只是一个JavaScript / jQuery问题。
在页面加载时，您正在运行jQuery代码，该代码绑定提交按钮上的单击。然后，当单击提交按钮并发生错误时，您将再次从PHP返回整个表单（与成功POST的情况不同，您只返回成功消息）。
问题在于，根据jQuery，删除了点击事件绑定的旧提交按钮。并换成新按钮。
可以用这个解决几个问题，有些是不好的选择，有些则更好。我建议如下：
不返回整个表单，只返回错误消息并将其添加到表单中。
<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>
P.S。我会将$( '#submit' ).click( function() {更改为$("#form").submit(function(){
因为即使表单以不同的方式提交，例如在文本字段中单击Enter，也会被触发。
一个小技巧是从PHP返回带有AJAX的JSON，它将帮助您以更轻松的方式完成此任务。
另一种解决方案是使用.live() .on()
这是一个简单的方法，但我不建议这样做。
$(document).ready( function() {
// this can also be replaced by: $('#formbox').on('click', '#submit', function() {
$('#formbox').on('submit', '#form', 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
});
修改
自jQuery 1.7以来，.live()已被弃用，自jQuery 1.9以来已被删除