<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("/example/jquery/demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功！")
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText)
})
})
})
</script>
</head>
<body>
<div id="div1"><h2>使用 jQuery AJAX 来改变文本</h2></div>
<button>获得外部内容</button>
</body>
</html>
这是一个我用了 bingo 框架写的ajax 和你的要求差不多了,为了简单说明,我将默认显示"a.php"的个删除------------------------------------------
1.先导入一个现成的ajax框架,我这里推荐用bingo,虽然网上有好多更强大的,但我觉得这个足以应付大部份的 *** 作的内容,你可以在这里下载得到,
http://www.ajaxbingo.com/
而且是中文的,非常亲切哦,dw cs4里也对他有代码提示
<script src="bingo.js"></script>
2.建一个function让来处理鼠标滑过连接时的 *** 作
将划过的连接的ID作为判断,ajax要访问那一个文件再将得到的结果交给function "ch2"
<script>
function ch(val){
AJAXCALL(val+".php",ch2)
}
3.返回的结果显示在指定的ID的div里头,
function ch2(doc){
$("downurl").innerHTML=doc
}
</script>
------------------------------------------
<a href="#" id="a" onmouseover="ch(this.id)">LINK A</a>| <a href="#" id="b" onmouseover="ch(this.id)">LINK B </a>
<div id="downurl"></div>
-----------------------------------------
其实这个切换页的功能你可以直接在dw cs3 cs4里找到,不需要自己编写
Ajax = 异步 JavaScript 和 XML 或者是 HTML（标准通用标记语言的子集）。
关于ajax能不能写在jsp中，刚开始我认为不可以，后来我看到有相关的博客确实在jsp中使用了ajax；在我动手尝试后，发现确实可以，并且写了一个简单的基于JQuery实现的ajax demo。基于普通JavaScript实现的ajax太繁琐了，使用基于JQuery实现的ajax很容易，前提是得先引入jquery库。
代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!-- 需要导入jquery文件 -->
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
//在页面加载完成后
$(function(){
$("#btn").click(function(){
//方式一：
/*
//发送ajax请求
$.ajax({
//编写json格式，设置属性和值
url:"testAjax",//ajax请求要发送的地址
contentType:"application/jsoncharset=utf-8",//MIME类型
data:'{"username":"BoildWater"}',//发送的数据
dataType:"json",//响应数据的类型
type:"post",//发送请求的方式
success:function(data){
//data为服务器端响应的数据
alert(data)
}
})
*/
//方式二：
$.get("testAjax",{"username":"BoildWater"},function(data){
alert(data)
})
})
})
</script>
</head>
<body>
This is my JSP page. <br>
<button id="btn">发送ajax请求</button>
</body>
</html>
多说一点：
在我学习了ajax之后，我才明白为什么京东页面可以做到提交用户登录信息，可以“不刷新”页面就可以响应给用户是否登录成功，体验真好，有兴趣的同学可以去感受一下。当然ajax能做的还有很多很多，所以学习了ajax后，我渐渐放弃了jsp作为web应用表现层，html+ajax成为了我写项目的常用手段。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）