ajax與js實現(xiàn)局部刷新案例

<%@ 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">

//員工列表

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

//1.生成xmlhttp對象

var xmlhttp;

if(window.XMLHttpRequest){

xmlhttp=new XMLHttpRequest();

}else{

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

}

//2.發(fā)送ajax請求

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

xmlhttp.send();

//3.處理數(shù)據(jù)

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.發(fā)送ajax請求

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

xmlhttp.send();

//3.處理數(shù)據(jù)

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.發(fā)送ajax請求

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

xmlhttp.send();

//3.處理數(shù)據(jù)

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("經(jīng)理");

List list3 = new ArrayList();

list3.add("人事部");

list3.add("技術(shù)部");

list3.add("無線事業(yè)部");

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

}

}

}


文檔結(jié)構(gòu)


實現(xiàn)效果(點擊不同按鈕,顯示不同內(nèi)容)
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容