Q&A
json形式という便利なﾓﾉｶﾞｰ
ajax処理の$.postで複数値を返すにはどうすればいいのでしょうか？
値を一つだけ返すならば問題なく出来ていたのですが、返す値が複数になると上手くいきませんでした。以下試して上手くいったことです。
html
1<!--index.html--> 2 3<!DOCTYPE html> 4<html lang="ja"> 5<head> 6 <meta charset="utf-8"> 7 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 8 <script src="test.js"></script> 9 <title>ajax練習</title> 10</head> 11<body> 12 13 <input id="date_1" type="date" name="date1" value=""> 14 <input id="date_2" type="date" name="date2" value=""> 15 16 <div id="btn">BUTTON</div> 17 18 <div id="result_1"></div> 19 <div id="result_2"></div> 20 21</body> 22</html> 23
BUTTONをクリックしたらphpのデータを読み込む感じです。あまりよろしくない書き方かもしれませんが、これでもphpの方で読み込んではくれました。
jquery
1//test.js 2 3$(function() { 4 'use strict'; 5 6 $('#btn').click(function() { 7 8 var val1 = $("#date_1").val(); 9 var val2 = $("#date_2").val(); 10 11 $.post('/test.php', { 12 date1: val1, 13 date2: val2 14 }, function(res) { 15 console.log(res); 16 $("#result_1").text(res); 17 // $("#result_2").text(res); 場所を分けて出力したい 18 }); 19 }); 20 21}); 22
PHP
1//test.php 2 3<?php 4 5$fromjs1 = $_POST["date1"]; 6$fromjs2 = $_POST["date2"]; 7$date1 = date("Y年m月d日", strtotime($fromjs1)); 8$date2 = date("Y年m月d日", strtotime($fromjs2)); 9echo $date1 ."\n"; 10echo $date2;
しかし上の書き方は調べても出てきませんし、どちらにせよ値を一個しか返せない気がしたので、送信段階で配列にしてphpに渡してあげる感じなのかなと予測してtest.jsの方でこんな感じにも書いてみました。
jquery
1//test.js 2 3$(function() { 4 'use strict'; 5 6 $('#btn').click(function() { 7 8 var values = { 'date1': $('#date_1').val(), 'date2': $('#date_2').val() }; 9 10 $.post('/test.php', { 11 data : values 12 }, function(res) { 13 console.log(res); 14 $("#result_1").text(res); 15 // $("#result_2").text(res); 場所を分けて出力したい 16 }); 17 }); 18 19});
先ほどよりもそれなりになった感はありますが、結局返してくる値が配列でないと分けることはできないのかなという感じです。
php
1//test.php 2 3<?php 4 5$fromjs1 = $_POST["data"]["date1"]; 6$fromjs2 = $_POST["data"]["date2"]; 7 8$date1 = date("Y年m月d日", strtotime($fromjs1)); 9$date2 = date("Y年m月d日", strtotime($fromjs2)); 10echo $date1 ."\n"; 11echo $date2 ;
あれ、結局これだとさっきとあまり変わらない、、、、と悩んでおります。
出力される結果を分けたい場合はどのように記述すればよいでしょうか？
ご教授よろしくお願いいたします。
回答3件
0
ベストアンサー
- dataTypeがtext/stringなら適当なセパレータを入れて（a|b|c）、返りをうけとったJavaScript側でsplit。
- dataTypeがJSONなら配列にjson_encode()かけた文字列をechoして、返りを受け取ったJavaScript側でJSONオブジェクトとしてアクセス。
今の質問者さんのコードを活かすなら未指定の場合はstringなので1.
改行コードで返されているみたいなので改行コードでsplitすれば良いです。
が、セパレータで利用した文字列が入ってきてしまうと想定の形にならないので、やはり2.をオススメします。
dataTypeについては下記のようなリファレンスを確認してください。
あとは「ajax dataType json」とかでも検索して色々試してみてください。
投稿2019/05/23 05:53
編集2019/05/23 05:56
総合スコア80850
$.post()の書き方よりも、$.ajax()の書き方のほうがサンプル多くて細かい制御ができて私は好きなんだけどなぁ。いいサンプルコードを見つけて真似するだけですぐにできちゃう敷居の低さもあるはずなんだけど。
私も$.ajax() 派ですね。むしろそっちしか使わないくらい。
中には「今のコードからすぐなんとかしたい」と思っている人もいるかなと思ってそちらに寄せたアドバイスもいれてます。
近頃質問で$.post()使ってるコード提示している方多いですね～
と言いつつ私もGETの時は$.getJSONとか使っちゃうタイプですが・・・
横から失礼しました
検索のしかた次第では１発目に出てきますね。不正解ではないですし目的が完全に決まっているなら有用な場面も少なくはないですが、やはり色々設定できたほうがより汎用的に使えるので$.ajax()のほうが広く使われますね
色々な回答が来て混乱してきました、、、回答の中から調べてみてJSON形式が一番値を取りやすいのかなと感じたのですが、これは$.ajax$()で書くとなるとまた別の書き方になってくるのでしょうか？ $.post()や$.get()をただ$.ajax()に変える感じ使えたりできますでしょうか？
teratailは船頭多くして船山に登る、になりがちなので、jQuery→php→もとのjQueryの流れをちゃんと実現できているQiitaの記事を読むのを勧めたいけど
mekaさん
$.postでもJSONできます。
https://api.jquery.com/jquery.post/
jQuery.post( url [, data ] [, success ] [, dataType ] )
第4引数をJSONにすると良いです（第3引数success も埋める必要がありますが）
$.ajaxも内部的に振り分けて$.postや$.getを読んでいるだけ、と認識してください。
m6uさんからも提案があったので下記のような記事を見てもらえると、$.ajax＋JSONの場合の書き方もわかりやすいと思います。
https://php-archive.net/php/ajax-json/
・同一ドメイン間で JSON を使ったサンプル
のコード。
>$.post()や$.get()をただ$.ajax()に変える感じ使えたりできますでしょうか？
いいえ。先に書きましたように$.ajax()から内部的に$.post()を呼び出すので書き方が変わります。$.post()は何番目の引数にこの情報・・というのが決まっていますが、$.ajaxは連想配列で設定します。
https://api.jquery.com/jquery.ajax/
jQuery.ajax( url [, settings ] )
ありがとうございます！一日調べて大体の流れはつかむことができました。今回は$.post()でやってみてうまく表現することができました。最終的にphpで変数 = 配列を作って echo json_encode(変数);で返してconsole.log(res);のなかでconsole.log(res.配列名);で分けて取ることができました。
理解につながったようで何よりです。
適切にconsole.log()が使えればデータの流れも掴めるようになるので良いと思います。
0
受け側が一つしか受けてくれない場合はinputごとにおくってあげてください
- 送り側
javascript
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 2<script> 3$(function(){ 4 $('#send').on('click',function(){ 5 Promise.all([ 6 $.ajax({ 7 url:"test.php", 8 type:"post", 9 data:{data:$('[name=v1]').val()} 10 }), 11 $.ajax({ 12 url:"test.php", 13 type:"post", 14 data:{data:$('[name=v2]').val()} 15 }), 16 $.ajax({ 17 url:"test.php", 18 type:"post", 19 data:{data:$('[name=v3]').val()} 20 }), 21 ]).then(function(data){ 22 console.log(data); 23 }); 24 }); 25}); 26</script> 27<form> 28<input type="text" name="v1" value="aaa"><br> 29<input type="text" name="v2" value="bbb"><br> 30<input type="text" name="v3" value="ccc"><br> 31<input type="button" value="send" id="send">
- 受け側：test.php
PHP
1<?PHP 2$data=filter_input(INPUT_POST,"data"); 3if(!is_null($data)){ 4 print "ret_".htmlspecialchars($data)."_ret"; 5}; 6?>
jQueryっぽく
javascript
1<script> 2$(function(){ 3 var d=[]; 4 $('#send').on('click',function(){ 5 $.each(["v1","v2","v3"],function(x,y){ 6 d[x]=$.Deferred(); 7 $.ajax({ 8 url:"test.php", 9 type:"post", 10 data:{data:$('[name='+y+']').val()} 11 }).done(function(data){ 12 d[x].resolve(data); 13 }); 14 }); 15 $.when.apply(null,d).done(function(d1,d2,d3){ 16 console.log([d1,d2,d3]); 17 }); 18 }); 19}); 20</script> 21<form> 22<input type="text" name="v1" value="aaa"><br> 23<input type="text" name="v2" value="bbb"><br> 24<input type="text" name="v3" value="ccc"><br> 25<input type="button" value="send" id="send">
投稿2019/05/23 06:30
編集2019/05/24 01:41
総合スコア114777
0
dataの所の記述は
data: {date1 : date１の値, date2 : date2の値 }, dataType: 'jsonp',
のようにしてみてはいかがでしょうか？
投稿2019/05/23 06:02
編集2019/05/23 06:08退会済みユーザー
総合スコア0
当質問ではリクエストではなくレスポンスの質問をされているように見受けられます。
あなたの回答
tips
プレビュー
