【PHP/jQuery】jQueryのgetJSONメソッドがIEで動作させられなかった
クライアントサイド:json.html
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function hoge(){
$.getJSON("json.php", {hoge: "hoge"}, function(data){
document.getElementById("test").innerHTML = data.hoge;//本当はセレクターで$("#test")と書くべき
});
}
</script>
</head>
<body>
<h1>hoge</h1>
<div id="test"></div>
<input type="button" value="Submit" onClick="hoge();">
</body>
</html>
サーバサイド:json.php
<?php
$hTest = array('hoge' => 'aaaaaa');
echo json_encode($hTest);
?>
としていたとします。
これだとFireFox、Safariだと動くのになぜかIEだけは…
調べてみるとサーバサイドでjson形式でデータを送るときにヘッダー情報として
「json形式でデータを返しますよ」
と明示してあげないとダメみたい
なので
header('Content-type: application/json; charset=UTF-8');
の一行をサーバサイドのjson.phpに追加してあげるとできます
サーバサイド:json.php
<?php
header('Content-type: application/json; charset=UTF-8');
$hTest = array('hoge' => 'aaaaaa');
echo json_encode($hTest);
?>
こうすることでIEでもjQueryのgetJSONメソッドが使えます
そもそもヘッダーつけるのうっかり忘れたのが原因でハマったのでメモしておきます
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function hoge(){
$.getJSON("json.php", {hoge: "hoge"}, function(data){
document.getElementById("test").innerHTML = data.hoge;//本当はセレクターで$("#test")と書くべき
});
}
</script>
</head>
<body>
<h1>hoge</h1>
<div id="test"></div>
<input type="button" value="Submit" onClick="hoge();">
</body>
</html>
サーバサイド:json.php
<?php
$hTest = array('hoge' => 'aaaaaa');
echo json_encode($hTest);
?>
としていたとします。
これだとFireFox、Safariだと動くのになぜかIEだけは…
調べてみるとサーバサイドでjson形式でデータを送るときにヘッダー情報として
「json形式でデータを返しますよ」
と明示してあげないとダメみたい
なので
header('Content-type: application/json; charset=UTF-8');
の一行をサーバサイドのjson.phpに追加してあげるとできます
サーバサイド:json.php
<?php
header('Content-type: application/json; charset=UTF-8');
$hTest = array('hoge' => 'aaaaaa');
echo json_encode($hTest);
?>
こうすることでIEでもjQueryのgetJSONメソッドが使えます
そもそもヘッダーつけるのうっかり忘れたのが原因でハマったのでメモしておきます
