私は PHP にはかなり強いのですが、javascript はまったく初めてです。
フォームの検証など、プロジェクトにさまざまな ajax 機能を追加する必要があります。
私はいくつかの検索を行い、いくつかのチュートリアルを見て、次のような基本的な作業例を考え出しました:
index.php:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ajax form test</title>
<style>
form input, form textarea {
display:block;
margin:1em;
}
form label {
display:inline;
}
form button {
padding:1em;
}
</style>
</head>
<body>
<h2>CONTACT FORM</h2>
<div id="form_content">
<form method="post" action="server.php" class="ajax">
<label for="name" value="name">name:</label>
<input type="text" name="name" placeholder="name" />
<label for="email" value="email">email:</label>
<input type="email" name="email" placeholder="email" />
<label for="message" value="message">message:</label>
<textarea name="message" placeholder="message"></textarea>
<input type="submit" value="send">
</form>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>
main.js:
$('form.ajax').on('submit', function() {
console.log('trigger');
var that = $(this),
url = that.attr('action'),
type = that.attr('method'),
data = {};
that.find('[name]').each(function(index, value) {
var that = $(this),
name = that.attr('name'),
value = that.val();
data[name] = value;
});
$.ajax ({
url: url,
type: type,
data: data,
success: function(response) {
console.log(response);
$('#form_content').load('server.php', data);
}
});
return false;
});
最後に、server.php:
<?php
if (isset($_POST) AND $_POST['name'] !='' AND $_POST['email'] !='' AND $_POST['message'] !='')
{
?>
<h4>Your data was submitted as follows</h4>
<br />name: <?=$_POST['name']?>
<br />email: <?=$_POST['email']?>
<br />message: <?=$_POST['message']?>
<?php
} else {
?>
<h3>please fill in all form data correctly:</h3>
<form method="post" action="server.php" class="ajax">
<label for="name" value="name">name:</label>
<input type="text" name="name" placeholder="name" />
<label for="email" value="email">email:</label>
<input type="email" name="email" placeholder="email" />
<label for="message" value="message">message:</label>
<textarea name="message" placeholder="message"></textarea>
<input type="submit" value="send">
</form>
<?php
}
すべてのフォーム データを入力して [送信] をクリックすると、ajax マジックが発生し、データの確認が得られるという点で、これはすべて正常に機能します。また、すべてのデータがロードされていない場合、フォームはページに再表示されます。問題は、このような場合、フォーム データを入力して送信し続けると、フォーム データが有効になるまで ajax 呼び出しを繰り返す代わりに、server.php ページが読み込まれることです。
これは私の最初の試みなので、これを行うためのより良い方法があると確信していますが、ここまたはグーグルで検索しても解決策を見つけることができませんでしたが、それはおそらく何を検索すればよいか本当にわからないためです.為に。フォームが正しく送信されるまで、最初のインスタンスの動作を繰り返し可能にするにはどうすればよいですか?