質問: jquery ajax post の例 php フォームからデータベースにデータを送信しようとしています。これが私が使っているフォームです:<form name="foo" action="form.php" method="post" id="foo"> <label for="bar">a bar</label> <input id="bar" name="bar" type="text" value="" /> <input type="submit" value="send" /> </form> 一般的な方法はフォームを送信することですが、これによりブラウザがリダイレクトされます。 jqueryおよび ajax を使用して、フォームのすべてのデータを取得し、それをphpスクリプトに送信することは可能ですか(たとえば、form.php)。
回答: 私はphp + ajaxで投稿するための詳細な方法と失敗時にスローされるエラーを共有したいと思います。まず最初に、form.phpとprocess.phpのように2つのファイルを作成します。最初にformを作成し、それをjquery .ajax()メソッドを使って送信します。残りはコメントで説明されます。 form.php <form method="post" name="postform"> <ul> <li> <label>name</label> <input type="text" name="name" id="name" placeholder="bruce wayne"> <span class="throw_error"></span> <span id="success"></span> </li> </ul> <input type="submit" value="send" /> </form> jqueryクライアントサイド検証を使用してフォームを検証し、データをprocess.phpに渡します。$(document).ready(function() { $('form').submit(function(event) { //trigger on form submit $('#name + .throw_error').empty(); //clear the messages first $('#success').empty(); //validate fields if required using jquery var postform = { //fetch form data 'name' : $('input[name=name]').val() //store name fields value }; $.ajax({ //process the form using $.ajax() type : 'post', //method type url : 'process.php', //your form processing file url data : postform, //forms name datatype : 'json', success : function(data) { if (!data.success) { //if fails if (data.errors.name) { //returned if any error from process.php $('.throw_error').fadein(1000).html(data.errors.name); //throw relevant error } } else { $('#success').fadein(1000).append('<p>' + data.posted + '</p>'); //if successful, than throw a success message } } }); event.preventdefault(); //prevent the default submit }); }); それでは、 process.php を見てみましょう。$errors = array(); //to store errors $form_data = array(); //pass back the data to `form.php` /* validate the form on the server side */ if (empty($_post['name'])) { //name cannot be empty $errors['name'] = 'name cannot be blank'; } if (!empty($errors)) { //if errors in validation $form_data['success'] = false; $form_data['errors'] = $errors; } else { //if not, process the form, and return true on success $form_data['success'] = true; $form_data['posted'] = 'data was posted successfully'; } //return the data back to form.php echo json_encode($form_data); プロジェクトファイルは http://projects.decodingweb.com/simple_ajax_form.zip からダウンロードできます。