52065


大変お世話になっております。

以下の例の様にAjaxを使い、php側でデータベースから抽出した複数の値を取得し、それらをhtml側のinputのvalueに設定し表示させようとしております。

しかしながら、Ajaxのsuccess:functionでの設定の方法が分かりません。

因みに、下記をsuccess:function($price1)と設定すると、a.html上ではprice1が表示されます。

下記のケースの場合、どの様な設定にすれば、$price1、$price2、$price3を同時に表示できるかお教えがいませんでしょうか。

[code]

    a.html
     <script type="text/javascript" src="b.js"></script>
     <input name="price1" id="price1" type="text" value="" />   
     <input name="price2" id="price2" type="text" value="" />   
     <input name="price3" id="price3" type="text" value="" /> 
    
    b.js
    $.ajax({
    type:"POST",
    url:serverPath+"c.php",
    data:"type=value",
    success:function(){　　//この行以下での値の設定方法が分かりません。
    $("#price1").val($price1);
    $("#price2").val($price2);
    $("#price3").val($price3);
    }});
    
    c.php
    switch($post['type']){
     case 'value': 
     //sqlによるクエリー、および結果を以下の変数への代入。
     echo $price1;
     echo $price2;
     echo $price3;
     break;
    
[/code]


CC BY-SA 4.0
2019-01-15T18:22:33.337
51997
2019-01-18T02:12:39.563
2019-01-15T18:28:16.080
19211
19211
question
javascript php html jquery ajax
Ajaxのsuccess:functionでphp側からの複数の値を受け取る方法。


Jqueryのajaxメソッドを利用しているのでまずはAPIDocumentを見ることをおすすめします。  
<https://api.jquery.com/jQuery.ajax/>

> success Type: Function( Anything data, String textStatus, jqXHR jqXHR  
>  ) A function to be called if the request succeeds. The function gets  
>  passed three arguments: The data returned from the server, formatted  
>  according to the dataType parameter or the dataFilter callback  
>  function, if specified; a string describing the status; and the jqXHR  
>  (in jQuery 1.4.x, XMLHttpRequest) object. As of jQuery 1.5, the  
>  success setting can accept an array of functions. Each function will  
>  be called in turn. This is an Ajax Event.

リファレンスを見る限り引数として取得できるのは3つで、Ajax通信でデータを取得できるのは第一引数に入ってくると思います。そのためJavascriptでは以下のように引数を合わせて設定しておきましょう。

[code]

    success:function(data, textStatus, jqXHR){
    }
    
[/code]

さらにdataの中身ですが、リファレンスには dataTypeオプションでで設定された内容でフォーマットされるとあります。

同じページのdataTypeオプションのリファレンスを見ると  
xml,json,html,scriptなどいろいろ用意がありますが、一番取り回しをしやすいJSONで説明させていただきます。本来はサーバサイドで出力できる内容に合わせてdataTypeを指定してください。  
phpにはJSONエンコーダがありますのでそれを利用して

c.php

[code]

    switch($post['type']){
    case 'value': 
     echo json_encode(["price1" => $price1,　"price2" => $price2,　"price3" => $price3]);
     break;
    
[/code]

次に受け取り側としてはJSONにフォーマットされているのでオブジェクトとしてそのまま使えるはずですので

[code]

    dataType: "json",
    success:function(data, textStatus, jqXHR){
       $("#price1").val(data.price1);
       $("#price2").val(data.price2);
       $("#price3").val(data.price3);
    }
    
[/code]

ソースを見る限りJavascriptとPHPの変数の違いやデータの引き回しのあたりに、まだ混乱している箇所がありそうですので、Ajaxのチュートリアル等を改めて勉強されたほうが良いかと思います。


CC BY-SA 4.0
2019-01-18T02:12:39.563
52065
2019-01-18T02:12:39.563
22665
51997
answer