【JavaLearn】（25）Ajax相关知识、三级联动案例、Bootstrap入门、栅格系统、排版、表格、字体图标等简单概述

最新推荐文章于 2022-10-27 16:57:16 发布

噗嗤

最新推荐文章于 2022-10-27 16:57:16 发布

阅读量145

点赞数

分类专栏： JavaLearn 文章标签： ajax bootstrap javascript

本文链接：https://blog.csdn.net/weixin_44022996/article/details/124677129

版权

JavaLearn 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

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.open(“post”, “/myAjax2/example1/example1.jsp”);
- xhr.setRequestHeader(“content-type”, “application/x-www-form-urlencoded”);
- xhr.send(“name=”+name);
事件
- xhr.onreadystatechange = process;

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="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 += 
                        '<option value="'+arr[i].areaId+'">'+arr[i].areaName+'</option>'
                }
                // 写到下拉列表中
                $("#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 += 
                        '<option value="'+arr[i].areaId+'">'+arr[i].areaName+'</option>'
                }
                // 写到下拉列表中
                $("#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 += 
                        '<option value="'+arr[i].areaId+'">'+arr[i].areaName+'</option>'
                }
                // 写到下拉列表中
                $("#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">     <!-- 多设备运行 -->
<!-- 上述3个meta标签*必须*放在【最前面】，任何其他内容都*必须*跟随其后！ -->

引入Bootstarp的CSS（在 head 中）：

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<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 下边）：

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://fastly.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>


<!-- 加载 Bootstrap 的所有 JavaScript 插件。也可以根据需要只加载单个插件。 -->
<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">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <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>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://fastly.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <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列
内容应该放置在列内，且只有列可以是行的直接子元素

设置偏移： <div class="col-lg-6 col-lg-offset-3"> 在 lg设备上占 6列，向右偏移3列

5.3 排版

可以创建标题、段落、列表及其他内联元素，实际上它是把大部分在HTML的基本标签加了样式

标题：
- 副标题<h1> 一级标题 <small> 副标题 <small> </h1>
页面主体： <p class="lead"> 中心内容段落 </p>
内联文本元素：
- 高亮： <mark> 高亮的内容 </mark>:
- 被删除的文本：<del> deleted text. </del>
- 插入文本：<ins> document. </ins>
- 着重：<strong>rendered as bold text</strong>

对齐：

<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 代码

<code> 代码内容（字体变红） </code>

<pre> 一整个代码块 </pre>

<kbd> cd <kbd>：标记用户通过键盘输入的内容

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 class="table table-striped">

带边框的表格（table-bordered）：<table class="table table-bordered">

鼠标悬停（table-hover）：<table class="table table-hover">

紧缩表格（table-condensed）： <table class="table table-condensed">

状态类（为行或者行的某个单元格添加状态）：

鼠标悬停在行或单元格上时所设置的颜色：active
标识成功或积极的动作：success
标识普通的提示信息或动作：info
标识警告或需要用户注意：warning
标识危险或潜在的带来负面影响的动作：danger

响应式表格（table-responsive）：

<!-- 指定表格宽度为768px。这样表格在小于768px设置上会出现一个水平的滚动条 -->
<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>  <!-- 就可以显示图标 -->

噗嗤

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【JavaLearn】（25）Ajax相关知识、三级联动案例、Bootstrap入门、栅格系统、排版、表格、字体图标等简单概述

目录1. 原生Ajax1.1 原生Ajax使用步骤1.2 验证用户名是否可用1.3 总结1.4 根据区号获取省份和城市2. jQuery封装Ajax2.1 语法2.1 验证用户名是否可用3. JSON3.1 JSON的格式3.2 JSON对象与JSON字符串的转换4. 三级联动菜单5. Bootstrap相关5.1 入门5.2 栅格系统5.3 排版5.4 代码5.5 表格5.6 字体图标1. 原生Ajax异步访问，局部刷新。Ajax 为异步操作，使用 Ajax代表摒弃了 JavaEE的转发与重定向操作
复制链接

扫一扫