【JavaLearn】#（25）Ajax相关知识、三级联动案例、Bootstrap入门、栅格系统、排版、表格、字体图标等简单概述
1. 原生Ajax
异步访问，局部刷新。Ajax 为异步操作，使用 Ajax代表摒弃了 JavaEE的转发与重定向操作
Ajax的关键技术：
- 使用CSS构建用户界面样式，负责页面排版和美工
- 使用DOM进行动态显示和交互，对页面进行局部修改
- 使用XMLHttpRequest异步获取数据
- 使用JavaScript将所有元素绑定在一起
Ajax简单概述
1.1 原生Ajax使用步骤
-
创建 XMLHttpRequest 对象
function createXMLHttpRequest() {if (window.ActiveXObject) { // IExhr = new ActiveXObject('Microsoft.XMLHTTP');} else { // not IExhr = 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 500alert(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>Titletitle><script type="text/javascript">var xhr;function checkName() {// 获取用户名var name = document.getElementById("name").value;// (客户端验证) 判断用户名长度是否大于等于6if (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){ // IExhr = new ActiveXObject('Microsoft.XMLHTTP');}else{ // not IExhr = 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 500alert(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.接收nameString 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>Titletitle><script type="text/javascript">var xhr;function getContent(){// 获取区号var code = document.getElementById("code").value;// 1.创建XMLHttpRequest对象createXMLHttpRequest();// 2.和服务器端建立连接xhr.open("post", "/myAjax2/servlet/CodeServlet"); // 请求 servletxhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");// 3.指定回调函数xhr.onreadystatechange = process;// 4.发送请求给服务器端xhr.send("code=" + code);}// 后续当作模板工具类使用即可 ！！！function createXMLHttpRequest() {if(window.ActiveXObject){ // IExhr = new ActiveXObject('Microsoft.XMLHTTP');}else{ // not IExhr = 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 {@Overrideprotected 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="province" id="province" onchange="getCity()">select><select name="city" id="city" onchange="getCounty()">select><select name="county" id="county">select>
div><script>// 页面加载完成后，立即加载所有的省级行政区别写入指定的下拉列表中$(function(){$.ajax({url:"servlet地址",type:"get",data:{parentId:0},dataType:"text",success:function(res){// 返回的是JSON字符串，将它转换为JSON对象var arr = eval("(" + res + ")");// 生成option字符串var str = "";for(var i = 0; i < arr.length; i++){str += 'arr[i].areaId+'">'+arr[i].areaName+''}// 写到下拉列表中$("#province").html(str);// 调用getCity()getCity();},error:function(){}});});// 改变了省级行政区后，加载该省的市级行政区，并写入对应的下拉列表中function getCity(){var parentId = $("#province").val();$.ajax({url:"servlet地址",type:"get",data:{parentId:parentId},dataType:"text",success:function(res){// 返回的是JSON字符串，将它转换为JSON对象eval("var arr=" + res); // ============ 直接转换！！！！！！！！！！！// 生成option字符串var str = "";for(var i = 0; i < arr.length; i++){str += 'arr[i].areaId+'">'+arr[i].areaName+''}// 写到下拉列表中$("#city").html(str);getCounty();},error:function(){}});}//改变了市级行政区后，加载该市的行政区，并写入对应的下拉列表中function getCounty(){var parentId = $("#city").val();$.ajax({url:"servlet地址",type:"get",data:{parentId:parentId},dataType:"json", // ============ ajax 自动转换！！！！！！！！！！！success:function(arr) { // 自动转换数据// 生成option字符串var str = "";for(var i = 0; i < arr.length; i++){str += 'arr[i].areaId+'">'+arr[i].areaName+''}// 写到下拉列表中$("#county").html(str);},error:function(){}});}
script>
5. Bootstrap相关
Bootstrap是一组来自 Twitter 的前端框架，封装了HTML、CSS、JavaScript
Bootstrap教程，分为“全局CSS样式”、“组件”、“JavaScript插件”这几部分，构建响应式布局
5.1 入门
导入源数据（在 head 中）：
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
引入Bootstarp的CSS（在 head 中）：
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
引入 JS文件（在 body 下边）：
<script src="https://fastly.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous">script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">script>
基本模板：
doctype html>
<html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Bootstrap 101 Templatetitle><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">head><body><h1>你好，世界！h1><script src="https://fastly.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous">script><script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">script>body>
html>
5.2 栅格系统
Bootstrap 包含了一个响应式、移动设备优先、不固定的网格系统，可以随着设备或视口的增加而适当扩展，最多到12列，超过就到了下一行
<div class="container"> <div class="row"> <div class="col-*-*">div> <div class="col-*-*">div> div><div class="row">...div>
div><div class="container">
div>
相关类样式：
-
Container 类：栅格
-
row 类：表示一行
-
col-[screen style]-[percent]：列元素（percent选项使用个数即可，底层自动转换为百分比）
注意：可以同时指定多个 col- 样式，例如class="col-xs-8 col-lg-6"，代表在 xs、sm、md设备上为8列，在lg设备上为6列 -
内容应该放置在列内，且
只有列可以是行的直接子元素
设置偏移： 在 lg设备上占 6列，向右偏移3列
5.3 排版
可以创建标题、段落、列表及其他内联元素，实际上它是把大部分在HTML的基本标签加了样式
-
标题：
- 副标题
一级标题 副标题
- 副标题
-
页面主体：
中心内容段落
-
内联文本元素：
- 高亮：
高亮的内容: - 被删除的文本：
deleted text. - 插入文本：
document. - 着重：
rendered as bold text
- 高亮：
-
对齐：
<p class="text-left">Left aligned text.p> <p class="text-center">Center aligned text.p> <p class="text-right">Right aligned text.p> -
大小写：
<p class="text-lowercase">Lowercased text.p> <p class="text-uppercase">Uppercased text.p> <p class="text-capitalize">Capitalized text.p> -
其他
5.4 代码
代码内容（字体变红）
一整个代码块
cd ：标记用户通过键盘输入的内容
5.5 表格
想 table 标签应用 bootstrap 的样式，需要添加.table类
<table class="table"><tr><td>这是表格td><td>这是表格td><td>这是表格td>tr><tr><td>这是表格td><td>这是表格td>tr>table>
隔行变色（table-striped）： 带边框的表格（table-bordered）： 鼠标悬停（table-hover）： 紧缩表格（table-condensed）： 状态类（为行或者行的某个单元格添加状态）： 响应式表格（table-responsive）：
activesuccessinfowarningdanger
<table style=“width:768px;” class="table table-responsive"><tr><td>这是表格td><td>这是表格td><td>这是表格td>tr><tr><td>这是表格td>tr>
table>
5.6 字体图标
<p class="glyphicon glyphicon-heart">p>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！
