Posted on

JQueryにてJSONをPHPに送り、さらにベーシック認証の指定のURLにPOSTしてJSON形式のデータを受け取る方法

長いタイトルになってしまいましたが、ようするにJSON形式なら受け渡しが楽になりますよということです。
まず、JQueryからPHPにJSON形式のデータを渡す方法(www/index.php)

  1.     <meta charset="utf-8">  
  2.     <script src="lib/jquery/jquery-1.11.2.min.js" charset="utf-8"></script>  
  3.     <style media="screen">  
  4.         li {  
  5.             list-style: none;  
  6.         }  
  7.     </style>  
  8.     <title>Ajax Sample</title>  
  9.   
  10.   
  11. <h1>Ajax sample</h1>  
  12. <form action="index.php" method="post" enctype="multipart/form-data">  
  13. <!--    <img decoding="async" id="img" src="src/read_0001.png"> -->  
  14. <select name="data[Ajax][key]" id="AjaxKey">  
  15. <option value="10000">10000</option>  
  16. <option value="9999">9999</option>  
  17. <option value="9998">9998</option>  
  18. <option value="9997">9997</option>  
  19. <option value="9996">9996</option>  
  20. <option value="9995">9995</option>  
  21. <option value="9994">9994</option>  
  22. <option value="9993">9993</option>  
  23. <option value="9992">9992</option>  
  24. <option value="9991">9991</option>  
  25. </select>  
  26.     <button type="button" id="btn">送信</button>  
  27. </form>  
  28.   
  29.   
  30. <script type="text/javascript">  
  31.     // 各フィールドから値を取得してJSONデータを作成  
  32.     $(function () {  
  33.   
  34.         $("button#btn").click(function () {  
  35.   
  36.             var value = $("#AjaxKey").val();  
  37.   
  38.             var data = {  
  39.                 VALUE:value  
  40.             };  
  41.   
  42.             // 通信実行  
  43.             $.ajax({  
  44.                 type: "post",                // method = "POST"  
  45.                 url: "ajax_api.php",        // POST送信先のURL  
  46.                 data: JSON.stringify(data),  // JSONデータ本体  
  47.                 contentType: 'application/json'// リクエストの Content-Type  
  48.                 dataType: "json",           // レスポンスをJSONとしてパースする  
  49.                 success: function (json_data) {   // 200 OK時  
  50.                     console.log("success");  
  51.                     var str = "";  
  52.                     if (json_data.STATUS == 0) {  
  53.                         console.log("json.success");  
  54.                         str = str + json_data.STATUS + "\r\n";  
  55.                         str = str + json_data.ERROR + "\r\n";  
  56.                         if (json_data.RES != null) {  
  57.                             str = str + json_data.RES.id + "\r\n";  
  58.                             str = str + json_data.RES.name + "\r\n";  
  59.                             str = str + json_data.RES.tel + "\r\n";  
  60.                         }  
  61.                         alert(str);  
  62.                     } else {  
  63.                         console.log("json.error");  
  64.                         str = str + json_data.STATUS + "\r\n";  
  65.                         str = str + json_data.ERROR + "\r\n";  
  66.                         alert(str);  
  67.                     }  
  68.                     // 成功時処理  
  69.                     location.reload();  
  70.                 },  
  71.                 error: function () {         // HTTPエラー時  
  72.                     console.log("error");  
  73.                 },  
  74.                 complete: function () {      // 成功・失敗に関わらず通信が終了した際の処理  
  75.                 }  
  76.             });  
  77.         });  
  78.     });  
  79.   
  80. </script>  

JQueryからJSON形式のデータを受け取りPHPで連想配列にして他のURLにポストする方法(www/ajax_api.php)
ちなみに、ベーシック認証がない場合は、define(‘DEMO’, true);をdefine(‘DEMO’, false);へ

  1. <!--?php  
  2. // 登録API  
  3. define('SAMPLE_API''http://xxx.xxx.xxx.xxx/wwwapi/index.php');  
  4. // デモ環境  
  5. define('DEMO', true);  
  6. $json = file_get_contents("php://input");  
  7.   
  8. // 文字化けするかもしれないのでUTF-8に変換  
  9. $json = mb_convert_encoding($json'UTF8''ASCII,JIS,UTF-8,EUC-JP,SJIS-WIN');  
  10.   
  11. // オブジェクト毎にパース  
  12. // trueを付けると連想配列として分解して格納してくれます。  
  13. $obj = json_decode($json, true);  
  14.   
  15. // パースに失敗した時は処理終了  
  16. if ($obj === NULL) {  
  17.     $jsonResult['STATUS'] = 1;  
  18.     $jsonResult['ERROR'] = "JSON受信に失敗しました。";  
  19. else {  
  20.     $jsonResult['STATUS'] = 0;  
  21.     $jsonResult['ERROR'] = "";  
  22.     $res = json_decode(demoApi($obj['VALUE']),true);  
  23.     if (emptyempty($res)) {  
  24.         $jsonResult['STATUS'] = 1;  
  25.         $jsonResult['ERROR'] = "情報が取得できませんでした。";  
  26.     }  
  27.     $jsonResult['RES'] = $res;  
  28. }  
  29. echo json_encode($jsonResult);  
  30. /** 
  31.  * 会員情報取得API処理 
  32.  * @note 
  33.  */  
  34. function demoApi($memberId) {  
  35.   
  36.     //POSTデータ  
  37.     $data = array(  
  38.         "member_id"          =--> "{$memberId}"  
  39.     );  
  40.     $data = http_build_query($data"""&");  
  41.   
  42.     if (DEMO) {  
  43.         //header  
  44.         $header = array(  
  45.             'User-Agent: My User Agent 1.0',    //ユーザエージェントの指定  
  46.             'Authorization: Basic ' . base64_encode('account:password'),//ベーシック認証  
  47.             "Content-Type: application/x-www-form-urlencoded",  
  48.             "Content-Length: " . strlen($data)  
  49.         );  
  50.     } else {  
  51.         //header  
  52.         $header = array(  
  53.             "Content-Type: application/x-www-form-urlencoded",  
  54.             "Content-Length: " . strlen($data)  
  55.         );  
  56.     }  
  57.   
  58.     $context = array(  
  59.         "http" => array(  
  60.             "method"  => "POST",  
  61.             "header"  => implode("\r\n"$header),  
  62.             "content" => $data  
  63.         )  
  64.     );  
  65.     $res = file_get_contents(SAMPLE_API, false, stream_context_create($context));  
  66.     return $res;  
  67. }  
  68. ?>  

POSTデータを頂き、情報(連想配列のID指定にしていますが、ご利用の際には、DBから取得する方法へもバージョンアップできます。)
を取得JSON形式の返信を頂く方法(wwwapi/index.php)

  1. <!--?php  
  2. $memberArray = array(  
  3.     "10000" =--> array("id" => 10000,'name' => 'Name10000','tel' => "000100010001"),  
  4.     "9999" => array("id" => 9999,'name' => 'Name9999','tel' => "000900090009"),  
  5.     "9998" => array("id" => 9998,'name' => 'Name9998','tel' => "000900090008"),  
  6.     "9997" => array("id" => 9997,'name' => 'Name9997','tel' => "000900090007"),  
  7.     "9996" => array("id" => 9996,'name' => 'Name9996','tel' => "000900090006"),  
  8.     "9995" => array("id" => 9995,'name' => 'Name9995','tel' => "000900090005"),  
  9.     "9994" => array("id" => 9994,'name' => 'Name9994','tel' => "000900090004"),  
  10.     "9993" => array("id" => 9993,'name' => 'Name9993','tel' => "000900090003"),  
  11.     "9992" => array("id" => 9992,'name' => 'Name9992','tel' => "000900090002"),  
  12.     );  
  13.   
  14. $memberId = $_POST['member_id'];  
  15.   
  16. if(emptyempty($memberArray[$memberId])) {  
  17.     echo json_encode(array());  
  18. }  
  19. echo json_encode($memberArray[$memberId]);  
  20. ?>  

※jquery-1.11.2.min.jsは、特にふれていませんが、実行するには必要になります、ご注意ください。