动态加载页面-使用jquery ajax

来源：互联网发布：乐高软件中文版编辑：程序博客网时间：2024/05/16 08:27
后台代码：

<?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>
        0        0           
动态加载页面-使用jquery ajax
jQuery使用ajax的load()加载页面方法
jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
ajax页面动态加载弹出窗口
jsoup获取ajax动态加载的页面
使用Ajax动态加载数据
AJAX jQuery tab,动态加载选显卡
JQuery Ajax动态加载Table数据
使用jquery的load方法设计动态加载，并解决被加载页面JavaScript失效问题
jquery动态加载页面  load方法 注意事项
将jQuery Pagination分页插件用于不使用AJAX加载数据的页面
jquery mobile 页面加载时采用ajax绑定页面数据
使用jQuery，AJAX和ASP.NET动态加载数据页上的滚动
jQuery -- Swiper插件使用ajax动态加载数据出现无法滑动的问题
backbone页面重绘事件监听不到解决方案 | Jquery Ajax动态加载模版 backbone监听不到事件
两个Integer 用== 比较不相等的原因
历史数据迁移  使用触发器 trigger  示例
递归小李子
快速读入
第7章 sed、gawk介绍与正则表达式-----------(gawk编辑器简单使用)
动态加载页面-使用jquery ajax
mysql 的一个死锁问题
Arcsde报ora-29861: 域索引标记为loading/failed/unusable错误
cookie,session机制
spring自带的定时任务功能（task）
从关系型数据库到非关系型数据库
Android 底部导航栏按钮突出
Java 实现文件下载
弹出样式封装