JSONデータをフォームにセットする方法
- JSONデータをフォームにセットする方法を教えてください
- 「jQuery.val」を使用してJSONデータをフォームにセットしようとしていますが、問題が発生しています。解決策を教えてください
- JSONデータは文字列の形式で表されるため、フォームにセットする際には注意が必要です。具体的には、配列からJSONデータに変換した際に一部の文字が削除されることがあります。解決策としては、配列をJSONデータに変換する前に適切な処理を行うことです。詳細なコード例を提供します。
- ベストアンサー
JSONデータをフォームにセットしたい
JSONデータを「jQuery.val」でフォームにセットしたいのですが、うまくいきません。どうしたら良いでしょうか？ 具体的には、[",]が削除された状態でセットされます。元は配列ですが、JSONデータへ変換したので、フォームへセット出来ると思っていたのですが…。 JSONは、「ある形式に沿った文字列」という認識でいたのですが、違うのでしょうか？ ■コード $jsondata= json_encode($originalarray) <script type="text/javascript"> var result = <?php echo($jsondata) ?>; $("input#jsondata").val(result); </script> ■変数 ・$originalarray Array ( [0] => ./im/1a.j [1] => ./im/2.j [2] => ./im/9_1.j ) ・jsondata [".\/im\/1a.j",".\/im\/2.j",".\/im\/9_1.jp"] ・フォームにセットされる値 ./im/1a.j./im/2.j./im/9_1.jp →ここに「jsondata」をセットさせたい
- re999
- お礼率61% (476/777)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
> JSONは、「ある形式に沿った文字列」という認識でいた で、 [".\/im\/1a.j",".\/im\/2.j",".\/im\/9_1.jp"] では、「はいれつ」としかおもってもらえない。 jQuery なくとも だいにゅうくらいなら かんたん。 Array.forEach とか Array.some とか Array.indexOf とかが、ひつようです。 <!DOCTYPE html> <title></title> <meta charset="UTF-8"> <h1>Test</h1> <form> <p> <input type="text" name="@hoge" value="0"> <input type="text" name="@hoge" value="0"> <input type="text" name="@hoge" value="0"> <p> <select name="@fuga" multiple> <option value="aaa" selected>aaa <option value="bbb">BBB <option value="ccc">CCC <option value="ddd">DDD </select> <select name="@fuga"> <option selected>aaa <option value="bbb">BBB <option value="ccc">CCC <option value="ddd">DDD </select> <select name="@fuga"> <option selected>aaa <option value="bbb">BBB <option value="ccc">CCC <option value="ddd">DDD </select> <select name="@fuga"> <option selected>aaa <option value="bbb">BBB <option value="ccc">CCC <option value="ddd">DDD </select> <p> <input type="checkbox" name="@piyo" value="aaa">AAA <input type="checkbox" name="@piyo" value="bbb">BBB <input type="checkbox" name="@piyo" value="ccc">CCC <p> <input type="radio" name="@babu" value="aaa">AAA <input type="radio" name="@babu" value="bbb">BBB <input type="radio" name="@babu" value="ccc">CCC </form> <script> (function () { function Controller (form) { this.form = form; } function trim (str) { return str.replace (/^\s+|\s+$/g, ''); } function Ary (nodeList) { return ('tagName' in nodeList) ? [nodeList]: Array.prototype.slice.call (nodeList, 0); } function getOptionText (option) { return trim (option.hasAttribute ('value') ? option.value: option.text); } function setOptions (opt) { var v = trim (opt.hasAttribute ('value') ? opt.value: opt.text); var r = (this instanceof Array) ? (-1 < this.indexOf (v)) : (String (this) === v); return opt.selected = r; } function setValue (e, i) { var isArray = (this instanceof Array); var value = isArray ? this[i]: this; var optval; switch (e.type) { case 'select-one' : Ary (e.options).some (setOptions, value); break//途中で中止なので some case 'select-multiple' : Ary (e.options).forEach (setOptions, value); break; case 'radio' : case 'checkbox' : optval = getOptionText (e); e.checked = (isArray) ? (-1 < this.indexOf (optval)) : (optval === String (this)); break; default : e.value = value; } } function parseSetArguments (arg) { var es = this.form.elements; if (arg instanceof Array) { Ary (es[arg[0]]).forEach (setValue, arg[1]); } else if ('object' === typeof arg) { for (var i in arg) { if (arg.hasOwnProperty (i)) { Ary (es[i]).forEach (setValue, arg[i]); } } } else { // throw new Error (); } } function setControlsValue (parm/*[name, value], [],..*/) { if (1 > arguments.length) throw new Error ('引数がない'); Ary (arguments).forEach (parseSetArguments, this); } function create (form) { if (form && 'FORM' === form.tagName) return new Controller (form); return null; } Controller.prototype.setControlsValue = setControlsValue; // Controller.create = create; this.FormController = Controller; })(); //_______________________ var f = FormController.create (document.querySelector ('form')); f.setControlsValue ({ "@hoge" : [123, 456, 789], "@fuga" : [["ddd","aaa"], "bbb", "ccc", "bbb"], "@piyo" : ["aaa", "ccc"], "@babu" : "aaa" }); </script>
関連するQ&A
- JSON変換データをjavascriptへ渡したい
json_encode()関数で、JSON形式の文字列に変換した配列データをjavascriptへ渡したいのですが、 いつのまにか、ただんの文字列になってしまいます。なんででしょうか？ ■コード $jsondata= json_encode($originalarray) <script type="text/javascript"> var result = <?php echo($jsondata) ?>; alert(result); </script> ■変数 ・$originalarray Array ( [0] => ./im/1a.j [1] => ./im/2.j [2] => ./im/9_1.j ) ・jsondata [".\/im\/1a.j",".\/im\/2.j",".\/im\/9_1.jp"] ・result ./im/1a.j./im/2.j./im/9_1.jp
- ベストアンサー
- PHP
- フォームからjQuery,jQuery.jsonを使ってJSONを作っ
フォームからjQuery,jQuery.jsonを使ってJSONを作ってPHPで表示したい。 こんばんは。2、3日ずっと悩んでて解決しないので助けてください。 jQuery,jQuery.jsonを使ってJSONを作成しています。 クリックイベントに var form = $("#sform"); var json = $(form.serializeArray()); var strJson = $.toJSON(json); という形をとって $.ajax({ url : "request.php", type : "post", data : strJson, success: function(request){ $('#result').html(request); } }); で送っています。 ただPHP側で var_dump($_POST); を行ってもArray ( ) と表示されます。 firebugで見たところpostに入っているデータは以下の通りです。 {"0":{"name":"date","value":"2010/09/15"},"1":{"name":"type","value":"new"},"2":{"name":"bin[]","value":"2"},"3":{"name":"bin[]","value":"3"},"length":4} var_dumpで表示できないのはなぜでしょうか？ 上記で変数json のまま送るとオブジェクトとして送れてvar_dump でも表示できます。 ただ今はjson の勉強をしているので、できればなぜこうなっているのかを理解したいです。 基本的なところで勉強不足かもしれませんが、何かアドバイスなど頂けると嬉しいです。 よろしくお願いします。
- ベストアンサー
- JavaScript
- jQuery $.ajax JSON形式のPOST
jQuery $.ajax JSON形式のPOSTでフォーム内容を送信し、送信先のPHPでメール送信させるプログラムをかいているのですが、どうしても$.ajaxのerrorが呼び出される状況です。errorが呼び出されますが、PHPの方のメール送信はできております。 PHP側の出力がうまくいっていないのではないかと思いますが、原因がわかりません。どなたかご教授いただけないでしょうか？宜しくお願いします。 ---js--- $("#send").click(function(){ var NAME = $('#name').val(); var EMAIL = $('#email').val(); var TITLE = $('#titlel').val(); var COMMENT = $('#comment').val(); $.ajax({ url : "sendmail.php", dataType : "json", data : {name:NAME, email:EMAIL, title:TITLE, comment:COMMENT}, type : "post", success : function(data){ if(data != ''){ alert(data.result); } }, error : function(){ alert("通信に失敗しました。"); } }); }); ---sendmail.php--- if($_SERVER["REQUEST_METHOD"] != "POST"){ header("HTTP/1.0 404 Not Found"); return; }else{ //メール送信処理 （省略） $message = "送信完了メッセージ"; $result = array('result' => $message); echo json_encode($result); }
- ベストアンサー
- JavaScript
- php5.16でjsonを使うには？
http://www.dezinerfolio.com/dfgallery-2/free-flash-gallery こちらのFlashギャラリーを使用したくて苦戦しています。 サイトではphp5+と説明されているのですが、json関数を使用できないとうまくデータのやり取りができないようです。 なんとかphp5.16の環境でjsonを使えるように試しているのですが、 http://www123.ddo.jp/extwiki/?2.0%2Fjson_encode%E9%96%A2%E6%95%B0 という、json encodeを試してみてもだめでした。 これはphp4.xでjsonを使用する為のものみたいです。 php5.16でjson encodeを使用できるようなうまい方法はないでしょうか？ よろしくお願い致します。
- 締切済み
- PHP
- jQueryで配列JSONの読み込み方法
phpからの返り値data（json形式）を表示したいのですがうまくいきません。 コンソール上でjsonを取得できているようなのですが、値を表示しようとするとundifinedと表示されてしまいます。 どのように書き換えれば動作するようになるのでしょうか？ よろしくおねがいします！ -------------------------------------------------------- ■ receive.js ■ -------------------------------------------------------- $.ajax({ type: "POST", url: "receive.php", data: { "id": 3 }, success: function(data){ console.log(data); alert(data.time); //ここで「undifined」のエラーが出ます！！ $("#go").after(data.id); //ここは何も表示されません。 $("#str").html('準備完了'); }, error: function(data){ $("#str").html('準備未完了'); }, }); -------------------------------------------------------- ■ receive.php ■ -------------------------------------------------------- <?php require 'dbconnect.php';//dbconnectを呼び出し $data = array(); $id = $_POST['id']; $sql = " SELECT * FROM sample_table WHERE id = " . $id; $result = mysqli_query($connect,$sql) or die("クエリの送信に失敗しました。<br />SQL:".$sql); while ($row = mysqli_fetch_array($result)) { $data[] = $row; } mysqli_close($connect) or die("MySQL切断に失敗しました。"); // MySQLへの接続を閉じる header('Content-Type: application/json; charset=utf-8'); echo json_encode($data); ?> -------------------------------------------------------- ■ index.html ■ -------------------------------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script> <title>PHP * jQuery * ajax * MySQL</title> <script type="text/javascript" src="receive.js"></script> <script type="text/javascript" src="post.js"></script> </head> <body> <div class="ltd-form"> <form id="inquiry-form" method="get"> <fieldset> ・ ・ ・ </fieldset> <div id="go"></div> </form> </div> <div id="str"></div> </body> </html> -------------------------------------------------------- ■ 実行後のChromeのコンソール ■ -------------------------------------------------------- 0: Object 0: "3" 1: "1423789247" 2: "96" 3: "963" data1: "96" data2: "963" id: "3" time: "1423789247" --------------------------------------
- ベストアンサー
- JavaScript
- ＪＳＯＮ の出力先ディレクトリの指定方法
cakePHPの初心者です。 以下のようにPHPからＪＳＯＮ形式で、データファイルを出力したいと考えております。 $json = new Services_JSON; $encode = $json->encode($hoge); echo $encode; ですが、出力先ディレクトリの指定の仕方が分かりません。 ご存知の方、恐れ入りますが方法を教えて頂けますでしょうか？
- ベストアンサー
- PHP
- HTMLをPHPでJSONにして返すには
jqueryでurlをPHPに送って、そのurlのhtmlファイルから、titleタグやh1タグの内容を抽出し、連想配列に格納。そして、その連想配列をJSON形式にしてjqueryに返し、ｈｔｍｌにレンダリングしたいのですが上手くいきません。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> function site_check(){ var url = $("#url").val(); if(url=="") return; $.getJSON("test.php?url=" + encodeURIComponent(url) ,function(res){ $("#title").html(res.title); $("#h1").html(res.h1); }); } </script> </head> <body> <div class="form"> URL <input type="text" id="url" value="" style="width:300px;" onfocus="this.select()" onkeypress="if(event.keyCode==13) site_check()" /> <button onclick="site_check()" />チェック</button> </div> title：<span id="title"></span></br> h1：<span id="h1"></span> </body> test.php↓ <?php $html=mb_convert_encoding(file_get_contents($_GET['url']), 'UTF-8', 'auto'); $array = array(); $pattern = "/(?<=<title>).+?(?=<\/title>)/mis"; preg_match($pattern,$html,$array['title']); $pattern = "/(?<=<h1>).+?(?=<\/h1>)/mis"; preg_match($pattern,$html,$array['h1']); header("Content-Type: application/json; charset=UTF-8"); echo json_encode($array); ?> このコードだと、test.phpからは、[object Object]と、レスポンスが返ってきてしまいます。
- ベストアンサー
- PHP
- Ajaxで、JSONの添え字を表示する
以下のようなソースで、jQueryで、ajax_abc.htmlのid:Abcのボタンを押して、json_abc.phpから、JSON形式で、添え字がMySQLのabcテーブルのid列、値が同じMySQLのabcテーブルのalphabet列の値を全行分受け取り、<p>1:A</p><p>2:B</p><p>3:C</p>というような形でhtmlを生成したいのですが、値を表示することはできるのですが、添え字を表示する方法がわかりません。 どういう風にやれば、表示できるか教えてください。 [ajax_abc.html] <script type="text/javascript"> $(function(){ $("#Abc").click(function(){ $.post("json_abc.php", { }, function(json){ $('#Display').html("<p>"+json[1]+"</p>" + "<p>"+json[2]+"</p>" + "<p>"+json[3]+"</p>") }); }); }); </script> [json_abc.php] <?php $pdo = new PDO('mysql:dbname=test; host=localhost; charset=utf8', 'root'); $st = $pdo->query("SELECT * FROM abc"); $abc = array(); while ($row = $st->fetch()) { $abc += array ( $row['id'] => $row['alphabet'] ); } header('Content-Type: application/json; charset=utf-8'); echo json_encode($abc); [MySQLのabcテーブル] INT: VARCHAR 1: A 2: B 3: C
- ベストアンサー
- AJAX
- jquery,ajaxによるphp通信でnull
初めまして。 現在jqueryを勉強中の学生です。 いろいろなサイトを参考にしつつ、試しににjquery・ajaxを使ったphpとの通信を試みているのですが、文字列のやりとりがうまくいきません。 数字ではうまくいくのですが、文字になるとalertの部分でnullと返されてしまいます。 アドバイス等頂ければと思います。 よろしくお願いいたします。 以下部分的ではありますがコードを示します。 (jqueryはjquery-1.11.1.min.jsを使用） [js] $.ajax({ type: "POST", url: "step1.php", data: send_data, success: function(receive_data) { var parseAr = JSON.parse(receive_data); alert(parseAr[0]['name']); }, error: function(XMLHttpRequest, textStatus, errorThrown) {alert('Error: ' + errorThrown); } }); return false; [php側] <?php if(isset($_POST['name'])) { $result = array(); $result[] = array('name'=>'織田', 'age'=>'33'); $result[] = array('name'=>'織田', 'age'=>'33'); echo json_encode($result); } else { echo json_encode('The parameter of "name" is not found.'); } exit; ?>
- 締切済み
- AJAX
- 別URLからのJSON取得がうまくいかないので教えてください
楽天書籍検索APIをJSONで取得したいのですが、うまく表示されません。 以下のソースで何がまずいか教えていただけますでしょうか。 ※[YOUR_developerID]にはIDが入っているものとします <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>JSON</title> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.2.6");</script> <script type="text/javascript"> $(function(){ $.getJSON("http://api.rakuten.co.jp/rws/2.0/json?developerId=[YOUR_developerID]&operation=BooksTotalSearch&version=2009-03-26&keyword=%E3%82%AC%E3%83%B3%E3%83%80%E3%83%A0&sort=-releaseDate", function(jsonData){ $(jsonData.Body.BooksBookSearch.Items.Item).each(function(){ $("body").append(this.title+"<hr />"); }) }) }) </script> </head> <body>
- ベストアンサー
- JavaScript
お礼
回答ありがとうございました。 内容難しかったので、これから勉強していきたいと思いますー