zoukankan      html  css  js  c++  java
  • AJAX小练习

    /index.jsp

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
      window.onload=function(){
    	  var btn=document.getElementById("btn01");
    	  btn.onclick=function(){
    		  //创建对象
    		  var xhr=new XMLHttpRequest();
    		  //设置参数
    		  var method="post";
    		  var url="${pageContext.request.contextPath}/AServlet";
    		  
    		  xhr.open(method,url);
    		  xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    		  //发送请求
    		  xhr.send("username=liuchuan");
    		  //接受响应
    		  xhr.onreadystatechange=function(){
    			  if(xhr.readyState==4&&xhr.status==200){
    				  var div1=document.getElementById("div1");
    				  var data=xhr.responseText;
    				  div1.innerHTML += data;
    			  }
    		  }
    	  }
    	  
      }
    </script>
    </head>
    <body>
    
       <button id="btn01">电风扇</button>
     <div id="div1"> </div>
    </body>
    </html>
    

      /e.jsp

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="/web-ajax/js/jquery.min.js"></script>
    <script type="text/javascript">
     $(function () {
    	$("#btn01").click(function(){
    		function callback(data) {
    			alert(data);
    			div1.innerHTML += data;
    			
    		}
    		$.get("${pageContext.request.contextPath}/AServlet?&t"+Math.random(),{"username":"zhangsan"},callback);
    		$("#div1").html(data);//加个随机数防止浏览器缓存
    	})
    });
    </script>
    </head>
    <body>
     <button id="btn01">电风扇</button>
     <div id="div1"> </div>
    </body>
    </html>
    

      /class AServlet

    package com.neuedu.servlet;
    
    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("/AServlet")
    public class AServlet extends HttpServlet {
    	private static final long serialVersionUID = 1L;
       
    	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		String name = request.getParameter("username");
    		System.out.println("幸福来敲门"+name);
    		response.getWriter().println("<h1>hello word!</h1>");
    	}
    
    	
    	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		// TODO Auto-generated method stub
    		doGet(request, response);
    	}
    
    }
    

      

  • 相关阅读:
    [C/C++开发] Clion利用Docker开发和调试PHP扩展
    [C/C++开发] Clion利用Docker开发和调试PHP内核
    [C/C++开发] Clion利用Docker开发和调试Linux C/C++程序
    [Docker] 使用ubuntu涉及时区问题
    Oracle 导入 SQL 文件
    转载
    微信小程序
    微信小程序-点击复制功能
    服务器端基础概念
    VSCode 同步设置插件
  • 原文地址:https://www.cnblogs.com/lc-java/p/7400271.html
Copyright © 2011-2022 走看看