ajax实现局部刷新

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<div class="maxBox">
<span class="T-active indexA">首页</span>
<span class="T-active indexB">九块九包邮</span>
<span class="T-active indexC">优品购</span>
</div>
<div class="content">
<img src="img/1.png">
</div>
<div><img src="img/foot.png"></div>
</body>
<script src="//cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.js"></script>
<script>
$(‘.T-active‘).each(function(){
$(this).click(function(){
if($(this).hasClass(‘indexA‘)){
var url = ‘./index1.html‘;
Public(url);
}else if($(this).hasClass(‘indexB‘)){
var url = ‘./index2.html‘;
Public(url);
}else if($(this).hasClass(‘indexC‘)){
var url = ‘./index3.html‘;
Public(url);
}
})
});
// $(‘.maxBox‘).on(‘click‘,‘.T-active‘,function(){
// if($(this).hasClass(‘indexA‘)){
// var url = ‘./index1.html‘;
// Public(url);
// }else if($(this).hasClass(‘indexB‘)){
// var url = ‘./index2.html‘;
// Public(url);
// }else if($(this).hasClass(‘indexC‘)){
// var url = ‘./index3.html‘;
// Public(url);
// }
//
// });
function Public(url){
$.ajax({
type:‘post‘,
cache:‘false‘,
url:url,
dataType:‘html‘,
success : function(data){
$(".content").html(data)
}
})
}

</script>
</html>

时间: 2024-10-16 14:26:52

ajax实现局部刷新的相关文章

Ajax实时局部刷新

//Ajax实现局部刷新      <script type="text/javascript">    var xmlhttp;    function getData()    {      //获取用户填写的名称      var city=document.getElementById("txt").value;      //创建异步调用对象      xmlhttp=new ActiveXObject("Microsoft.XMLH

Ajax 异步局部刷新

Ajax 异步局部刷新 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面. 实现json 字符串与 JavaScrip 对象得相互转换 JSON.parse()和 JSON.stringify() 1.序列化(将JavaScrip 转换为 json)使用 JSON.st

使用php后台给自己做一个页面路由,配合ajax实现局部刷新。

今天就要放假了,把近来囤积的小玩意儿总结整理一下. 在请求一个html页面来嵌入到当前页会有一个问题,就是跟随请求过来的html他的样式表和脚本会失效.是因为文档加载的先后顺序等问题造成的.因此,加载一些纯文本还好. 举个例子,只有这个问题明白了,我们的原理才好理解. b.html有一个点击事件,但是a.html通过ajax拿到b.html后,如果这个b.html的js不是写在页面里面的,你就会发现没有生效.css样式也一样,都需要重新绑定一下. 首先定义两个页面,一个父页面a.html,一个b

js(三) ajax异步局部刷新技术底层代码实现

ajax 异步 javaScript and xml 开发五步骤: 1. 创建对象 XMLHttpRequest(chrome,firefox) ie... jquery 2. 找到连接, http的method方法    GET|POST    PUT DELETE 3. 注册监听器  有数据返回之后,就会自动调用该方法(不是一次 3次) 4. 发送请求 POST PUT delete 请求数据 5. 处理请求 1 <%@ page language="java" conten

easyui的datagrid整合struts2,以及Ajax,实现局部刷新功能,并设置分页的实现---------投票案例

========================================================================================================= 1.登陆功能- ----表单内容----------------------------------------------------- <pre name="code" class="java"><div class="log

通过javascript&amp;&amp;ajax实现局部刷新

使用形式如下: function showli_1(){ //通过一个按钮onclick触发函数 var xmlhttp=new XMLHttpRequest(); xmlhttp.open("GET","/ajax_js_war_exploded/EmpServlet?flag=1",true);//定义上传的方式,要传输的Servlet和?后加要传输的数据,数据之间以逗号分隔开,定义是否为异步 xmlhttp.send(); //将请求发送 xmlhttp.on

基于H5 pushState和Ajax完美实现页面局部刷新

众所周知使用Ajax可以局部刷新提高用户体验,然而url不跟随改变是其一大弊端. 如果修改浏览器地址栏的url,同时不刷新整个页面就完美了. 先来看看什么是pushState? 给history对象增加一个状态. window.history.pushState(stateData, 'title', 'newUrl'); // stateData用于事件参数 window.addEventListener('popstate', function(){ var state = window.h

局部刷新登录页面的实现方法

局部刷新的登录就是在一个页面上有一个登录框,登录之后交给后台异步处理,处理完成之后会在前端显示出来登录的用户信息,最常见的例子就是登陆优酷的时候我们可以看到URL登录之后没有变化(事实上,优酷用的方式不是局部刷新的方式,很明显可以看到整个页面刷新了,所以优酷的实现方式就是不是局部刷新,但是一时间没有找到例子).最近打算做一个博客的网站的项目,登录这里想要提供给用户提供一个更加良好的体验,就想到了利用ajax实现局部刷新,但是又想到了第二次登录的时候会需要判断登录过之后需要直接显示用户信息而不是登

页面刷新 整个页面刷新和局部刷新

整个页面刷新 1.页面自动刷新:把如下代码加入<head>区域中 <meta http-equiv="refresh" content="20"> 其中20指每隔20秒刷新一次页面. 2.页面自动跳转:把如下代码加入<head>区域中 <meta http-equiv="refresh" content="20;url=“#"> 其中20指隔20秒后跳转到#页面 3.页面自动刷新