0

APIサーバーへの通信の為にクライアント側のプログラムをテストで実装しています。
しかしながら、アンケートの内容をAPIサーバー側に送信が出来ずに、結果ページ
も出ません。

とらえず、エラー内容をググってみても、同じようなエラーはありますが、内容が少し違うので
初心者としては、まったくわかりませんでした。もう少し学習をした方が良かったでしょうか?

あと、コンソール上でソースコードを1行ずつ実行していても、その時にはエラーがありません
でした。'var_dump('foo');'なども試しましたがバグは発見できません。

コンソールでのエラーは Uncaught SyntaxError: Unexpected token < in JSON
で、その後 at position 0 at JSON.parse (<anonymous>)
at XMLHttpRequest.xmlhttp.onreadystatechange (awstest.php:181)
という内容になります。

ソースコード:175行目~192行目まで

function postForm(form) {
  // xmlhttp = new XMLHttpRequest();
  var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      var response = JSON.parse(xmlhttp.responseText) ;
      console.log(response);
      showResult(response) ;
    }
  }

var formelement = document.querySelector("#form1");
  var form_data = new FormData(formelement);
  xmlhttp.open('POST',analizepage, true);
  xmlhttp.send(form_data);

  return false;
}

エラーの出た行は181行目で、var response = JSON.parse(xmlhttp.responseText) ;です。

何か解決策や手がかりらしいものがあれば、ご教授頂きたいと思います。

2017/4/20 23:10 追記:

xmlhttp.responseTextの中身は、このような連想配列のarrayでした。
ただ、警告が出ていたので、APIサーバー側のanalyzepageを検証してみます。

<br />
<b>Warning</b>:  PDOStatement::execute(): SQLSTATE[HY093]: Invalid parameter number: parameter was not defined in <b>/var/www/html/dist/hqcck/analyze.php</b> on line <b>1174</b><br />
{"result":{"nutrients":[{"name":"\u30ab\u30eb\u30b7\u30a6\u30e0","value":"6800"},{"name":"\u30de\u30b0\u30cd\u30b7\u30a6\u30e0","value":"6400"},{"name":"\u30d3\u30bf\u30df\u30f3B3","value":"6200"},{"name":"\u30d3\u30bf\u30df\u30f3B1","value":"5800"},{"name":"\u8449\u9178","value":"4000"},{"name":"\u30d3\u30bf\u30df\u30f3B5","value":"4000"}],"nutrient_sufficiency_number":{"name":"\u25cf\u25cf\u25cf \u6804\u990a\u5145\u8db3\u5ea6 \u25cf\u25cf\u25cf","value":"82.2"},"nutrient_comment":{"name":"\u25cf\u25cf\u25cf \u4e0d\u8db3\u6804\u990a\u7d20\u30b3\u30e1\u30f3\u30c8 \u25cf\u25cf\u25cf","value":"\u3053\u306e\u6804\u990a\u7d20\u306f\u3001\u3042\u306a\u305f\u306e\u8eab\u4f53\u3068\u5fc3\u304c\u5fc5\u8981\u3068\u3057\u3066\u3044\u308b\u4f53\u5185\u9175\u7d20\u3092\u88dc\u5b8c\u3059\u308b\u30d3\u30bf\u30df\u30f3\u30fb\u30df\u30cd\u30e9\u30eb\u3067\u3059\u3002\u3053\u308c\u3089\u306e\u6804\u990a\u7d20\u306e\u4e3b\u306a\u50cd\u304d\uff08\u751f\u7406\u4f5c\u7528\uff09\u304c\u3042\u306a\u305f\u306e\u4f53\u5185\u3067\u4f4e\u4e0b\u3059\u308b\u3053\u3068\u306b\u3088\u3063\u3066\u3001\u7cbe\u795e\u795e\u7d4c\u7cfb\u306e\u8abf\u548c\u3092\u3068\u308b\u305f\u3081\u306b\u5fc5\u8981\u306a\u30a8\u30cd\u30eb\u30ae\u30fc\u306e\u4f4e\u4e0b\u3084\u30db\u30eb\u30e2\u30f3\u30d0\u30e9\u30f3\u30b9\u306e\u4e0d\u5168\u72b6\u614b\u3092\u751f\u3058\u3055\u305b\u3066\u3044\u308b\u4e8b\u304c\u3046\u304b\u304c\u3048\u307e\u3059\u3002\u3053\u306e\u4e8b\u306b\u3088\u308a\u3001\u4fbf\u79d8\u3084\u98df\u6b32\u4e0d\u632f\u3001\u4e0b\u75e2\u3001\u51b7\u3048\u75c7\u3001\u52d5\u60b8\u606f\u5207\u308c\u7b49\u3001\u7a2e\u3005\u306e\u75c7\u72b6\u304c \u91cd\u306a\u3063\u305f\u4e0d\u5b9a\u6101\u8a34\u3068\u3057\u3066\u8868\u9762\u5316\u3057\u3066\u304f\u308b\u4e8b\u304c\u8003\u3048\u3089\u308c\u307e\u3059\u3002"},"sym_trend_1":{"name":"\u25cf\u25cf\u25cf \u75be\u75c5\u50be\u5411 \u25cf\u25cf\u25cf  \u81ea\u5f8b\u795e\u7d4c\u30a4\u30f3\u30d0\u30e9\u30f3\u30b9","value":"51.7"},"exhaustion_number":{"name":"\u25cf\u25cf\u25cf \u30b9\u30c8\u30ec\u30b9\u30fb\u75b2\u52b4\u5ea6 \u25cf\u25cf\u25cf","value":"18.2"},"nutrient_activation_number":{"name":"\u25cf\u25cf\u25cf \u6804\u990a\u6d3b\u6027\u5ea6 \u25cf\u25cf\u25cf","value":"29"},"BMI":{"name":"\u25cf\u25cf\u25cf BMI \u25cf\u25cf\u25cf","value":"21"},"power_number":{"name":"\u25cf\u25cf\u25cf \u4f53\u5185\u6d3b\u529b\u6307\u6570 \u25cf\u25cf\u25cf","value":"68"},"depression_value":{"name":"\u25cf\u25cf\u25cf \u3046\u3064\u4fc2\u6570 \u25cf\u25cf\u25cf","value":"8"},"aheadsick_type":{"name":"\u25cf\u25cf\u25cf \u672a\u75c5\u30bf\u30a4\u30d7 \u25cf\u25cf\u25cf","value":"4"},"mibyoudo":{"name":"\u25cf\u25cf\u25cf \u672a\u75c5\u5ea6 \u25cf\u25cf\u25cf","value":"4"},"power_area":{"name":"\u25cf\u25cf\u25cf \u30ab\u30e9\u30c0\u3068\u30b3\u30b3\u30ed\u306e\u30d0\u30e9\u30f3\u30b9\u30a8\u30ea\u30a2 \u25cf\u25cf\u25cf","value":"A"},"msg_bmi":{"name":"\u25cf\u25cf\u25cf BMI\u72b6\u614b \u25cf\u25cf\u25cf","value":"BMI\u6307\u6570\u304c18.5\u4ee5\u4e0a\u304b\u308925\u672a\u6e80\u306f\u300c\u666e\u901a\u4f53\u91cd\u300d\u306e\u7bc4\u56f2\u3067\u3001\u6307\u657022\u304c\u6a19\u6e96\u5024\u3068\u3055\u308c\u3066\u3044\u307e\u3059\u3002"},"tokuchou":{"name":"\u25cf\u25cf\u25cf \u672a\u75c5\u30bf\u30a4\u30d7\u7279\u5fb4 \u25cf\u25cf\u25cf","value":"\u300c\u6804\u990a\u5145\u8db3\u5ea6\u300d\u306f\u6a19\u6e96\u7bc4\u56f2\u5024\u3092\u793a\u3057\u3066\u304a\u308a\u3001\u4f53\u5185\u306e\u6804\u990a\u7d20\u306f\u5145\u8db3\u3055\u308c\u3066\u3044\u308b\u72b6\u614b\u304c\u8003\u3048\u3089\u308c\u307e\u3059\u3002\u8eab\u4f53\u304c\u611f\u53d7\u3059\u308b\u30b9\u30c8\u30ec\u30b9\u306b\u5bfe\u3057\u3001\u6442\u98df\u3055\u308c\u305f\u6804\u990a\u7d20\u304c\u6709\u52b9\u306b\u6d3b\u7528\u3055\u308c\u3066\u3044\u308b\u304b\u3001\u307e\u305f\u3001\u4ee3\u8b1d\u306e\u6d3b\u6027\u5316\u306b\u3069\u306e\u7a0b\u5ea6\u95a2\u4e0e\u3057\u3066\u3044\u308b\u304b\u3092\u6570\u5024\u5316\u3057\u3066\u8868\u3057\u305f\u3082\u306e\u304c\u300c\u6804\u990a\u6d3b\u6027\u5ea6\u300d\u3067\u3059\u3002\u3042\u306a\u305f\u306e\u5834\u5408\u306f\u3001\u300c\u6804\u990a\u6d3b\u6027\u5ea6\u300d\u304c\u9069\u6b63\u6a19\u6e96\u7bc4\u56f2\u5024\u3088\u308a\u4f4e\u3044\u4e8b\u304b\u3089\u3001\u6442\u98df\u3055\u308c\u305f\u6804\u990a\u7d20\u304c\u4f53\u5185\u3067\u6709\u52b9\u6d3b\u7528\u3055\u308c\u3066\u3044\u306a\u3044\u72b6\u614b\u304c\u3046\u304b\u304c\u3048\u307e\u3059\u3002"},"cd_risk":{"name":"\u25cf\u25cf\u25cf \u8a8d\u77e5\u6a5f\u80fd\u30ea\u30b9\u30af\u5ea6 \u25cf\u25cf\u25cf","value":"42.3"},"cd_area":{"name":"\u25cf\u25cf\u25cf \u8a8d\u77e5\u6a5f\u80fd\u30ea\u30b9\u30af\u30a8\u30ea\u30a2 \u25cf\u25cf\u25cf","value":"B1"}}}
8
  • JSONの内容(xmlhttp.responseTextの内容)は提示できますか?
    – BLUEPIXY
    Commented 2017年4月20日 0:25
  • ありがとうございます。後ほど提示させて頂きます。 Commented 2017年4月20日 2:51
  • BLUEPIXY様 xmlhttp.responseTextの内容は追記して提示しています。analyzepageに警告が出ていたので検証します。ご教授ありがとうございました。 Commented 2017年4月20日 14:14
  • JSON自体は問題無いようです。JSON.parseで表題のようなエラーは起こらず再現できませんでした。
    – BLUEPIXY
    Commented 2017年4月20日 15:22
  • もしかしたら環境依存文字などの文字コードの変換でのエラーかも。
    – BLUEPIXY
    Commented 2017年4月20日 15:33

3 件の回答 3

1

Uncaught SyntaxError: Unexpected token < in JSON

JSONではありえない位置に < という文字が入っているというエラーで、要するに JSON.parse() に渡した文字列が正しいJSONではありません。< ということから察するに、APIのレスポンスがHTMLになってしまっているのではないでしょうか?

例えば JSON.parse() の前で console.log(xmlhttp.responseText) として、レスポンスの中身をコンソールに出力するとわかりやすいかと思います。

2
  • ありがとうございます。console.log();はやってみましたが、場所が悪かったようですね。前ですか。やってみます。 Commented 2017年4月20日 2:52
  • unarist様 console.log(xmlhttp.responseText)にて中身を見ましたが、analyzepageに警告が出ていました。そっそく検証してみます。助かりました。アドバイスありがとうございました。 Commented 2017年4月20日 14:16
1

2017/4/20 23:10 追記:

xmlhttp.responseTextの中身は、このような連想配列のarrayでした。
ただ、警告が出ていたので、APIサーバー側のanalyzepageを検証してみます。

<br />
<b>Warning</b>:  PDOStatement::execute(): SQLSTATE[HY093]: Invalid parameter number: parameter was not defined in <b>/var/www/html/dist/hqcck/analyze.php</b> on line <b>1174</b><br />
{"result":{"nutrients":[{"name":"\u30ab\u30eb\u30b7\u30a6\u30e0","value":"6800"},{"name":"\u30de\u30b0\u30cd\u30b7\u30a6\u30e0","value":"6400"},{"name":"\u30d3\u30bf\u30df\u30f3B3","value":"6200"},{"name":"\u30d3\u30bf\u30df\u30f3B1","value":"5800"},{"name":"\u8449\u9178","value":"4000"},{"name":"\u30d3\u30bf\u30df\u30f3B5","value":"4000"}],"nutrient_sufficiency_number":{"name":"\u25cf\u25cf\u25cf \u6804\u990a\u5145\u8db3\u5ea6 \u25cf\u25cf\u25cf","value":"82.2"},"nutrient_comment":{"name":"\u25cf\u25cf\u25cf \u4e0d\u8db3\u6804\u990a\u7d20\u30b3\u30e1\u30f3\u30c8 \u25cf\u25cf\u25cf","value":"\u3053\u306e\u6804\u990a\u7d20\u306f\u3001\u3042\u306a\u305f\u306e\u8eab\u4f53\u3068\u5fc3\u304c\u5fc5\u8981\u3068\u3057\u3066\u3044\u308b\u4f53\u5185\u9175\u7d20\u3092\u88dc\u5b8c\u3059\u308b\u30d3\u30bf\u30df\u30f3\u30fb\u30df\u30cd\u30e9\u30eb\u3067\u3059\u3002\u3053\u308c\u3089\u306e\u6804\u990a\u7d20\u306e\u4e3b\u306a\u50cd\u304d\uff08\u751f\u7406\u4f5c\u7528\uff09\u304c\u3042\u306a\u305f\u306e\u4f53\u5185\u3067\u4f4e\u4e0b\u3059\u308b\u3053\u3068\u306b\u3088\u3063\u3066\u3001\u7cbe\u795e\u795e\u7d4c\u7cfb\u306e\u8abf\u548c\u3092\u3068\u308b\u305f\u3081\u306b\u5fc5\u8981\u306a\u30a8\u30cd\u30eb\u30ae\u30fc\u306e\u4f4e\u4e0b\u3084\u30db\u30eb\u30e2\u30f3\u30d0\u30e9\u30f3\u30b9\u306e\u4e0d\u5168\u72b6\u614b\u3092\u751f\u3058\u3055\u305b\u3066\u3044\u308b\u4e8b\u304c\u3046\u304b\u304c\u3048\u307e\u3059\u3002\u3053\u306e\u4e8b\u306b\u3088\u308a\u3001\u4fbf\u79d8\u3084\u98df\u6b32\u4e0d\u632f\u3001\u4e0b\u75e2\u3001\u51b7\u3048\u75c7\u3001\u52d5\u60b8\u606f\u5207\u308c\u7b49\u3001\u7a2e\u3005\u306e\u75c7\u72b6\u304c \u91cd\u306a\u3063\u305f\u4e0d\u5b9a\u6101\u8a34\u3068\u3057\u3066\u8868\u9762\u5316\u3057\u3066\u304f\u308b\u4e8b\u304c\u8003\u3048\u3089\u308c\u307e\u3059\u3002"},"sym_trend_1":{"name":"\u25cf\u25cf\u25cf \u75be\u75c5\u50be\u5411 \u25cf\u25cf\u25cf  \u81ea\u5f8b\u795e\u7d4c\u30a4\u30f3\u30d0\u30e9\u30f3\u30b9","value":"51.7"},"exhaustion_number":{"name":"\u25cf\u25cf\u25cf \u30b9\u30c8\u30ec\u30b9\u30fb\u75b2\u52b4\u5ea6 \u25cf\u25cf\u25cf","value":"18.2"},"nutrient_activation_number":{"name":"\u25cf\u25cf\u25cf \u6804\u990a\u6d3b\u6027\u5ea6 \u25cf\u25cf\u25cf","value":"29"},"BMI":{"name":"\u25cf\u25cf\u25cf BMI \u25cf\u25cf\u25cf","value":"21"},"power_number":{"name":"\u25cf\u25cf\u25cf \u4f53\u5185\u6d3b\u529b\u6307\u6570 \u25cf\u25cf\u25cf","value":"68"},"depression_value":{"name":"\u25cf\u25cf\u25cf \u3046\u3064\u4fc2\u6570 \u25cf\u25cf\u25cf","value":"8"},"aheadsick_type":{"name":"\u25cf\u25cf\u25cf \u672a\u75c5\u30bf\u30a4\u30d7 \u25cf\u25cf\u25cf","value":"4"},"mibyoudo":{"name":"\u25cf\u25cf\u25cf \u672a\u75c5\u5ea6 \u25cf\u25cf\u25cf","value":"4"},"power_area":{"name":"\u25cf\u25cf\u25cf \u30ab\u30e9\u30c0\u3068\u30b3\u30b3\u30ed\u306e\u30d0\u30e9\u30f3\u30b9\u30a8\u30ea\u30a2 \u25cf\u25cf\u25cf","value":"A"},"msg_bmi":{"name":"\u25cf\u25cf\u25cf BMI\u72b6\u614b \u25cf\u25cf\u25cf","value":"BMI\u6307\u6570\u304c18.5\u4ee5\u4e0a\u304b\u308925\u672a\u6e80\u306f\u300c\u666e\u901a\u4f53\u91cd\u300d\u306e\u7bc4\u56f2\u3067\u3001\u6307\u657022\u304c\u6a19\u6e96\u5024\u3068\u3055\u308c\u3066\u3044\u307e\u3059\u3002"},"tokuchou":{"name":"\u25cf\u25cf\u25cf \u672a\u75c5\u30bf\u30a4\u30d7\u7279\u5fb4 \u25cf\u25cf\u25cf","value":"\u300c\u6804\u990a\u5145\u8db3\u5ea6\u300d\u306f\u6a19\u6e96\u7bc4\u56f2\u5024\u3092\u793a\u3057\u3066\u304a\u308a\u3001\u4f53\u5185\u306e\u6804\u990a\u7d20\u306f\u5145\u8db3\u3055\u308c\u3066\u3044\u308b\u72b6\u614b\u304c\u8003\u3048\u3089\u308c\u307e\u3059\u3002\u8eab\u4f53\u304c\u611f\u53d7\u3059\u308b\u30b9\u30c8\u30ec\u30b9\u306b\u5bfe\u3057\u3001\u6442\u98df\u3055\u308c\u305f\u6804\u990a\u7d20\u304c\u6709\u52b9\u306b\u6d3b\u7528\u3055\u308c\u3066\u3044\u308b\u304b\u3001\u307e\u305f\u3001\u4ee3\u8b1d\u306e\u6d3b\u6027\u5316\u306b\u3069\u306e\u7a0b\u5ea6\u95a2\u4e0e\u3057\u3066\u3044\u308b\u304b\u3092\u6570\u5024\u5316\u3057\u3066\u8868\u3057\u305f\u3082\u306e\u304c\u300c\u6804\u990a\u6d3b\u6027\u5ea6\u300d\u3067\u3059\u3002\u3042\u306a\u305f\u306e\u5834\u5408\u306f\u3001\u300c\u6804\u990a\u6d3b\u6027\u5ea6\u300d\u304c\u9069\u6b63\u6a19\u6e96\u7bc4\u56f2\u5024\u3088\u308a\u4f4e\u3044\u4e8b\u304b\u3089\u3001\u6442\u98df\u3055\u308c\u305f\u6804\u990a\u7d20\u304c\u4f53\u5185\u3067\u6709\u52b9\u6d3b\u7528\u3055\u308c\u3066\u3044\u306a\u3044\u72b6\u614b\u304c\u3046\u304b\u304c\u3048\u307e\u3059\u3002"},"cd_risk":{"name":"\u25cf\u25cf\u25cf \u8a8d\u77e5\u6a5f\u80fd\u30ea\u30b9\u30af\u5ea6 \u25cf\u25cf\u25cf","value":"42.3"},"cd_area":{"name":"\u25cf\u25cf\u25cf \u8a8d\u77e5\u6a5f\u80fd\u30ea\u30b9\u30af\u30a8\u30ea\u30a2 \u25cf\u25cf\u25cf","value":"B1"}}}

こちらが出力されたJSONならば、JSON出力処理に関連するコードに問題があるように思われます。
下記コードを実行すれば、エラーを再現可能です。

JSON.parse('<br />');
// Uncaught SyntaxError: Unexpected token < in JSON at position 0
//    at JSON.parse (<anonymous>)
//    at <anonymous>:1:6

問題は Warning が出力されてJSONが破壊される事にあるので、該当コード部分に修正が必要と思われます。

1
  • think49様 なるほど、まだ解決はしていませんので、JSONの出力について検証していきたいと考えます。アドバイスありがとうございました。 Commented 2017年4月21日 17:55
1

もう解決されていると思いますが、php実行時のWarningが出力されている為jsonデータと混在しjsonのparseエラーがでています。

phpへ渡すパラメータに不備がないか確認する(formのパラメータ名前誤りなど)。
渡すパラメータに不備がありphpの「Warning」が出力されているかも。

渡すパラメータに不備が無いなら、phpの「Warning」が出力されない様に /var/www/html/dist/hqcck/analyze.php の修正を依頼を出すか、以下の様にsplitでWarningとjsonデータを分離するとよいかと。

str_array = in_string.split('<br />');
var response = JSON.parse(str_array[str_array.length-1]);
1
  • yyz様、miy様 アドバイスありがとうございます。「php実行時のWarningが出力されている為jsonデータと混在しjsonのparseエラーがでています。」その通りで、検証してエラー原因はわかりました。PHPとjsonをもっと学習しなければならないと実感しています。また何かありましたらよろしくお願いします。 Commented 2017年4月29日 15:22

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。