質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

3回答

3745閲覧

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

hiro0208

総合スコア75

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2017/01/27 06:03

編集2017/01/27 06:52

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コード

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

【質問①】
「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

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

0

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

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

投稿2017/01/27 07:09

tacsheaven

総合スコア13703

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ドキュメントが整理されているので、知りたいことがあるなら、まず本家をあたってみるとイイですよ。
jQuery.ajax()
【質問1】

dataType : The type of data that you're expecting back from the server.

【質問2】

data : Type: PlainObject or String or Array

和訳のサイトはどれも古いんで、参考にするときは本家をおすすめします。

投稿2017/01/27 08:49

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問