質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

1回答

7994閲覧

JSON.parse()のエラー

Ezerk

総合スコア12

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

1クリップ

投稿2016/06/02 18:54

編集2016/06/02 18:59

AjaxにおいてWebサーバーからのJSONデータをJSON.parse()により変換しているコードですが以下のエラーがでており機能しません。
JSONデータが文字列として返されているのになぜJSON.parse()する必要があるのか、そしてこのエラーはなぜでるのでしょうか。

ご教授いただけたらと思います。

Uncaught SyntaxError: Unexpected token W in JSON at position 0

lang

1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8" /> 5 <title>Ajax Level2 practice</title> 6</head> 7<body> 8 9 <script type="text/javascript"> 10 11 function requestSend(){ 12 var request = new XMLHttpRequest(); 13 request.onload = function(){ 14 if(request.status == 200){ 15 var obj = JSON.parse(request.response); 16 document.getElementById("msg1").textContent = "User Name: " + obj.name; 17 document.getElementById("msg2").textContent = "Password: " + obj.password; 18 } 19 }; 20 request.open("POST", "http://192.168.33.10:5000/serverSide.php", true); 21 request.responseType = "text"; 22 var formData = new FormData(document.getElementById("frm")); 23 request.send(formData); 24 } 25 26 27 document.addEventListener("DOMContentLoaded", function(){ 28 document.getElementById("btn").addEventListener("click", requestSend, false); 29 }, false); 30 31 </script> 32 33 <h3 id ="h3">input page</h3> 34 <p>Please input user name and password</p> 35 <p id ="msg1">----</p> 36 <p id ="msg2">----</p> 37 <form id="frm"> 38 <p><input type="text" id="name" name="name" /></p> 39 <p><input type="password" id="pass" name="password" /></p> 40 </form> 41 <p><button id="btn">Load</button></p> 42 43</body> 44</html> 45

サーバーサイド

lang

1<?php 2 3 $nm = $_POST["name"]; 4 $ps = $_POST["password"]; 5 print "{\"name\":\"" . $nm . "\",\"password\":\"" . $ps . "\"}"; 6 7 ?> 8

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

JSONデータが文字列として返されているのになぜJSON.parse()する必要があるのか、

プログラム上で、objectとして扱うためですね。文字列のままではただの文字列でしかないです。
JSON.parse()の下の処理で

Javascript

1document.getElementById("msg1").textContent = "User Name: " + obj.name; 2document.getElementById("msg2").textContent = "Password: " + obj.password;

とあります。このobj.nameobj.passwordのようにデータを扱うために「JSON形式の文字列」を「Javascriptのobject」に変換しているのがJSON.parse()ですね。


そしてこのエラーはなぜでるのでしょうか。

request.responseの内容をconsole.log()を使って確認できますか?データ内容を確認すると解決できるかもしれません。

投稿2016/06/02 23:17

takyafumin

総合スコア2335

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Ezerk

2016/06/03 22:30

ご回答ありがとうございます。 JavaScriptのobject変換のparseなのですね。 エラーは実行環境を再起動したところ正常に作動しました。 原因は不明です。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問