ajax实现点击不同的链接让返回的内容显示在特定div里

/* 以下代码通过ajax实现在一个web页面点击不同的链接，然后将返回的结果显示在该页面固定的div里。 */

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script language="javascript">
var http_request = false;
function createRequest(url,objID){
http_request = false;
if(window.XMLHttpRequest){ //非IE浏览器
http_request = new XMLHttpRequest();
if(http_request.overrideMimeType){
http_request.overrideMimeType("text/xml");
}
}else if(window.ActiveXObject){ //IE浏览器
try{
http_request = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){}
}
}
if(!http_request){
alert("无法创建XMLHTTP实例");
return false;
}
http_request.open("GET",url,true);
http_request.send(null); 

var obj = document.getElementById(objID);
http_request.onreadystatechange = function(){
if(http_request.readyState == 4){
if(http_request.status == 200){
obj.innerHTML = http_request.responseText;
}else{
alert('您请求的页面发现错误！');
}
}
}
}
</script>
</head> 

<body onload="createRequest('content1.html','show')">
<div align="center">
<a href="content1.html" onclick="createRequest('content1.html','show');return false;">no1</a> |
<a href="content2.html" onclick="createRequest('content2.html','show');return false;">no2</a> |
<a href="content3.html" onclick="createRequest('content3.html','show');return false;">no3</a>
</div>
<div id="show" align="center"></div>
</body>
</html>
赞 (0)

相关推荐

  • js实现的点击div区域外隐藏div区域

    首先看下JS的事件模型,JS事件模型为向上冒泡,如onclick事件在某一DOM元素被触发后,事件将跟随节点向上传播,直到有click事件绑定在某一父节点上,如果没有将直至文档的根. 阻止冒泡:1.stopPropagation()对于非IE浏览器.2.cancelBubble属性为true,对于IE浏览器, 而Jquery已经有兼容浏览器的方法,event.stopImmediatePropagation(); <!DOCTYPE html> <html> <head>

  • 点击页面其它地方隐藏该div的两种思路

    思路一 第一种思路分两步 第一步:对document的click事件绑定事件处理程序,使其隐藏该div 第二步:对div的click事件绑定事件处理程序,阻止事件冒泡,防止其冒泡到document,而调用document的onclick方法隐藏了该div. 复制代码 代码如下: <script type="text/javascript"> function stopPropagation(e) { if (e.stopPropagation) e.stopPropagat

  • 将两个div左右并列显示并实现点击标题切换内容

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">

  • Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)

    Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

  • 基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑

    基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑

    当需要实现如下图操作,点击服务评分,出现一个服务评分窗口用来填入相关表单信息 可是这会让我们打开服务评分界面时还可以点击body主界面中的购物车等链接,这是不对的,因此我们可以使用层叠样式表来指定外围的div的z-index低于当前服务评分表单页面,不能被点击,如下: /* 定义一个div用于覆盖整个页面,这个div的z-index大于body,小于服务评分div */ #temp{ background-color: #000; opacity: 0.3; width: 100%; heigh

  • ajax实现点击不同的链接让返回的内容显示在特定div里

    /* 以下代码通过ajax实现在一个web页面点击不同的链接,然后将返回的结果显示在该页面固定的div里. */ <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script language="javascript"> var http_request = false; function create

  • ASP.NET中iframe框架点击左边页面链接 右边显示链接页面内容

    ASP.NET中iframe框架点击左边页面链接 右边显示链接页面内容

    ASP.NET中iframe框架点击左边页面链接,右边则显示链接页面内容,具体实现内容如下 先看看效果图: 首先是主页面main.aspx <body style="background-color: #AFEEEE"> <form id="form1" runat="server"> <div> <center> <h1> 后台管理界面 </h1> <span sty

  • 基于ajax实现点击加载更多无刷新载入到本页

    基于ajax实现点击加载更多无刷新载入到本页

    先给大家展示效果图: 效果演示 本例是分页的另外一种显示方式,并不是隐藏未显示的内容 数据库结构与<ajax 翻页>是一样的 JavaScript 代码 <script type="text/javascript"> $(document).ready(function() { var track_click = ; //track user click on "load more" button, righ now it is click

  • jQuery通过Ajax向PHP服务端发送请求并返回JSON数据

    jQuery通过Ajax向PHP服务端发送请求并返回JSON数据

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写,同时也易于机器解析和生成.JSON在前后台交互的过程中发挥着相当出色的作用. 服务端PHP读取MYSQL数据,并转换成JSON数据,传递给前端Javascript,并操作JSON数据.本文将通过实例演示了jQuery通过Ajax向PHP服务端发送请求并返回JSON数据.阅读本文的读者应该具备jQuery.Ajax.PHP相关知识,并能熟练运用. XHTML <ul id="use

  • JavaScript实现点击单选按钮改变输入框中文本域内容的方法

    JavaScript实现点击单选按钮改变输入框中文本域内容的方法

    本文实例讲述了JavaScript实现点击单选按钮改变输入框中文本域内容的方法.分享给大家供大家参考.具体如下: 这里实现点击单选按钮改变输入框中文本域内容的方法,是一个JavaScript 的简单应用,可以减少用户的输入,提升用户操作易用性,它类似一个TAB选项卡一样的功能,并可以完成后提交表单,值得学习. 运行效果截图如下: 具体代码如下: <html> <head> <title>JavaScript点击单选框改变输入框内容</title> </

  • layui当点击文本框时弹出选择框,显示选择内容的例子

    实现如图所示的功能 实现步骤: 1.html页面需要注意的内容 1). table <div id="hidden1" lay-filter="hidden1" style="display: none"> <table id="department_result" lay-filter="department_result"></table> </div>

  • jQuery点击按钮弹出遮罩层且内容居中特效

    jQuery点击按钮弹出遮罩层且内容居中特效

    本文为大家分享了jQuery点击按钮弹出遮罩层且内容居中的特效,下面来看最终实现的效果: 由于是测试的程序,所以我未加关闭的按钮. 一.主体程序 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>弹出居中遮罩</title> <meta name="viewport" content="width=devi

  • JS实现点击下拉菜单把选择的内容同步到input输入框内的实例

    最近博主在边学flask边写测试平台,碰到一个比较常用的场景如下图所示 这里有一个输入框组,下拉菜单里面有3个选项,还有一个输入框,代码是用 bootstrap写的,代码也给大家贴出来 <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"

  • 代码实例ajax实现点击加载更多数据图片

    本文给大家介绍ajax如何实现点击加载更多数据图片(预加载)效果的,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ajax点击加载更多数据--博客园--勇淘未来</title> <script type="text/javascript" src=&q

  • Jquery AJAX 用于计算点击率(统计)

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> Demo </TITLE> </HEAD> <BODY> <script src="jquery.js" type="text/javascript"></

随机推荐