动态加载页面-使用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 2913
最近做一个新的项目，项目页头，导航，页尾是不变的，只有中间部分是通过加载其他页面，达到内容刷新的。 大概结构如下， 要求，     1. 正文部分可以通过加载一个页面达到刷新效果     2. 保留加载的页面 url，即刷新整个页面时，正文还停留在当前页面 Logo Title 导航栏 正文部分 Footer 页面局部刷新可以有很
用jQuery的load方法动态加载页面，以及脚本问题
weilikk的博客
08-19 6400
一、了解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 725
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
jquery动态加载页面到div中
mzjmmc的博客
09-10 823
使用场景：我经常看到一些系统，点击菜单，容器会动态加载页面，那么这个过程是如何实现 实现方式一：绑定点击事件，使用ajax动态加载页面到div中 $.ajax({//异步请求 url:"/table.do", type:'post', dataType:"json", async:false, data:{}, success:function(data){ //将后台的数据返回给前端界面 //前端界面对其进行处理，达到要展示的效果。 $("#ma
JQuery 动态添加页面
shengyao15的专栏
04-27 362
----detail.jsp 页面上点击seqNo，出现该记录的详细列表【CIM】---- 用jquery跳转到ErrorRecordsAction 再到errorrecords.jsp（组装详细列表） 再将这个页面加载进来 [code="java"]function getError(recordId) { // save(); save_correc...
jquery页面加载ajax请求,jquery ajax 加载页面
weixin_36333122的博客
08-05 488
各位大虾的方法都不错，给我加深了理解。基本的方法都是一样的……问题已经解决，通俗一点说就是用了遮罩的效果//查询航班$("#waiting").ajaxStart(function() {// $(this).html("正在查询,请稍候...");$("#pageA").css("display", "none");$("#pageB").css("display", "block...
jquery实现图片延迟加载和ajax方式加载页面
06-10
"jQuery实现图片延迟加载和Ajax方式加载页面"是一种优化策略，旨在解决页面加载速度慢的问题，特别是对于那些资源密集型的网站。 首先，让我们深入了解一下**图片延迟加载（Lazy Loading）**的概念。在传统的网页...
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 125
资源来源网上，做个备忘 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 690
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 1054
在开发功能，不知道页面是否引入过jquery window.jQuery || document.write('')
jquery加载获取项目访问路径(URL)
chenhudong7536的博客
03-26 1378
整理： 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 659
手掌心您遇到跨域策略问题，原因是出于安全原因，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
Ajax实现瀑布流动态加载网页
Earl_yuan的专栏
10-14 6671
瀑布流的动态加载效果是我一直以来觉得最喜欢的效果之一了。最近在工作中遇到了一个情景，当我登录到系统中时，需要向另一个系统发送多次接口查询数据，之后再将这些数据显示到页面上。这就存在了这样一个问题：页面加载的时间过长，用户在登陆后就需要一直等待接口全部查询完毕后才能登录到系统中。这大大的降低了用户体验。所以我就决定使用瀑布流的效果来加载页面，在用户登陆后，先只查询一个接口，返显数据到页面上，这时用户
Flask+jQuery：AJAX技术动态加载网页
有意栽花花不发，无心插柳柳成荫。
03-14 966
hello，大家好，我是wangzirui32，今天我们来学习如何使用jQuery实现AJAX动态加载网页。 学习目录1. 准备工作1.1 搭建测试网站1.2 数据文件1.3 网页模板1.4 静态资源2. 编写加载代码3. 效果展示写在最后 1. 准备工作 准备工作有点多，如果只是来学习jQuery的，请跳到第2部分-编写加载代码。 1.1 搭建测试网站 这里我用Python的Flask搭建了一个测试网站，代码如下： from flask import Flask from flask import ren
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值