动态加载页面-使用jquery ajax

最新推荐文章于 2024-05-16 02:23:50 发布
最新推荐文章于 2024-05-16 02:23:50 发布
阅读量2.8k 收藏
点赞数 1
分类专栏： jQuery AJAX
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_23064359/article/details/53894328
版权

后台代码 ：

<?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 >
甜妹
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery 动态载入页面，并且保证 url 变动
cdmamata的专栏
03-23 2908
最近做一个新的项目，项目页头，导航，页尾是不变的，只有中间部分是通过加载其他页面，达到内容刷新的。 大概结构如下， 要求，     1. 正文部分可以通过加载一个页面达到刷新效果     2. 保留加载的页面 url，即刷新整个页面时，正文还停留在当前页面 Logo Title 导航栏 正文部分 Footer 页面局部刷新可以有很
jquery实现图片延迟加载和ajax方式加载页面
06-10
"jQuery实现图片延迟加载和Ajax方式加载页面"是一种优化策略，旨在解决页面加载速度慢的问题，特别是对于那些资源密集型的网站。 首先，让我们深入了解一下**图片延迟加载（Lazy Loading）**的概念。在传统的网页...
用jQuery的load方法动态加载页面，以及脚本问题
weilikk的博客
08-19 6348
一、了解load方法 load(url, [data], [callback]) 概述 载入远程 HTML 文件代码并插入至 DOM 中。 默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。jQuery 1.2 中，可以指定选择符，来筛选载入的 HTML 文档，DOM 中将仅插入筛选出的 HTML 代码。语法形如 “url #some > selector”。请查看示例。 参数 url,[data,[callback]]String,Map/String,CallbackV1.0
【速成之路】网页编程必会的Ajax——jQuery实现Ajax（一）
最新发布
2401_84093443的博客
05-16 714
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
jquery动态加载页面到div中
mzjmmc的博客
09-10 819
使用场景：我经常看到一些系统，点击菜单，容器会动态加载页面，那么这个过程是如何实现 实现方式一：绑定点击事件，使用ajax动态加载页面到div中 $.ajax({//异步请求 url:"/table.do", type:'post', dataType:"json", async:false, data:{}, success:function(data){ //将后台的数据返回给前端界面 //前端界面对其进行处理，达到要展示的效果。 $("#ma
JQuery 动态添加页面
shengyao15的专栏
04-27 360
----detail.jsp 页面上点击seqNo，出现该记录的详细列表【CIM】---- 用jquery跳转到ErrorRecordsAction 再到errorrecords.jsp（组装详细列表） 再将这个页面加载进来 [code="java"]function getError(recordId) { // save(); save_correc...
jquery页面加载ajax请求,jquery ajax 加载页面
weixin_36333122的博客
08-05 484
各位大虾的方法都不错，给我加深了理解。基本的方法都是一样的……问题已经解决，通俗一点说就是用了遮罩的效果//查询航班$("#waiting").ajaxStart(function() {// $(this).html("正在查询,请稍候...");$("#pageA").css("display", "none");$("#pageB").css("display", "block...
AJAX和jQuery动态加载数据的实现方法
01-19
什么是AJAX？ 这里的AJAX不是希腊神话里的英雄，也不是清洁剂品牌，更不是一门语言，而是指异步Javascript和XML（Asynchronous ...动态加载数据，即在后台交换数据。 比方说，一个便签本应用，当你在表单里填写好内容，
jQuery Ajax页面局部加载方法汇总
11-24
以下是对jQuery AJAX页面局部加载方法的详细说明： 1. **基本$.ajax()方法**： - `$.ajax()`是jQuery中最基础的AJAX调用方法，它支持GET和POST等多种HTTP请求类型。在给定的示例中，`url`定义了请求的地址，`type`...
jQuery AJAX实现调用页面后台方法
10-22
通过以上步骤，我们可以实现使用jQuery AJAX从页面前端调用后台方法，获取数据并更新页面内容，从而实现页面的动态更新，提高用户体验。在实际开发中，可以根据需求调整这些方法，例如添加请求前后的加载动画，或者...
jquery动态加载页面方案
wowhhz
05-03 124
资源来源网上，做个备忘 1、分别加载的html及js，分成两个文件 jquery加载页面 $('#区域id').load('页面名称'); JQuery的 $.getScript(url,callback) 方法加载js脚本 js加载例子参照 [url] http://www.cnblogs.com/58top/archive/2012/10/29/loading-jav...
利用jQuery实现动态加载页面内容并融入当前页面的全面解析
Programming Talk
04-03 660
jQuery作为一款广泛使用的JavaScript库，提供了丰富的API以简化DOM操作和AJAX请求，使得开发者能够轻松实现将远程页面内容加载到当前页面的功能。通过jQuery提供的强大功能，我们可以方便地将远程页面的内容无缝融合到当前页面中，极大地增强了网页的交互性和灵活性。在实际应用中，还需根据具体需求，综合运用AJAX的各种方法，以及恰当的缓存控制、事件处理和错误处理策略，确保页面动态加载功能既高效又稳定。.ajax()方法的便捷封装，特别适用于简单的页面片段加载场景。
jQuery滚动时动态加载页面内容
weixin_30449239的博客
11-05 90
var loading = false; $(window).scroll(function(){ if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){ if(loading == false){ loading = true; ...
动态加载Jquery
ISaiSai的专栏
10-10 1053
在开发功能，不知道页面是否引入过jquery window.jQuery || document.write('')
jquery加载获取项目访问路径(URL)
chenhudong7536的博客
03-26 1377
整理： var URL = window.location.href; alert("1:" + URL); var PathName = window.location.pathname; alert("2:" + PathName); var Port = window.locati...
jq 获取引入页面url_jQuery加载外部站点页面
weixin_34125336的博客
01-12 656
手掌心您遇到跨域策略问题，原因是出于安全原因，AJAX不允许您从不在同一域中的页面上获取内容。要摆脱它并完成您的任务：您需要一个PHP文件，您可以grabber.php仅使用以下这行PHP 进行调用：比在您的html内部(或其他任何文件都可以：) test $(function(){    var contentURI= 'http://domain...
jquery实现静态html文件的include效果
shikun520的专栏
10-17 319
直接调用jquery的get方法调用远程页面，代码就这样： &lt;script type="text/javascript" src="jquery-1.2.6.js"&gt;&lt;/script&gt;&lt;script type="text/javascript"&gt;$.get("top.html",function(data){$("#top&quo
【jQuery】ajax异步请求实现动态加载表格
debug
11-23 744
使用ajax异步请求，把数据动态渲染成一个表格
Ajax动态更新页面元素
weixin_66196770的博客
09-09 196
需求：动态刷新页面内容并根据页面内容动态创建html标签元素。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值