利用Ajax实现异步交互,每点一次按钮随机在页面上显示一个随机数,利用jQuery也来实现该功能

最新推荐文章于 2021-08-06 18:31:03 发布

初识初始

最新推荐文章于 2021-08-06 18:31:03 发布

阅读量325

点赞数 4

分类专栏：利用ajax实现异步交互文章标签： ajax jquery servlet

本文链接：https://blog.csdn.net/qq_45252842/article/details/109111222

版权

利用ajax实现异步交互专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文展示了如何使用Servlet处理Ajax和jQuery发送的请求，实现在不刷新页面的情况下，通过按钮点击生成新的随机数。首先创建了一个Servlet，然后使用Ajax的GET和POST方法进行异步请求，最后演示了jQuery的$.ajax方法完成相同的功能。

摘要由CSDN通过智能技术生成

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>