こちらの記事にて、ajax通信に関連する処理を学習していた際に、分からない部分があった為、ご質問させて貰いました。
以下のコードはすべてリンクに掲載されていたものになります。
下記は、「practice_js.html」です
php
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>ajax_practice</title> 6</head> 7<body> 8 <h1>設定</h1> 9 <p> 10 年齢:<input type="text" id="age" value="24"><br> 11 職業:<input type="text" id="job" value="学生"><br> 12 <input type="button" id="execute" value="送信"><br> 13 </p> 14 <h1>結果</h1> 15 <p> 16 可否:<input type="text" id="result" value=""><br> 17 内容:<input type="text" id="detail" value=""> <br> 18 </p> 19 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 20 <script src="default.js"></script> 21</body> 22</html>
下記は、api.phpです。
php
1 2<?php 3 4// Content-TypeをJSONに指定する 5header('Content-Type: application/json'); 6 7// $_POST['age']、$_POST['job']をエラーを出さないように文字列として安全に展開する 8$age = (string)filter_input(INPUT_POST, 'age'); 9$job = (string)filter_input(INPUT_POST, 'job'); 10 11// 整合性チェック 12if ($age === '' || $job === '') { 13 $error = '年齢と職業を両方入力してください'; 14} else if (!ctype_digit($age)) { 15 $error = '年齢は正の整数で入力してください'; 16} else if (($age = (int)$age) > 100) { 17 $error = '生きすぎィ!'; 18} 19 20if (!isset($error)) { 21 // 正常時は 「200 OK」 で {"data":"24歳、学生です"} のように返す 22 $data = "{$age}歳、{$job}です"; 23 echo json_encode(compact('data')); 24} else { 25 // 失敗時は 「400 Bad Request」 で {"error":"..."} のように返す 26 http_response_code(400); 27 echo json_encode(compact('error')); 28}
下記は、「default.js」です
/* エラー文字列の生成 */ function errorHandler(args) { var error; // errorThrownはHTTP通信に成功したときだけ空文字列以外の値が定義される if (args[2]) { try { // JSONとしてパースが成功し、且つ {"error":"..."} という構造であったとき // (undefinedが代入されるのを防ぐためにtoStringメソッドを使用) error = JSON.parse(args[0].responseText).error.toString(); } catch (e) { // パースに失敗した、もしくは期待する構造でなかったとき // (PHP側にエラーがあったときにもデバッグしやすいようにレスポンスをテキストとして返す) error = 'parsererror(' + args[2] + '): ' + args[0].responseText; } } else { // 通信に失敗したとき error = args[1] + '(HTTP request failed)'; } return error; } // DOMを全て読み込んだあとに実行される $(function () { // 「#execute」をクリックしたとき $('#execute').click(function () { // Ajax通信を開始する $.ajax({ url: 'api.php', type: 'post', // getかpostを指定(デフォルトは前者) dataType: 'json', // 「json」を指定するとresponseがJSONとしてパースされたオブジェクトになる data: { // 送信データを指定(getの場合は自動的にurlの後ろにクエリとして付加される) age: $('#age').val(), job: $('#job').val(), }, }) // ・ステータスコードは正常で、dataTypeで定義したようにパース出来たとき .done(function (response) { $('#result').val('成功'); $('#detail').val(response.data); }) // ・サーバからステータスコード400以上が返ってきたとき // ・ステータスコードは正常だが、dataTypeで定義したようにパース出来なかったとき // ・通信に失敗したとき .fail(function () { // jqXHR, textStatus, errorThrown と書くのは長いので、argumentsでまとめて渡す // (PHPのfunc_get_args関数の返り値のようなもの) $('#result').val('失敗'); $('#detail').val(errorHandler(arguments)); }); }); });
お聞きしたい点は2点です。
ajax通信が成功した際に処理される、「done」メソッド内の「$('#detail').val(response.data);」ここの「data」は、「api.php」の「echo json_encode(compact('data'));」ここの配列「data」のことを指しているのでしょうか?
もう一点目は、失敗した場合のfailメソッド内の「 $('#detail').val(errorHandler(arguments));」ここの「arguments」です。errorHandler関数の中身から、配列かとは思うのですが、ajax通信行われた際に用意される特殊なものなのでしょうか?
どなたか、教えて頂けましたら幸いです。
よろしくお願いします。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/05/10 02:01
2019/05/10 02:06
2019/05/10 06:22
2019/05/10 06:25
2019/05/10 11:30
2019/05/10 11:54