初めてajaxを使ったフォーム送信のコードを書いたのでメモ。
(今まではコピペラミングでした。自分で書くのとコードを眺めるとのでは大違いですね・・・)
- フォーム部分のHTMLと、submit後の処理のjQueryのサンプルコード
- 項目は「名前」と「コメント」のみ
- submit後にバリデーションを行い、OKであればajax通信を行う。NGの場合エラーメッセージを表示する。
という基本的なコードのみなので、項目を足したり、バリデーションのルールを追加したり、カスタマイズしてください。
フォームのHTML部分
<form id='sample_form' action="javascript:void(0)"> <p>名前</p> <input name="name" type="text"> <div id="name_err"></div> <p>コメント</p> <textarea name="comment"></textarea> <div id="comment_err"></div> <div id="send_err"></div> <button id="submit">コメントを送信する</button> </form>
JS部分(フォームバリデーションとajax通信)
$('#submit').click(function(e){ var name = $('[name=name]').val(); var comment = $('[name=comment]').val(); var postData = {}; postData["name"] = name; postData["comment"] = comment; if(validateData(postData) === false){ $.ajax({ url: 'http://www.wegirls.tech/ajax/post/sample', type: "POST", dataType : "json", data: postData, timeout: 30000, beforeSend: function(xhr, settings) { //送信前の処理:ボタンを非活性化して、二重送信を防ぐ $('#submit').attr('disabled', true); }, complete: function(xhr, textStatus) { //ajax通信が完了したら、ボタンの非活性化を解除する $('#submit').attr('disabled', false); }, success: function(result, textStatus, xhr) { //ajax通信が成功したときの処理 //PHP側で、エラーであれば0、成功であれば1を返すようにしてあると仮定 if(result['code'] == 0){ $('#send_err').text('コメントを送信できませんでした'); }else{ $("#sample_form")[0].reset(); alert('コメントを送信しました。'); } }, error: function(xhr, textStatus, error) { //ajax通信が失敗した時の処理 $('#send_err').text('コメントを送信できませんでした'); } }); } function validateData(postData){ //エラーがないときはerr_flgはfalseとする var errFlg = false; //複数回エラーになったときのためにリセットしておく $('#name_err').text(''); $('#comment_err').text(''); //名前のバリデーション if(postData['name'].length > 10){ $('#name_err').text('名前は10文字以内で入力してください。'); errFlg = true; } //コメントのバリデーション if(postData['comment'].length > 100){ $('#comment_err').text('コメントは100文字以内で入力してください。'); errFlg = true; } return errFlg; } });
今回の反省点
力足らず&時間足らずで以下の点ができなかった。時間があればupdateしたい。
- エラー内容ごとに表示が分かれておらず、わかり難い
- エラーのときにログ吐き出しがあると(サービス的に)良さそう
- .addClass/.removeClassで制御するエラーメッセージの表示と、今回の.textでは、どっちがいい?
コードレビューもお待ちしてます!(お手柔らかに)