JQueryで使用されているAjaxが機能していて、JSON応答を介してページにリストされているものを変更しています。
テキストでは完全に機能しますが、同じコードを使用する予定ですが、代わりに、たとえばmpgが表示される場所にビデオを表示します。ただし、代わりにyoutubeからの埋め込みコードのテキストを表示するだけです。
JSON応答を取得するHTMLページ:
$(document).ready(function()
{
$("#submitbutton").click(function()
{
$.ajax(
{
url: "https://example.com/jsonServer.php",
type: "GET",
dataType: "jsonp",
jsonp: "callback",
data: { carselection: $("#carselection").val()},
success: function(data)
{
if(data.name == "error")
{
$("#outputcarname").text("There is no such car available"),
$("#price").text(" "),
$("#mpg").text(" ");
}
else
{
$("#outputcarname").text(data.name),
$("#price").text(data.price),
$("#mpg").text(data.mpg);
}
},
error: function()
{
$("#outputcarname").text("There is a problem with the server"),
$("#price").text(" "),
$("#mpg").text(" ");
}
});
return false;
});
});
</script>
JSONサーバー:
* mpgの1つをyoutubeから直接埋め込みコードに置き換えたことに注意してください。この埋め込みコードは、mpg領域とまったく同じように表示されます。
<?php
$cars = array('Maxima' => array('price' => '$32,780', 'mpg' => '24'),
'Prius' => array('price' => '$25,565', 'mpg' => '49'),
'Element' => array('price' => '$22,075', 'mpg' => '<iframe width="560" height="315" src="http://www.youtube.com/embed/enXTiYWQl-0" frameborder="0" allowfullscreen></iframe>'));
if(array_key_exists($_GET['carselection'], $cars))
{
$carname = $_GET['carselection'];
$results = array('name' => $carname, 'price' => $cars[$carname]['price'], 'mpg' => $cars[$carname]['mpg']);
}
else
{
$results = array('name' => 'error');
}
$callback = htmlentities($_GET['callback'], ENT_QUOTES);
print $callback . '(' . json_encode($results) . ')';
?>
私の望みは、ブラウザがタグを受け入れてビデオを明らかに表示することでしたが、jquery.textはそれを真のテキストとして保持していると思います。おそらく、私が使用すべきであることに気付いていない別の関数がありますか?