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ってサーバからデータを呼び出し、読み込む技術がメイン?
function setConplete() {
//query配列を作る
var query = [];
//下で作ったsetData関数(queryオブジェクト:フォームからの入力値をオブジェクトに格納)をquery配列に格納
query = setData();
//$.ajaxで「url : 'request/apply.php?mode=regist',」へ送信
$.ajax({
type :'POST', //リクエストのタイプはPOST
url : 'request/apply.php?mode=regist',//送信先 相手先は$mode = $_GET['mode'];で'regist' :へ
data :query, //dataの中身はquery
dataType :'html' //受信するデータの形はhtmlfunction setData() {
//入力値をまとめてオブジェクトに格納する。
var query = {};
query['name'] = $.trim($('#name').val());
query['price'] = $.trim($('#price').val());
return query;
}
コード-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+3
【質問①】
「type 〜 dataType」の4行で、通信の送信と受信の記述をしているという事でしょうか？
返答が難しい質問ですが、期待する応えとしては「No」でしょうね。
送信についてはこの記述のみで十分ですが、返答を受信してその結果を条件分岐等に利用したい場合は
$.ajax({
type :'POST', //リクエストのタイプはPOST
url : 'request/apply.php?mode=regist',//送信先 相手先は$mode = $_GET['mode'];で'regist' :へ
data :query, //dataの中身はquery
dataType :'html' //受信するデータの形はhtml
success: function(data, dataType){
console.log(data);
},
error: function(XMLHttpRequest, textStatus, errorThrown){
console.log(XMLHttpRequest);
});
このように、成功時と失敗時に呼ばれる「コールバック」処理を記述する必要があります。
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という名前で呼ばれているので。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+3
- リクエストのレスポンスがどのようなものであるかを指定しています。ですから json を返す相手と通信するのであれば、dataType: json になります。
- オブジェクトの他、文字列（form で GET で送った時の URL に付属するデータ部と同じもの）、配列（key - value ペアの集合）が使えますが、これは method/type の指定によって中身が変わってきます。（method/type が未指定なら GET と同義なので、GET の場合と同様のデータを送るべきなだけです）
ajax とは「（主に）非同期の HTTP リクエストとレスポンス」ですから、使うには HTTP での form 送信と同じ知識が必要になります（でないと何を送ればいいのかすら分からなくなる）
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+2
ドキュメントが整理されているので、知りたいことがあるなら、まず本家をあたってみるとイイですよ。
jQuery.ajax()
【質問１】
dataType ： The type of data that you're expecting back from the server.
【質問２】
data ： Type: PlainObject or String or Array
和訳のサイトはどれも古いんで、参考にするときは本家をおすすめします。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.09%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2017/01/28 22:58
勉強になりました。ありがとうございます!!