JQuery for AJAX呼び出しを始めたばかりで、単純なスクリプトだと思っていたので、2日後に困惑しました。基本的に、フォームデータをサーバーにPOSTしたいのですが、ユーザーが入力したデータに問題がなければ、「ありがとう」メッセージが返されるか、エラーがあることを示すメッセージが返されます。
どちらの場合も、返してほしいのはHTMLです。ただし、これは、フォームデータにエラーがあり、フォームが再度送信されると、ページが更新されるときに発生します（F5キーを押すと、ブラウザのデフォルトのダイアログボックスで送信またはキャンセルを要求されるためです）。
このページの更新は、フォーム（最初のAJAX呼び出しでサーバーから返されたHTML）を2回送信したときにのみ発生します。それ以外の場合、他の障害はないようです。ユーザーが入力し、最初の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を何年も使用していることを覚えておいてください。