JavaLearn#（25）Ajax相关知识三级联动案例Bootstrap入门栅格系统排版表格字体图标等简单概述
Posted LRcoding
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaLearn#（25）Ajax相关知识三级联动案例Bootstrap入门栅格系统排版表格字体图标等简单概述相关的知识，希望对你有一定的参考价值。
1. 原生Ajax
异步访问，局部刷新。Ajax 为异步操作，使用 Ajax代表摒弃了 JavaEE的转发与重定向操作
Ajax的关键技术：
- 使用CSS构建用户界面样式，负责页面排版和美工
- 使用DOM进行动态显示和交互，对页面进行局部修改
- 使用XMLHttpRequest异步获取数据
- 使用javascript将所有元素绑定在一起
1.1 原生Ajax使用步骤
-
创建 XMLHttpRequest 对象
function createXMLHttpRequest() if (window.ActiveXObject) // IE xhr = new ActiveXObject('Microsoft.XMLHTTP'); else // not IE xhr = new XMLHttpRequest(); -
和服务器端建立连接
// post请求 xhr.open("post", "/myAjax2/example1/example1.jsp"); xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded"); // xhr.send("name=" + name); // get请求 xhr.open("get", "/myAjax2/example1/example1.jsp?name="+name); // xhr.send(null); -
指定回调函数
xhr.onreadystatechange = function() if (xhr.readyState == 4) // 响应已经完毕 if (xhr.status == 200) // 200 // 获取返回值 var text = xhr.responseText; // 将返回值写入到指定位置 document.getElementById("nametip").innerhtml = text; // alert(text); else // 404 500 alert(xhr.status + " " + xhr.statusText); ; // HTTP就绪状态，表示请求的状态或情形 /** * readyState * HTTP就绪状态，表示请求的状态或情形。在Ajax应用程序中需要了解五种就绪状态，但通常只使用状态4： * 0：请求没有发出（在调用 open() 之前） * 1：请求已经建立但还没有发出（调用 send() 之前） * 2：请求已经发出正在处理之中（这里通常可以从响应得到内容头部） * 3：请求已经处理，响应中有部分数据可用，但是服务器还没有完成响应 * 【 4：响应已完成，可以访问服务器响应并使用它 】 */ // 响应的状态码 /** * 200 * 404 * 500 */ -
发送请求
// post请求 xhr.send("name=" + name); // get请求 xhr.send(null);
1.2 验证用户名是否可用
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var xhr;
function checkName()
// 获取用户名
var name = document.getElementById("name").value;
// (客户端验证) 判断用户名长度是否大于等于6
if (name.length < 6)
document.getElementById("nametip").innerHTML = "用户名长度大于等于6";
return;
// 判断用户名是否可用
//（服务器端的验证） 方式1：提交表单给Servlet、JSP进行同步验证 方式2：使用Ajax进行异步验证
// 1.创建XMLHttpRequest对象
createXMLHttpRequest();
// 2.和服务器端建立连接
// ====================== get方式，直接将 name放在路径里，使用 xhr.send(null) ======================
// xhr.open("get", "/myAjax2/example1/validUser.jsp?name="+name);
xhr.open("post", "/myAjax2/example1/example1.jsp");
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
// 3.指定回调函数
xhr.onreadystatechange = process;
// 4.发送请求给服务器端
// xhr.send(null);
// =============== post方式，将 name放在body里，使用 xhr.send("name=" + name) ===================
xhr.send("name=" + name);
function createXMLHttpRequest()
if(window.ActiveXObject) // IE
xhr = new ActiveXObject('Microsoft.XMLHTTP');
else // not IE
xhr = new XMLHttpRequest();
function process()
if (xhr.readyState == 4) // 响应已经完毕
if (xhr.status == 200) // 200
// 获取返回值
var text = xhr.responseText;
// 将返回值写入到指定位置
document.getElementById("nametip").innerHTML = text;
// alert(text);
else // 404 500
alert(xhr.status + " " + xhr.statusText);
</script>
</head>
<body>
<form action="" method="post" >
姓名1<input type="text" name="name" id="name" onblur="checkName()" ><span id="nametip"></span> <br>
密码2<input type="text" name="pwd" id="pwd"><br>
密码3<input type="text" name="repwd" id="repwd"><br>
<input type="submit" value="提交">
</form>
</body>
</html>
validUser.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
// 1.接收name
String name = request.getParameter("name");
// 2.判断name是否被占用
boolean flag = true; //没有被占用 可用
if (name == null || name.indexOf("sxt") >= 0)
flag = false; //不可用
// 3.返回结果（不使用转发和重定向）
if (flag)
out.println("用户名可以使用");
else
out.println("用户名已经被占用");
%>
1.3 总结
Ajax 的核心是XMLHttpRequest
- 属性
- xhr.
readyState== 4 - xhr.
status== 200 - var text = xhr.
responseText; 返回的数据 - xhr.
statusText
- xhr.
- 函数
- xhr.
open(“post”, “/myAjax2/example1/example1.jsp”); - xhr.
setRequestHeader(“content-type”, “application/x-www-form-urlencoded”); - xhr.
send(“name=”+name);
- xhr.
- 事件
- xhr.
onreadystatechange= process;
- xhr.
1.4 根据区号获取省份和城市
index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script type="text/javascript">
var xhr;
function getContent()
// 获取区号
var code = document.getElementById("code").value;
// 1.创建XMLHttpRequest对象
createXMLHttpRequest();
// 2.和服务器端建立连接
xhr.open("post", "/myAjax2/servlet/CodeServlet"); // 请求 servlet
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
// 3.指定回调函数
xhr.onreadystatechange = process;
// 4.发送请求给服务器端
xhr.send("code=" + code);
// 后续当作模板工具类使用即可 ！！！
function createXMLHttpRequest()
if(window.ActiveXObject) // IE
xhr = new ActiveXObject('Microsoft.XMLHTTP');
else // not IE
xhr = new XMLHttpRequest();
function process()
if (xhr.readyState == 4) // 响应已经完毕
if (xhr.status == 200) // 200
// 获取返回值
var text = xhr.responseText;
// 将返回值写入到指定位置
var arr = text.split(",");
// document.getElementById("province").value = arr[0]; // 通过获取id的方式
document.form1.province.value = arr[0]; // 通过获取表单的方式
document.forms[0].elements[2].value = arr[1];
else
alert(xhr.status + " " + xhr.statusText);
</script>
</head>
<body>
<form action="" name="form1" >
区号<input type="text" name="code" id="code" onblur="getContent()"><br>
省份<input type="text" name="province" id="province" ><br>
城市<input type="text" name="city" id="city"><br>
<input type="submit" value="提交">
</form>
</body>
</html>
请求的 CodeServlet.java
public class CodeServlet extends HttpServlet
@Override
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
// 1.获取区号
String code = request.getParameter("code");
// 2.调用业务层根据区号获取省份城市
Map<String,String> map = new HashMap<String,String>();
map.put("010", "北京,北京");
map.put("0351", "山西,太原");
map.put("0311", "河北,石家庄");
map.put("0451", "黑龙江,哈尔滨");
map.put("024", "辽宁,沈阳");
// 处理区号不存在的情况
String content = map.get(code);
if (content == null)
content = "未知省,未知市";
// 3.返回结果（直接返回，不使用转发和重定向）
response.setContentType("text/html;charset=utf-8"); // 设置返回值的编码
response.getWriter().println(content); // jsp中为 out.println()
2. jQuery封装Ajax
2.1 语法
$.ajax(
url: "/myAjax2/example31/example1.jsp",
type: "GET",
data: name: name ,
async: true, // ------------------- 异步请求，默认true，同步需要改为 false ------------------------
dataType: "text", // 返回值的类型
success: function(result)
$("#nametip").html(result);
,
error: function(xhr)
alert(xhr.status + " " + xhr.statusText);
);
2.1 验证用户名是否可用
<script>
function checkName()
// 获取用户名
var name = $("#name").val();
// 发送Ajax请求 —— get请求
$.get("/myAjax2/example3/example1.jsp", "name=" + name, function(result)
$("#nametip").html(result);
);
// 发送Ajax请求 —— post请求
$.post("/myAjax2/example3/example12.jsp", name:name, function(result)
$("#nametip").html(result+"!");
);
</script>
3. JSON
JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式（重量级的是XML），采用完全独立于语言的文本格式，是 JavaScript 的原生格式
3.1 JSON的格式
-
JSON对象（ 键值对 ） — 键 的数据类型一定为字符串，可以不写 “”，写的话必须写双引号
var person = "name": "王五", "age": 25 // 获取值 person.name -----> 王五 -
普通数组（ [数据元素] ）
var arr = ["HTML", "CSS"] // 获取值 arr[0] -----> HTML -
对象数组
var users = ["id": 1, "username": "root", passwd: "admin", "id": 2, "username": "user", passwd: "123" ]; // 获取值 users[0].username -----> root -
不规则数据
var china = name: "中国", provinces: [ name:"山东省", cities:city:["临沂", "蒙阴"]， name:"河北省", cities:city:["石家庄", "张家口", "承德"] ] ; // 获取值 china.provinces[0].cities.city[0] -----> 临沂
3.2 JSON对象与JSON字符串的转换
JSON对象："name": "王五", "age": 25
JSON字符串：'"name": "王五", "age": 25'
JSON对象 —> JSON字符串
var str = JSON.stringify(obj)- var str = obj.toJSONString();
JSON字符串 —> JSON对象
var obj = JSON.parse(str)var obj = eval('(' + str + ')')eval()会执行内部的内容，谨慎使用- var obj = str.parseJSON();
4. 三级联动菜单
- 数据表（省市县三级区域一张表即可）
- 通过自关联外键建立上下级关系
将获取到的 list 区域数据，转为 json字符串，返回到前台
Gson gson = new Gson();
gson.toJson(list);
前端页面：
<style type="text/css">
select
width:300px;
height:30px;
#showdiv
width:920px;
margin:auto;
margin-top:200px;
</style>
<div id="showdiv">
<select name=以上是关于JavaLearn#（25）Ajax相关知识三级联动案例Bootstrap入门栅格系统排版表格字体图标等简单概述的主要内容，如果未能解决你的问题，请参考以下文章
JavaLearn#（28）MyBatis高级：无级联查询级联查询(立即加载结果映射延迟加载)多表连接查询MyBatis注解MyBatis运行原理面试题
请问用啥方式可以实现省市级联的效果呀 省市的数据是从数据库中查出来的