利用Ajax实现异步交互,每点一次按钮随机在页面上显示一个随机数,利用jQuery也来实现该功能
程序员文章站
2022-07-12 21:18:54
...
1.先写一个servlet来处理Ajax或者jQuery发过来的请求,将随机显示出去
注意:href,scr,url;要根据自己的地址来弄;
package jquery;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/test.do")
public class TestServlet extends HttpServlet{
private static final long serialVersionUID = 1L;
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String name = req.getParameter("name");
resp.getWriter().append("name : "+name+",Served at: ").append(req.getContextPath()+"..."+Math.random());
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req, resp);
}
}
2.先利用Ajax来实现按一次按钮产生一个新的随机数,异步交互
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="/jsp_jd2007/">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function ajaxGet(){
xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET","test.do?name=abc",true);
xmlHttp.send();
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState==4 && xmlHttp.status==200){
document.getElementById("div1").innerHTML=
"<font color='blue' sizd='7'>"+xmlHttp.responseText+"</font>"
}
}
}
function ajaxPost(){
xmlHttp = new XMLHttpRequest();
xmlHttp.open("POST","test.do?",true);
xmlHttp.send("name=zhangwuji");
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState==4 && xmlHttp.status==200){
div2 = document.getElementById("div2");
div2.style.color="red";
div2.style.fontSize="40px";
div2.innerHTML = xmlHttp.responseText;
}
}
}
</script>
</head>
<body>
<div id="div1">
..........
</div>
<button id="btn1" onclick="ajaxGet();">btn2</button>
<div id="div2">
..........
</div>
<button id="btn2" onclick="ajaxPost();">btn2</button>
</body>
</html>3.也可以利用jQuery来实现异步交互,想使用jQuery要先在工程中引入一个jQuery包,可以从网上找,直接复制到WebContent下面就可以
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="/jsp_jd2007/">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
function jqueryGet(){
$.ajax({
type:"GET",
url:"test.do",
data:"name=zhangwuji"
,success:function(data){
$("#div1").html(data);
}
});
/* $.get("test.do","name=abc",function(data){
$("#div1").css("color","red");
$("#div1").css("font-size","20px");
$("#div1").html(data);
}); */
}
function jqueryPost(){
$.ajax({
type:"POST",
url:"test.do",
data:"name=zhangsan",
success:function(data){
$("#div2").html(data);
}
});
/* $.post("test.do","name=zhangsan",function(data){
$("#div2").html(data);
}); */
}
</script>
</head>
<body>
<div id="div1">
........
</div>
<button id="btn1" onclick="jqueryGet();">btn2</button>
<div id="div2">
........
</div>
<button onclick="jqueryPost();">btn2</button>
</body>
</html>