<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!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="js/jquery-1.8.0.js"></script>
<script type="text/javascript">
$(function() {
$("#d1").hide();
$("#btn1").click(function() {
var stuName = $("#stuName").val();
var stuAge = $("#stuAge").val();
var stuAddress = $("#stuAddress").val();
var birth = $("#birth").val();
var jsonData = '{"stuName":"' + stuName + '","stuAge":' + stuAge + ',"stuAddress":"' + stuAddress + '","birth":"' + birth + '"}';
$.ajax({
type : "POST",
url : "register.action",
contentType : "application/json",
//data:'{"stuName":"zs","stuAge":20,"stuAddress":"bj","birth":"1995-1-1"}',
data : jsonData,
success : function(data) {
alert(data.success + "---" + data.message);
},
dataType : "json"
});
});
$("#btn2").click(function() {
$("#d1").toggle();
$.ajax({
url : "list.action",
success : function(data) {
var str = "";
str += "<tr>";
str += "<th>" + "学生编号" + "</th>";
str += "<th>" + "学生姓名" + "</th>";
str += "<th>" + "学生年龄" + "</th>";
str += "<th>" + "学生地址" + "</th>";
str += "<th>" + "学生生日" + "</th>";
str += "</tr>";
for (var s = 0; s < data.length; s++) {
//alert(data[s].stuId+"----"+data[s].stuName);
var stu = data[s];
str += "<tr align='center'>";
str += "<td>" + stu.stuId + "</td>";
str += "<td>" + stu.stuName + "</td>";
str += "<td>" + stu.stuAge + "</td>";
str += "<td>" + stu.stuAddress + "</td>";
str += "<td>" + stu.birth + "</td>";
str += "<tr>";
}
//$("#tab").append(str);追加
$("#tab").html(str);
},
dataType : "json"
});
});
});
</script>
</head>
<body>
学生姓名：
<input type="text" id="stuName">
<br> 学生年龄：
<input type="text" id="stuAge">
<br> 学生地址：
<input type="text" id="stuAddress">
<br> 学生生日：
<input type="text" id="birth">
<br>
<button id="btn1">添加</button>
<button id="btn2">展示数据</button>
<hr>
<div id="d1">
<table id="tab" border="1" width="800">
</table>
</div>
</body>
</html>
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!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="js/jquery-1.8.0.js"></script>
<script type="text/javascript">
$(function() {
$("#d1").hide();
$("#btn1").click(function() {
var stuName = $("#stuName").val();
var stuAge = $("#stuAge").val();
var stuAddress = $("#stuAddress").val();
var birth = $("#birth").val();
var jsonData = '{"stuName":"' + stuName + '","stuAge":' + stuAge + ',"stuAddress":"' + stuAddress + '","birth":"' + birth + '"}';
$.ajax({
type : "POST",
url : "register.action",
contentType : "application/json",
//data:'{"stuName":"zs","stuAge":20,"stuAddress":"bj","birth":"1995-1-1"}',
data : jsonData,
success : function(data) {
alert(data.success + "---" + data.message);
},
dataType : "json"
});
});
$("#btn2").click(function() {
$("#d1").toggle();
$.ajax({
url : "list.action",
success : function(data) {
var str = "";
str += "<tr>";
str += "<th>" + "学生编号" + "</th>";
str += "<th>" + "学生姓名" + "</th>";
str += "<th>" + "学生年龄" + "</th>";
str += "<th>" + "学生地址" + "</th>";
str += "<th>" + "学生生日" + "</th>";
str += "</tr>";
for (var s = 0; s < data.length; s++) {
//alert(data[s].stuId+"----"+data[s].stuName);
var stu = data[s];
str += "<tr align='center'>";
str += "<td>" + stu.stuId + "</td>";
str += "<td>" + stu.stuName + "</td>";
str += "<td>" + stu.stuAge + "</td>";
str += "<td>" + stu.stuAddress + "</td>";
str += "<td>" + stu.birth + "</td>";
str += "<tr>";
}
//$("#tab").append(str);追加
$("#tab").html(str);
},
dataType : "json"
});
});
});
</script>
</head>
<body>
学生姓名：
<input type="text" id="stuName">
<br> 学生年龄：
<input type="text" id="stuAge">
<br> 学生地址：
<input type="text" id="stuAddress">
<br> 学生生日：
<input type="text" id="birth">
<br>
<button id="btn1">添加</button>
<button id="btn2">展示数据</button>
<hr>
<div id="d1">
<table id="tab" border="1" width="800">
</table>
</div>
</body>
</html>