AJAX学习(三)

AJAX学习(三)

相关学习代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>发送ajax请求,显示学生列表</title>
<script>
window.onload=function (){
document.getElementById("btm").onclick=function (){
var xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.onreadystatechange=function (){
if(this.readyState==4){
if(this.status==200){
//document.getElementById("info").innerHTML=xmlHttpRequest.responseText;
var stuList = JSON.parse(this.responseText);
var html="";
for(var i=0;i<stuList.length;i++){
var stu=stuList[i];
html+="<tr>"
html+=" <td>"+(i+1)+"</td>"
html+="<td>"+stu.name+"</td>"
html+="<td>"+stu.age+"</td>"
html+="<td>"+stu.addr+"</td>"
html+="</tr>"
}
document.getElementById("info").innerHTML=html;
}else {
alert(this.status);
}
}
}
xmlHttpRequest.open("GET","/old/ajax5",true);
xmlHttpRequest.send();
}
}
</script>
</head>
<body>
<input type="button" value="显示学员列表" id="btm">
<table width="50%" border="1px">
<tr>
<th>序号</th>
<th>登录名</th>
<th>登录密码</th>
<th>真实姓名</th>
</tr>
<tbody id="info">
<!--<tr>
<td>1</td>
<td>admin</td>
<td>123456</td>
<td>admin</td>
</tr>-->
</tbody>
</table>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax7</title>
<script>
window.onload=function () {
document.getElementById("bnt1").onclick = function () {
var xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.onreadystatechange = function () {
if (this.readyState == 4) {
if (this.status == 200) {
document.getElementById("div1").innerHTML = this.responseText;
} else {
alert(this.status);
}
}
}
xmlHttpRequest.open("GET", "/old/ajax7?t=" + new Date().getTime(), false);
xmlHttpRequest.send();
}

document.getElementById("bnt2").onclick = function () {
var xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.onreadystatechange = function () {
if (this.readyState == 4) {
if (this.status == 200) {
document.getElementById("div2").innerHTML = this.responseText;
} else {
alert(this.status);
}
}
}
xmlHttpRequest.open("GET", "/old/ajax8?t=" + new Date().getTime(), true);
xmlHttpRequest.send();
}
}
</script>
</head>
<body>
<button id="bnt1">ajax请求1</button>
<div id="div1"></div>
<button id="bnt2">ajax请求2</button>
<div id="div2"></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手动封装JS库jQuery</title>
<script type="text/javascript" src="js/jQuery-1.0.0.js"></script>
<script type="text/javascript">
// function jQuery(select){
// if (typeof select == "string") {
// if(select.charAt(0)=="#"){
// elementById = document.getElementById(select.substring(1));
// return new jQuery();
//
// }
// }
// if (typeof select == "function") {
// window.onload=select;
// }
//
// this.html=function (htmlText){
// elementById.innerHTML=htmlText;
// }
// this.click=function (fun){
// elementById.onclick=fun;
// }
// this.focus=function (fun){
// elementById.onfocus=fun;
// }
// this.blur=function (fun){
// elementById.onblur=fun;
// }
// this.change=function (fun){
// elementById.onchange=fun;
// }
// this.val=function (v){
// if (v == undefined) {
// return elementById.value;
// }else {
// elementById.value=v;
// }
// }
// }
// $=jQuery;
// window.onload=function (){
// // document.getElementById("btn").onclick=function (){
// // document.getElementById("mydiv").innerHTML="<font color='red'>用户名不可用</font>";
// // }
//
// // jQuery("#btn").onclick=function (){
// // jQuery("#mydiv").innerHTML="<font color='red'>用户名不可用!</font>";
// // }
//
// $("#btn").onclick=function (){
// $("#mydiv").innerHTML="<font color='red'>用户名不可用!</font>";
// }
// }
$(function (){
$("#btn").click(function (){
$("#mydiv").html("<font color='red'>用户名不可用!!#</font>");
var username = $("#username").val();
alert(username);
$("#username").val("hehe");
})
})
</script>
</head>
<body>
用户名:<input type="text" id="username">
<button id="btn">显示信息</button>
<div id="mydiv"></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax9</title>
<script type="text/javascript" src="/old/js/jQuery-1.0.0.js"></script>
<script type="text/javascript">
window.onload=function (){
document.getElementById("btn").onclick=function (){
// var xmlHttpRequest = new XMLHttpRequest();
// xmlHttpRequest.onreadystatechange=function (){
// if (this.readyState == 4) {
// if (this.status == 200) {
// var jsonObj = JSON.parse(this.responseText);
// document.getElementById("mydiv").innerHTML=jsonObj.uname;
// }else{
// alert(this.status);
// }
// }
// }
// xmlHttpRequest.open("POST","/old/ajax9",true);
// xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// var username = document.getElementById("username").value;
// xmlHttpRequest.send("username="+username)
var username = document.getElementById("username").value;
$.ajax({
type:"post",
url:"/old/ajax9",
data:"username="+username,
async:true,
success:function (jsonObj){
document.getElementById("mydiv").innerHTML=jsonObj.uname;
}
});
}
}
</script>
</head>
<body>
<button id="btn">提交</button>
用户名:<input type="text" id="username"><br>
<div id="mydiv"></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试写的jQuery库</title>
<script type="text/javascript" src="/old/js/jQuery-1.0.0.js"></script>
<script type="text/javascript">
$(function (){
$("#btn1").click(function (){
$.ajax({
type:"GET",
url:"/old/ajax10",
async:true,
data:"username="+$("#username").val(),
success:function (jsonObj){
$("#div1").html(jsonObj.uname)
}
})
})
})
</script>
</head>
<body>
<button id="btn1">发送ajax get请求</button><br>
用户名:<input type="text" id="username"><br>
<div id="div1"></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省市联动</title>
<script type="text/javascript" src="/old/js/jQuery-1.0.0.js"></script>
<script type="text/javascript">
$(function (){
$.ajax({
type:"GET",
url:"/old/ajax11",
data:"t="+new Date().getTime(),
async:true,
success:function (jsonObj){
var html="<option value='000'>--请选择省份--</option>"
for (var i=0;i<jsonObj.length;i++){
html+="<option value='"+jsonObj[i].code+"'>"+jsonObj[i].name+"</option>"
}
$("#province").html(html);
}
})
$("#province").change(function (){
$.ajax({
type:"GET",
url:"/old/ajax11",
data:"t="+new Date().getTime()+"&pcode="+this.value,
async:true,
success:function (jsonObj){
var html="<option value='000'>--请选择市--</option>"
for (var i=0;i<jsonObj.length;i++){
html+="<option value='"+jsonObj[i].code+"'>"+jsonObj[i].name+"</option>"
}
$("#city").html(html);
}
})
})
})
</script>
</head>
<body>
<select id="province" >
<!-- <option value="000">&#45;&#45;请选择省份&#45;&#45;</option>-->
<!-- <option value="001">河北省</option>-->
<!-- <option value="002">河南省</option>-->
<!-- <option value="007">江苏省</option>-->
</select>
<select id="city">
<option value='000'>--请选择市--</option>
</select>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试自己编写的jQury库</title>
<script type="text/javascript" src="js/jQuery-1.0.0.js"></script>
<script type="text/javascript">
$(function (){
$("#btn").click(function (){
alert("hello!")
})
})
</script>
</head>
<body>
<button id="btn">hello</button>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
package com.xiaoguan.request;

import com.alibaba.fastjson.JSON;
import com.xiaoguan.bean.Information;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.*;
import java.util.ArrayList;
import java.util.List;

@WebServlet("/ajax5")
public class ajax5Servlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("text/html;charset=UTF-8");
PrintWriter out = resp.getWriter();
String jsonstr="";
Connection conn=null;
PreparedStatement ps=null;
ResultSet rs=null;
try {
Class.forName("com.mysql.cj.jdbc.Driver");
conn= DriverManager.getConnection("jdbc:mysql://localhost:3306/xiaoguan","root","68963120g");
String sql="select 登录名,登录密码,真实姓名 from login ";
ps=conn.prepareStatement(sql);
rs=ps.executeQuery();
// json.append("[");
// while (rs.next()) {
// String 登录名 = rs.getString("登录名");
// String 登录密码 = rs.getString("登录密码");
// String 真实姓名 = rs.getString("真实姓名");
// //{"name":" 王五 ","age": 20 ,"addr":" 北京大兴区 "},
// json.append("{\"name\":\"");
// json.append(登录名);
// json.append("\",\"age\":");
// json.append(登录密码);
// json.append(",\"addr\":\"");
// json.append(真实姓名);
// json.append("\"},");
// }
// jsonstr = json.substring(0, json.length() - 1) + "]";
List<Information> infoList=new ArrayList<>();
while (rs.next()) {
String 登录名 = rs.getString("登录名");
String 登录密码 = rs.getString("登录密码");
String 真实姓名 = rs.getString("真实姓名");
Information info=new Information(登录名,登录密码,真实姓名);
infoList.add(info);
}
jsonstr = JSON.toJSONString(infoList);
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
throw new RuntimeException(e);
} finally {
if (rs!=null) {
try {
rs.close();
} catch (SQLException e) {
throw new RuntimeException(e);
}
}
if (ps!=null) {
try {
ps.close();
} catch (SQLException e) {
throw new RuntimeException(e);
}
}
if (rs!=null) {
try {
rs.close();
} catch (SQLException e) {
throw new RuntimeException(e);
}
}
}
/*StringBuilder html=new StringBuilder();
html.append("<tr>");
html.append(" <td>1</td>");
html.append(" <td>admin</td>");
html.append(" <td>123456</td>");
html.append(" <td>admin</td>");
html.append("</tr>");
out.print(html);*/
//拼接html换成json格式字符串
//String json="[{\"name\":\"王五\",\"age\":20,\"addr\":\"北京大兴区\"},{\"name\":\"李四\",\"age\":30,\"addr\":\"北京海淀区\"}]";
out.print(jsonstr);
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
package com.xiaoguan.request;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/ajax6")
public class ajax6Servlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/xml;charset=UTF-8");
PrintWriter out = response.getWriter();
/*
<students>
<student>
<name>张三</name>
<age>18</age>
</student>
<student>
<name>王五</name>
<age>23</age>
</student>
<students>
*/
StringBuilder xml=new StringBuilder();
xml.append("<students>");
xml.append(" <student>");
xml.append(" <name>张三</name>");
xml.append(" <age>18</age>");
xml.append(" </student>");
xml.append(" <student>");
xml.append(" <name>王五</name>");
xml.append(" <age>23</age>");
xml.append(" </student>");
xml.append("</students>");
out.print(xml);
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
package com.xiaoguan.request;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/ajax7")
public class ajax7Servlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
try {
Thread.sleep(10*1000);
} catch (InterruptedException e) {
e.printStackTrace();
}
out.print("ajax请求1");

}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
package com.xiaoguan.request;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/ajax8")
public class ajax8Servlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
out.print("ajax请求2");

}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
package com.xiaoguan.request;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/ajax9")
public class ajax9Servlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
String uname = request.getParameter("username");
String json="{\"uname\":\""+uname+"\"}";
out.print(json);
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
package com.xiaoguan.request;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;
import java.util.Locale;

@WebServlet("/ajax10")
public class ajax10Servlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
String username = request.getParameter("username");
response.getWriter().print("{\"uname\":\""+username.toUpperCase(Locale.ROOT)+"\"}");
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
package com.xiaoguan.request;

import com.alibaba.fastjson.JSON;
import com.xiaoguan.bean.Area;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;
import java.sql.*;
import java.util.ArrayList;
import java.util.List;

@WebServlet("/ajax11")
public class listAreaServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
String pcode = request.getParameter("pcode");
Connection conn=null;
PreparedStatement ps=null;
ResultSet rs=null;
List<Area> areaList=new ArrayList<>();
try {
Class.forName("com.mysql.cj.jdbc.Driver");
conn= DriverManager.getConnection("jdbc:mysql://localhost:3306/xiaoguan","root","68963120g");
String sql="";
if (pcode==null) {
sql="select code,name from t_area where pcode is null";
ps = conn.prepareStatement(sql);
}else {
sql="select code,name from t_area where pcode=?";
ps = conn.prepareStatement(sql);
ps.setString(1,pcode);
}
rs=ps.executeQuery();
while (rs.next()) {
String code = rs.getString("code");
String name = rs.getString("name");
Area area = new Area(code, name);
areaList.add(area);
}

} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
} finally {
if (conn!=null) {
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (ps!=null) {
try {
ps.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (rs!=null) {
try {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
response.setContentType("text/html;charset=UTF-8");
String json= JSON.toJSONString(areaList);
response.getWriter().print(json);
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
package com.xiaoguan.request;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/request")
public class OldRequestServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("text/html;charset=UTF-8");
PrintWriter out = resp.getWriter();
out.print("<h1>欢迎AJAX<h1>");

}
}