フォームFormのデータをJSON+Ajaxで送る

<form action = "./php/send_mail.php" method = "post">
<dl>
     <dt>
     <span class = "required">お名前</span></dt>
     <dd><input type = "text" name = "name" class = "name" requied></dd>
     <dt><span class = "required">メールアドレス</span></dt>
     <dd><input type = "text" name = "email" class = "email" requied></dd>
     <dt>お問い合わせ内容</dt>
     <dd>
          <select name = "type" class = "type">
               <option value = "レコーディングのご依頼">レコーディングのご依頼</option>
               <option value = "演奏、出演のご依頼">演奏、出演のご依頼</option>
               <option value = "楽曲制作、編曲のご依頼">楽曲制作、編曲のご依頼</option>
               <option value = "その他のお問い合わせ">その他のお問い合わせ</option>
          </select>
     </dd>
     <dt>メッセージ</dt>
     <dd><textarea name = "message" class = "message"></textarea></dd>
</dl>
<button type="submit" name="action" value="send">Submit</button>
</form>

$(function(){
     $('form').submit(function(event) {
          //送信ボタンのキャンセル
          event.preventDefault();
          //serializeとJSON.stringifyを使ってシリアライズしたデータをJSONに加工
          var JSONdata = JSON.stringify( $( 'form' ).serializeArray() );
          $.ajax({
               url: './php/send_mail.php',
               type: 'post',
               data: JSONdata,
     })     
     .done(function(data) {
          // data にサーバーから返された html が入る
          // 通信が成功したときの処理
          alert('成功');
          //メッセージの表示切替
          $("#contact-box").replaceWith("<h4>お問い合わせいただきありがとうございます。</h4>");
     }) 
     .fail(function(data) {
          // 通信が失敗したときの処理
          //alert('失敗');
     })
     .always(function(data) {
          // 通信が完了したとき
     });
});

 

参考リンク

https://teratail.com/questions/56108

jQueryでフォームをAjax送信する際の基本パターンのチュートリアル。二重送信の防御とか。


https://qiita.com/hkomo746/items/c18dcf4471cc5dc6d769
https://qiita.com/kidatti/items/21cc5c5154dbbb1aa27f

$.ajax

基本的な書き方

function hoge(x,y){
		$.ajax({
		url: './sample.php',
		type: "GET",
		//変数を渡す(必要なければ省略)
		data: {
			id: x,
			password: y
		},
		dataType: "json",	
		success: function(data){
		//成功したときの処理
		console.log("こんにちは、" + data.name + "さん");
		},
		error:	function(){
		//失敗したときの処理
		console.log("エラー");
		}
	});
}

jQueryとは

基本の型

jQuery( function ($) {
// この 中 に 処理 を 書く
});

※これ以外にも書き方あるけどHTMLの読み込み順を気にしないといけないなど不便なので使わない。

$( function($){
//処理 を ここ に 書く
});

※これでも動くけど$が別のライブラリーで使われてた場合に不具合が生じる

jQueryでできること

  • CSSの操作
  • DOM要素(HTML)を付け加えたり
  • AJAXを使った非同期でのjSONの取得やDOM要素の書き換え

$(jQuery)の基本的な使い方

$はjQueryの別名(エイリアス)
$(…)はjQuery(…)と書くこともできる!?

セレクター

$(” セレクター文字列”)
$(“#name”)

DOMの生成

$(“HTML文字列”)
$(“< li > 三郎 ”). appendTo(“# family”);
第 2 引数 に オブジェクト を 指定 する と、 その オブジェクト の プロパティ は、 HTML の 属性 として 設定 さ れ る。

jQuery( function ($) {
$("< a >", {
href: "abc. html",
target: "_blank",
”class”: "myClass"
});
});

jQuery オブジェクト

$( セレクター) を 呼び出す と、 jQuery オブジェクト が 返さ れ る。
SMXLL

メソッドチェーン:「つなげて書けるよ」ってこと

$("#color_div").css("border","1 px solid red").css("color","red");

※ただしwidthとかの「値」取得した場合は jQuery オブジェクト は 返っ てこないのでつなげられない。