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

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

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

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

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

Q&A

解決済

1回答

2959閲覧

Ajaxで取得したjsonをパースしてiPadのSafariのテキストボックスに表示したい

Batoh33789

総合スコア136

JSON

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

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

0グッド

0クリップ

投稿2017/05/19 06:50

編集2017/05/19 07:22

お世話になります。

やりたいことは、タイトル通りとなります。

何かご助言頂けましたら幸いです。
お手数おかけ致しますが、よろしくお願い致します。

環境は以下の通りです。
・開発環境
IDE Eclipse 4.5.1
Java 1.8
Tomcat v8.0
jsonライブラリ GSONを使用
・iPad
iOS 10.2.1
Safari 10.0

●前提
・PC(Chrome(58.0)、IE11)からは期待通りの動作をします。
・iPadからServletに接続して、jspにフォワードする部分は期待通りの動作をしますので、
iPadはネットワークに接続されています。
・Ajaxの中にSystem.out.println("aaa")を仕込んだ上で、iPadからブラウザのボタンをタップすると、
コンソールに文字が表示されますので、リクエストは飛んでいます。

●色々検索してやってみた内容
・検討違いかもしれませんが、HttpServletResponseのcontentTypeにCache-Control: no-cacheを
追加してみましたが、結果は変わりませんでした。
・下記のようにJavascriptで、Ajaxからデータをもらわず、直接連想配列を直接指定してみたところ、
各テキストボックスに数値が入ることは確認しました。

Javascript

1// Ajax未使用ですが、確認で一時的に使用したものなので関数名はご容赦願います。 2function testAjax(){ 3 var test = {width:100, height:200}; 4 $('input[name="width"]').val(test["width"]); 5 $('input[name="height"]').val(test["height"]); 6}

コードは以下の通りです。
●Servlet

Java

1@WebServlet("/Test2") 2public class TestServlet2 extends HttpServlet{ 3 4 @Override 5 protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 6 doPost(req, resp); 7 } 8 9 @Override 10 protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 11 final String jspName = "/jsp/Test2.jsp"; 12 final RequestDispatcher dispatcher = req.getRequestDispatcher(jspName); 13 dispatcher.forward(req, resp); 14 } 15}

●Ajax

Java

1@WebServlet("/TestA") 2public class TestAjax extends HttpServlet{ 3 @Override 4 protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 5 final TestBean test = new TestBean(100,200); 6 7 resp.setContentType("application/json; charset=utf-8;"); 8 PrintWriter out = resp.getWriter(); 9 Gson gson = new Gson(); 10 out.println(gson.toJson(test)); 11 } 12 @Override 13 protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 14 doPost(req, resp); 15 } 16}

●Bean

Java

1public class TestBean { 2 private int width; 3 private int height; 4 5 public TestBean(int w, int h){ 6 this.width = w; 7 this.height = h; 8 } 9 public int getWidth() { 10 return width; 11 } 12 public void setWidth(int width) { 13 this.width = width; 14 } 15 public int getHeight() { 16 return height; 17 } 18 public void setHeight(int height) { 19 this.height = height; 20 } 21}

●JSP

JSP

1<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 2<!DOCTYPE html> 3<html> 4<script src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"></script> 5<script src="${pageContext.request.contextPath}/js/Test2.js"></script><head> 6<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7<title>Insert title here</title> 8</head> 9<body> 10<input type="text" name="width"> 11<input type="text" name="height"> 12<input type="button" onclick="testAjax();"> 13</body> 14</html>

●Javascript

Javascript

1function testAjax(){ 2 $.ajax({ 3 url: '/TestProject/TestA?time=' + new Date().getTime(), 4 type:'GET', 5 dataType: 'text', 6 timeout:10000 7 }).done(function(result) { 8 setResult(result); 9 }).fail(function(result) { 10 }); 11} 12function setResult(json){ 13 var jsObject = JSON.parse(json); 14 $('input[name="width"]').val(jsObject["width"]); 15 $('input[name="height"]').val(jsObject["height"]); 16}

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

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

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

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

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

Lhankor_Mhy

2017/05/19 07:19

$('input[name="width"').val(jsObject["width"]); にtypoがありますのでご確認ください。
Batoh33789

2017/05/19 07:23

typoご指摘ありがとうございます。修正致しました。
guest

回答1

0

自己解決

Lhankor_Mhy様に指摘頂いたtypoを修正したところ期待通りの動作となりました。

Lhankor_Mhy様をBAとしたいのですが、回答欄に記載頂いておらず、BAに出来なかったため
自己解決とさせていただきます。

お騒がせして大変申し訳ございませんでした。

投稿2017/05/19 07:35

Batoh33789

総合スコア136

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問