JS、jqueryスタティック(ローカル)リフレッシュページ(Ajax非同期)
58913 ワード
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title heretitle>
head>
<script src="${pageContext.request.contextPath}/js/static.js">script>
<body>
<div class="title">
<h1>Ajax ， h1>
div>
<div>
<table class="select">
<tr>
<td class="td">IP:<input type="text" id="ip" name="ip" class="input">td>
<td class="td"> :<input type="text" id="addr" name="addr" class="input">td>
<td class="td"> :<input type="text" id="time" name="time" class="input">td>
<td class="td"> :<input type="text" id="times" name="times" class="input">td>
<td class="td"> <button id="select" onclick="queryInfos()"> button>td>
tr>
table>
div>
<table id="table" class="table" cellpadding="0" cellspacing="0" border="1">
<tr>
<td class="td"> iptd>
<td class="td"> td>
<td class="td"> td>
<td class="td"> td>
tr>
<tr>
<td class="black" colspan="4">td>
tr>
<tbody id="tbody">
<tr id="infos">
<td>127.0.0.1td>
<td> td>
<td>2016-10-24 14:47:01td>
<td>123td>
tr>
tbody>
table>
body>
html>
対応するJSコード、上のJSPがjsの経路を導入することに注意します
var req = new XMLHttpRequest();
function queryInfos() {
// ， servlet action ，
req.open("POST", "AjaxServlet", true);
// post，
req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// ，
req.onreadystatechange = callback;
//Ajax ， ， get
var reqData = "ip=" + document.getElementById("ip").value;
reqData += "&addr=" + document.getElementById("addr").value;
reqData += "&time=" + document.getElementById("time").value;
reqData += "×=" + document.getElementById("times").value;
//
req.send(reqData);
}
//
function callback() {
// Ajax request
if (req.readyState == 4 && req.status == 200) {
//
var response = req.responseText;
//
// eval JavaScript ，
// json "{}" ， JS ， ， 。
var jsonobject = eval("(" + response + ")");
//
var datasize = jsonobject.size;
// json
var datas = jsonobject.datas;
// table
var table = document.getElementById("table");
var infos = document.getElementById("tbody");
table.removeChild(infos);
// tbody， table
infos = document.createElement("tbody");
// table table
for (var i = 0; i < datas.length; i++) {
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
var td4 = document.createElement("td");
td1.innerHTML = datas[i].ip;
td2.innerHTML = datas[i].addr;
td3.innerHTML = datas[i].time;
td4.innerHTML = datas[i].times;
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
infos.appendChild(tr);
}
table.appendChild(infos);
}
}
コールバックの関数が分からないでこの技術のブログを見ることができて、説明の比較的にはっきりしていると感じますhttps://www.cnblogs.com/ahlx/p/5520556.html
JAvaのservletコード
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
//
response.setContentType("text/plain");
//
response.setHeader("Cache-control","no-cache");
//
String ip = request.getParameter("ip");
String addr = request.getParameter("addr");
String time = request.getParameter("time");
String times = request.getParameter("times");
System.out.println("ip:" + ip);
System.out.println("addr:" + addr);
System.out.println("time:" + time);
System.out.println("times:" + times);
/*
*
* */
// json
StringBuilder jsonString = new StringBuilder();
jsonString.append("{");
jsonString.append("'size':2");
jsonString.append(",'datas':[");
jsonString.append("{");
jsonString.append("'ip':'10.10.0.0',");
jsonString.append("'addr':' ',");
jsonString.append("'time':'2019-01-03 16:00:23',");
jsonString.append("'times':'10'");
jsonString.append("}");
jsonString.append(",{");
jsonString.append("'ip':'192.168.110.111',");
jsonString.append("'addr':' ',");
jsonString.append("'time':'2018-11-12 11:00:23',");
jsonString.append("'times':'14'");
jsonString.append("}");
jsonString.append("]");
jsonString.append("}");
System.out.println(jsonString);
//
PrintWriter out = response.getWriter();
//
out.write(jsonString.toString());
out.flush();
out.close();
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title heretitle>
<script src="js/jquery-2.1.1.min.js">script>
<script type="text/javascript">
$(function() {
$("#btnMessage").click(function() {
$.ajax({
type:"POST",
url:"test/json2.json",
success:function(data) {
//alert(" " + data.bookname);
$("#msg").html(" ："+data[0].flighname);
}
})
});
var str=""
$("#btnMessage1").click(function() {
$.ajax({
type:"POST",
url:"test/json2.json",
success:function(data) {
$.each(data,function(index,flight){
str += "" + "" + flight.flighname+" "+ "" +flight.flightid + "" + "";
});
$("#tt").html(str);
//str = ""; ，
}
})
})
})
script>
head>
<body>
<div class="bbb" id="aaa">div>
<input type="button" value=" " id="btnMessage"/>
<input type="button" value=" " id="btnMessage1"/>
div>
<table id="tt" border="1" >
table>
body>
html>
Jquery
servlet SpringMVC Json ，
@Controller
@RequestMapping("/test")
public class TestController {
@RequestMapping("/json2")
@ResponseBody
public List<Flight> json2() {
List<Flight> flights = new ArrayList<Flight>();
Flight flight = new Flight();
flight.setFlighname(" ");
flight.setFlightid(520);
Flight flight2 = new Flight();
flight2.setFlighname(" ");
flight2.setFlightid(1314);
flights.add(flight);
flights.add(flight2);
return flights;
}
}
テストなので のデータは き んでいますが、 には データベースで したデータを うと いでしょう