后台代码
:
<?php
header("Content-type: text/json; charset=utf-8");
$json['name'] ='功夫熊猫';
$json['content'] ='这是一个好故事';
$json['imageUrl'] = "https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/super/whfpf%3D425%2C260%2C50/sign=fa7c10c2ab345982c5dfb6d26ac9059f/0b7b02087bf40ad10f784355512c11dfa8ecceec.jpg";
$json = json_encode($json);
echo $json;
return;
?>
前端代码:
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
'utf-8'
>
<
script
type
=
"text/javascript"
src
=
"http://libs.baidu.com/jquery/1.9.1/jquery.min.js"
></
script
>
</
head
>
<
style
type
=
"text/css"
>
.wrap{
width: 300px;
height: 100px;
border: 1px solid #ccc;
}
img{
float: left;
}
</
style
>
<
body
>
<
script
type
=
"text/javascript"
>
$(document).ready(function(){
$("#getValue").mouseover(function(){
$.ajax({
type: "GET",
url:"1.php",
dataType: "json",
jsonp: "callback",
success: function(json){
var item = '<
div
class
=
"wrap"
><
img
width
=
"100"
height
=
"100"
src
=
"'+json.imageUrl+'"
>'+json.name+'<
br
>'+json.content+'</
div
>';//根据后台传递过来的数据生成html内容。
$("body").append(item);//内容添加到页面上。
},
error: function(){
alert("fail");
}
});
}).mouseout(function(){
$(".wrap").remove();//鼠标移开的时候清除掉这个内容。
});
})
</
script
>
<
input
type
=
"button"
value
=
"获取值"
id
=
"getValue"
>
</
body
>
</
html
>