手记

ajax与js实现局部刷新功能小样

注意包的引入及其位置

<%@ page language="java" contentType="text/html; charset=utf-8"

    pageEncoding="utf-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Insert title here</title>

<style type="text/css">

*{

margin:20px 0;

padding:0 0;

}

input{

width:200px;

text-align:center;

}

.outside{

width:100%;

text-align:center;

}

#container{

/* width:100px;

height:100px; */

position:relative;

margin:0 auto;

/* background-color:orange; */

}

</style>

</head>

<body>

<div class="outside">

<input type="button" id="ebtn" value="员工列表" />

<input type="button" id="rbtn" value="职位列表" />

<input type="button" id="dbtn" value="部门列表" />

<div id="container"></div>

</div>

<script type="text/javascript" src="js/jquery-3.4.1.js"></script>

<script type="text/javascript">

//员工列表

document.getElementById("ebtn").onclick=function(){

//1.生成xmlhttp对象

var xmlhttp;

if(window.XMLHttpRequest){

xmlhttp=new XMLHttpRequest();

}else{

xmlhttp=new ActivXObject("Microsoft.XMLHTTP");

}

//2.发送ajax请求

xmlhttp.open("get","/ajax/p?param=1",true);

xmlhttp.send();

//3.处理数据

xmlhttp.onreadystatechange = function(){

if(xmlhttp.readyState==4&&xmlhttp.status==200){

var t=xmlhttp.responseText;

var json=JSON.parse(t);

console.log(json);

var html="";

for(var i=0;i<json.length;i++){

var ename=json[i];

console.log(ename);

html=html+ename+"<br>";

}

console.log(html);

document.getElementById("container").innerHTML=html;

}

}

}

//职位列表

document.getElementById("rbtn").onclick=function(){

//1.生成xmlhttp对象

var xmlhttp;

if(window.XMLHttpRequest){

xmlhttp=new XMLHttpRequest();

}else{

xmlhttp=new ActivXObject("Microsoft.XMLHTTP");

}

//2.发送ajax请求

xmlhttp.open("get","/ajax/p?param=2",true);

xmlhttp.send();

//3.处理数据

xmlhttp.onreadystatechange = function(){

if(xmlhttp.readyState==4&&xmlhttp.status==200){

var t=xmlhttp.responseText;

var json=JSON.parse(t);

console.log(json);

var html="";

for(var i=0;i<json.length;i++){

var ename=json[i];

console.log(ename);

html=html+ename+"<br>";

}

console.log(html);

document.getElementById("container").innerHTML=html;

}

}

}

//部门列表

document.getElementById("dbtn").onclick=function(){

//1.生成xmlhttp对象

var xmlhttp;

if(window.XMLHttpRequest){

xmlhttp=new XMLHttpRequest();

}else{

xmlhttp=new ActivXObject("Microsoft.XMLHTTP");

}

//2.发送ajax请求

xmlhttp.open("get","/ajax/p?param=3",true);

xmlhttp.send();

//3.处理数据

xmlhttp.onreadystatechange = function(){

if(xmlhttp.readyState==4&&xmlhttp.status==200){

var t=xmlhttp.responseText;

var json=JSON.parse(t);

console.log(json);

var html="";

for(var i=0;i<json.length;i++){

var ename=json[i];

console.log(ename);

html=html+ename+"<br>";

}

console.log(html);

document.getElementById("container").innerHTML=html;

}

}

}

</script>

</body>

</html>

package com.zj.ajax;


import java.io.IOException;

import java.util.ArrayList;

import java.util.List;


import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;


import com.alibaba.fastjson.JSON;


import sun.management.counter.Variability;


/**

 * Servlet implementation class process

 */

@WebServlet("/p")

public class process extends HttpServlet {

private static final long serialVersionUID = 1L;

       

    /**

     * @see HttpServlet#HttpServlet()

     */

    public process() {

        super();

        // TODO Auto-generated constructor stub

    }


/**

* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)

*/

@SuppressWarnings({ "unchecked", "rawtypes" })

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

List list1 = new ArrayList();

list1.add("小红");

list1.add("小明");

list1.add("小白");

List list2 = new ArrayList();

list2.add("职员");

list2.add("经理");

List list3 = new ArrayList();

list3.add("人事部");

list3.add("技术部");

list3.add("无线事业部");

response.setContentType("text/html;charset=utf-8");

String param=request.getParameter("param");

int i=Integer.parseInt(param);

if (i == 1) {

String json1=JSON.toJSONString(list1);

response.getWriter().println(json1);

}else if (i == 2) {

String json2=JSON.toJSONString(list2);

response.getWriter().println(json2);

}else{

String json3=JSON.toJSONString(list3);

System.out.println(json3);

response.getWriter().println(json3);

}

}

}

效果图(点击不同按钮,显示不同内容)

1人推荐
随时随地看视频
慕课网APP