AJAX小练习

最新推荐文章于 2021-08-05 16:19:54 发布

转载最新推荐文章于 2021-08-05 16:19:54 发布 · 151 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lc-java/p/7400271.html

文章标签：

#java #javascript #ViewUI

/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);
	}

}

转载于:https://www.cnblogs.com/lc-java/p/7400271.html