$.ajaxの記述や機能について質問です。

ajaxの記述や機能についてですが、処理とデータの流れが気になり、ご教授いただければと思い投稿しました。
よろしくお願いいたします。

下記にjavascriptを2つ記述しています。

処理はざっくりとですが、、、、
①.setData関数で入力値をまとめて配列に格納する。
②.setConplete関数で入力データを登録する
③. ②の為に$.ajaxでurlに送信

【質問①】
$.ajaxは通信を行う機能がある類のものと思っていますが、
「type 〜 dataType」の4行で、通信の送信と受信の記述をしているという事でしょうか？
ここで、「dataType :'html」は送信先から返ってきたデータ形式が「html」ということを指しているのでしょうか？

「送信先:url : 'request/apply.php?mode=regist',」がjson形式で返してきた場合
「dataType :'json'」になるんでしょうか？

【質問②】
送信するパラメータ「data :query,」は「オブジェクト(var query = {};)」でないと送信できないのでしょうか？

不躾な質問ですみませんが、よろしくお願いいたします。

追記：ajaxってサーバからデータを呼び出し、読み込む技術がメイン?

javascript
1function setConplete() {
2//query配列を作る
3	var query = [];
4//下で作ったsetData関数(queryオブジェクト:フォームからの入力値をオブジェクトに格納)をquery配列に格納 
5	query = setData();
6//$.ajaxで「url : 'request/apply.php?mode=regist',」へ送信
7$.ajax({
8		type :'POST', //リクエストのタイプはPOST
9		url : 'request/apply.php?mode=regist',//送信先 相手先は$mode = $_GET['mode'];で'regist' :へ
10		data :query, //dataの中身はquery
11		dataType :'html' //受信するデータの形はhtml

javascript
1function setData() {
2	//入力値をまとめてオブジェクトに格納する。
3	var query = {};
4	query['name'] = $.trim($('#name').val());
5	query['price'] = $.trim($('#price').val());
6
7	return query;
8}
9コード

行動規範の内容に同意します

回答3件

ベストアンサー

【質問①】
「type 〜 dataType」の4行で、通信の送信と受信の記述をしているという事でしょうか？

返答が難しい質問ですが、期待する応えとしては「No」でしょうね。
送信についてはこの記述のみで十分ですが、返答を受信してその結果を条件分岐等に利用したい場合は

JavaScript
1$.ajax({
2        type :'POST', //リクエストのタイプはPOST
3        url : 'request/apply.php?mode=regist',//送信先 相手先は$mode = $_GET['mode'];で'regist' :へ
4        data :query, //dataの中身はquery
5        dataType :'html' //受信するデータの形はhtml
6        success: function(data, dataType){
7            console.log(data);
8        },
9        error: function(XMLHttpRequest, textStatus, errorThrown){
10            console.log(XMLHttpRequest);
11        });

このように、成功時と失敗時に呼ばれる「コールバック」処理を記述する必要があります。
http://semooh.jp/jquery/api/ajax/jQuery.ajax/options/

返答が難しい、としたのは、success等のコールバック処理を行わなくとも勝手にレスポンスは返ってくるわけで、通信を「投げるだけ」でやりたい事が完了する場合は、わざわざコールバックでレスポンスを受け取る必要もないわけです。
ただ、失敗時のエラー処理の必要もあると思いますので、普通は投げっぱなしではなくチェックすると思いますが。

ここで、「dataType :'html」は送信先から返ってきたデータ形式が「html」ということを指しているのでしょうか？

「返ってきた」と言うより、「返してほしい」形となります。
勿論、返答する側が対応していなければ意味がありません。

「送信先:url : 'request/apply.php?mode=regist',」がjson形式で返してきた場合
「dataType :'json'」になるんでしょうか？

上記の事から、「JSON形式が欲しいなら、dataType: 'json'を指定する」
という回答になります。

【質問②】
送信するパラメータ「data :query,」は「オブジェクト(var query = {};)」でないと送信できないのでしょうか？

基本的にはオブジェクト形式の方が便利だと思いますが、テキストをペロっと送る事も可能です。
が、受け取る側が困るんじゃないでしょうかね。
オブジェクトであれば、インデックスがあってデータがあるので、取りたい値が入っているインデックスを元にデータを引っ張って来れますが、それが出来ませんので。

追記：ajaxってサーバからデータを呼び出し、読み込む技術がメイン?

そうですね。JavaScriptから非同期で通信を投げ、その結果を元に色々する技術の総称としてajaxという名前で呼ばれているので。

投稿2017/01/27 07:16

編集2017/01/27 07:54

kunai

総合スコア5405

hiro0208

2017/01/28 13:58

なるほどですね! 勉強になりました。ありがとうございます!!

行動規範の内容に同意します

リクエストのレスポンスがどのようなものであるかを指定しています。ですから json を返す相手と通信するのであれば、dataType: json になります。
オブジェクトの他、文字列（form で GET で送った時の URL に付属するデータ部と同じもの）、配列（key - value ペアの集合）が使えますが、これは method/type の指定によって中身が変わってきます。（method/type が未指定なら GET と同義なので、GET の場合と同様のデータを送るべきなだけです）

ajax とは「（主に）非同期の HTTP リクエストとレスポンス」ですから、使うには HTTP での form 送信と同じ知識が必要になります（でないと何を送ればいいのかすら分からなくなる）

投稿2017/01/27 07:09