學習筆記：IDEA、原生ajax的三道練習題、Markdown

来源:https://www.cnblogs.com/donkey-boy/archive/2019/04/04/10645950.html
-Advertisement-
Play Games

前言 該從何說起呢？想寫博客好久了，正好這個學期課很少(大三)，可以靜下心來寫點東西(雖然事情依舊很多)，總感覺記錄和分享是一件很酷的事情。第一篇博客，第一次使用Markdown寫博客，第一次使用IDEA，所以有什麼錯誤的地方請指出。 一.原生ajax 關於AJAX = Asynchronous J ...


前言

該從何說起呢？想寫博客好久了，正好這個學期課很少(大三)，可以靜下心來寫點東西(雖然事情依舊很多)，總感覺記錄和分享是一件很酷的事情。第一篇博客，第一次使用Markdown寫博客，第一次使用IDEA，所以有什麼錯誤的地方請指出。

一.原生ajax

關於AJAX = Asynchronous JavaScript and XML（非同步的 JavaScript 和 XML）。AJAX 不是新的編程語言，而是一種使用現有標準的新方法。AJAX 是一種用於創建快速動態網頁的技術。通過在後臺與伺服器進行少量數據交換，AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。
詳情請移步w3c AJAX。
在學習ajax的原理之後，有三個簡單的例子：

1.實時驗證用戶名是否存在

實時驗證用戶名是否存在，多用於註冊的時提醒用戶更換用戶名，即有效性驗證。
如cnblog註冊時當輸入信息後，失去焦點實時判斷信息是否可用。
cnblog註冊
首先模擬一個後臺servlet

package test.servlet;

import net.sf.json.JSONObject;
import test.utils.DBUtil;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.*;

@WebServlet(name = "AjaxServlet",urlPatterns = "/AjaxServlet")
public class AjaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        Connection con;
        String exist = "true";
        try {
            con = DBUtil.getInstance().getConnection();
            String sql = "select count(*) from stu where name = ?";
            PreparedStatement pStatement = con.prepareStatement(sql);
            pStatement.setString(1, request.getParameter("username"));
            ResultSet resultSet = pStatement.executeQuery();
            while (resultSet.next()) {
                if (resultSet.getInt(1)==0) {
                    exist = "false";
                }
            }
            JSONObject jsonObject = new JSONObject();
            jsonObject.put("exist", exist);
            response.getWriter().write(jsonObject.toString());
            System.out.println(jsonObject.toString());

        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }
}

這段代碼的邏輯簡單：接受doget請求得到參數username，從資料庫里查詢用戶名是否存在，最後將結果轉化成json數據響應到前臺。

之前一直使用Eclipse，第一次使用IDEA，很不熟悉，其中新建servlet ，IDEA是這樣的註解@WebServlet(name = "AjaxServlet"),而Eclipse是@WebServlet("/AjaxServlet"),在IDEA中用預設的註解會有404問題,必須使用這樣的註解@WebServlet(name = "AjaxServlet",urlPatterns = "/AjaxServlet")或者@WebServlet("/AjaxServlet"),或者配置web.xml文件。

接下來就是前臺頁面了

<body>
    USERNAME<input type="text" id="username" name="username"  onblur="exist('username')"/><span id="it"></span><br>
    PASSWORD<input type="password" id="pwd" name="pwd"><br>
    <input type="submit" value="提交" />
<script type="text/javascript">
    var xhr = new XMLHttpRequest();
    function ajax(url,id){
        var input = document.getElementById(id);
        var span = document.getElementById("it");
        var value = input.value;
        xhr.open("GET",url+"?username="+value,true);
        xhr.onreadystatechange = function(){
            if (xhr.readyState == 4 && xhr.status == 200){
                var temp = xhr.responseText;
                var data = eval("("+temp+")");
                if (data.exist=="true"){
                    span.innerText = "該用戶已存在！";
                }else{
                    span.innerText = "命名正確！！";
                }
            }
        };
        xhr.send(null);
    };
    function exist(id){
        var input = document.getElementById(id);
        var value = input.value;
        if(value){
            ajax("AjaxServlet",id);
        }else{
            var span = document.getElementById("it");
            span.innerText = "輸入為空，請輸入內容！！";
        }
    }
</script>
</body>

寫的比較初級，剛學javaScript沒多久，原諒我的菜^_^，簡單來說這段代碼就是DOM找元素綁定到onblur(失去焦點事件)，當觸發事件在判斷是否有值，如果有值的話，ajax發送請求，發送成功，伺服器響應，返回數據，接著利用eval("("+temp+")")處理成json字元串，進行解析並判斷。
預覽圖

2.省市區三級聯動

省市區三級聯動多用於填寫地址，為防止用戶輸入信息有效，採取下拉框選項供用戶選擇。
例如淘寶網的地址填寫。
淘寶網收貨地址
資料庫設計
資料庫設計
這樣設計的好處是便於維護，如果增加第四級，直接插入數據表明super_id就可以了，不用繼續增加表，從而降低耦合性。
後臺servlet代碼

package test.servlet;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import test.pojo.Postion;
import test.untils.DBUtil;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.*;
import java.util.ArrayList;
import java.util.List;

@WebServlet(name = "AjaxServlet",urlPatterns = "/AjaxServlet")
public class AjaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        Connection con ;
        String sql ="select * from postion where super_id=?";
        List<Postion> list = new ArrayList<>();
        int super_id = Integer.parseInt(request.getParameter("super_id"));
        try {
            con = DBUtil.getInstance().getConnection();
            PreparedStatement pst = con.prepareStatement(sql);
            pst.setInt(1,super_id);
            ResultSet resultSet = pst.executeQuery();
            while(resultSet.next()){
                Postion postion = new Postion();
                postion.setId(resultSet.getInt(1));
                postion.setName(resultSet.getString(2));
                postion.setSuper_id(resultSet.getInt(3));
                list.add(postion);
            }
            JSONArray json = JSONArray.fromObject(list);
            JSONObject jsonObject = new JSONObject();
            jsonObject.put("potions",json);
            System.out.println(jsonObject.toString());
            response.getWriter().write(jsonObject.toString());
        } catch ( SQLException e) {
            e.printStackTrace();
        }
    }
}

這段代碼也寫的比較簡單，主要的邏輯是接受doget請求得到參數super_id，從資料庫里查詢super_id匹配的詞條，放入List中最後將結果轉化成json數據響應到前臺。
下麵是前臺代碼

<body>
    省<select id = "province" ></select>
    市<select id = "city"></select>
    區<select id = "region"></select>
<script type="text/javascript">
    var xhr = new XMLHttpRequest();
    var province = document.getElementById("province");
    var city = document.getElementById("city");
    function ajax(level,super_id) {
        var type = document.getElementById(level);
        xhr.open("GET","AjaxServlet?super_id="+super_id,true);
        xhr.onreadystatechange = function (ev) {
            if (xhr.readyState == 4 && xhr.status ==200){
                var temp = xhr.responseText;
                var data = JSON.parse(temp);
                var innerhtml = "";
                for (i in data.potions){
                    innerhtml+="<option value=";
                    innerhtml+=data.potions[i].id;
                    innerhtml+=">";
                    innerhtml+=data.potions[i].name;
                    innerhtml+="</option>";
                }
                type.innerHTML = innerhtml;
            }
        }
        xhr.send(null);
    }
    (function () {
        ajax("province",0);
    }());
    province.onchange = function () {
        var index = province.selectedIndex;
        ajax("city",province[index].value);
    };
    city.onchange = function () {
        var index = city.selectedIndex;
        ajax("region",city[index].value);
    }
</script>
</body>

首先省級的super_id=0,當html載入的時候首先把省級的元素填充滿，之後通過onchange事件綁定得到選中的option的value。之後發送請求，返回數據，轉化解析json。
預覽圖

3.無刷新添加

無刷新添加是ajax應用的典型代表，原始添加數據，首先發送顯示所有數據的請求，請求應答之後，返回數據，顯示在頁面上，而添加請求之後要重新載入頁面重新發送顯示所有頁面的請求，這時候就要刷新了。而利用ajax的方法，很容易的解決這個問題。
下麵貼出servlet代碼

package test.servlet;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import test.pojo.Topic;
import test.untils.DBUtil;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;


@WebServlet(name = "ShowAllServlet",urlPatterns = "/ShowAllServlet")
public class ShowAllServlet extends HttpServlet {


    public ShowAllServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        Connection con = DBUtil.getInstance().getConnection();
        List<Topic> list = new ArrayList<>();
        try {
            PreparedStatement pst =con.prepareStatement("select * from topic");
            ResultSet resultSet = pst.executeQuery();
            while (resultSet.next()){
                Topic topic = new Topic();
                topic.setId(resultSet.getInt(1));
                topic.setContent(resultSet.getString(2));
                list.add(topic);
            }
            JSONArray jsonArray = JSONArray.fromObject(list);
            JSONObject jsonObject = new JSONObject();
            jsonObject.put("topics",jsonArray);
            response.setContentType("application/html;charset=utf-8");
            response.getWriter().write(jsonObject.toString());
            System.out.println(jsonObject.toString());
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }


    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

}

這個是顯示所有內容的servlet，這個很簡單就不多說了。

package test.servlet;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import test.pojo.Topic;
import test.untils.DBUtil;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

@WebServlet(name = "AddAction",urlPatterns = "/AddAction")
public class AddAction extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        Connection con = DBUtil.getInstance().getConnection();
        try {
            PreparedStatement pst =con.prepareStatement("insert topic values(null,?)");
            pst.setString(1,request.getParameter("content"));
            pst.execute();
            JSONObject jsonObject = new JSONObject();
            jsonObject.put("status",1);
            response.setContentType("application/html;charset=utf-8");
            response.getWriter().write(jsonObject.toString());
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    }
}

AddActio從資料庫中插入數據，如果插入成功，status=1,響應到前臺進行判斷。
下麵是前臺代碼

<body>
    <div id = "content">

    </div>
    請輸入內容<textarea id="input">

    </textarea>
    <button id="bt">添加</button>
<script type="text/JavaScript">
    var xhr = new XMLHttpRequest();
    var area = document.getElementById("input");
    var bt = document.getElementById("bt");
    bt.onclick = function () {
        var text = document.getElementById("content");
        xhr.open("POST","AddAction?content="+area.value,true);
        var innerHtml = text.innerHTML;
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var temp = xhr.responseText;
                var result = eval("("+temp+")");
                if (result.status==1){
                    innerHtml+=area.value;
                }
                innerHtml+="<hr>";
                text.innerHTML = innerHtml;
            }
        }
        xhr.send(null);
    };
    function ajax() {
        var text = document.getElementById("content");
        xhr.open("GET","ShowAllServlet",true);
        var innerHtml ="";
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var temp = xhr.responseText;
                var result = eval("("+temp+")");
                for(i in result.topics){
                    innerHtml+=result.topics[i].content;
                    innerHtml+="<hr/>";
                }
                text.innerHTML = innerHtml;
            }
        }
        xhr.send(null);
    }
    (function () {
        ajax();
    }());
</script>
</body>

首先請求顯示所有內容，收到應答的數據，將數據放到塊中，添加數據後單擊按鈕，觸發onclick事件，發送請求，返回status值，判斷是否添加成功，如果添加成功直接放到塊中，從而避免刷新(重新發送顯示所有內容的請求)。
預覽圖

關於IDEA

第一次用IDEA，從Eclipse到IDEA真的不熟悉，項目模塊的概念不一樣，導入jar包的方式讓我費解，Artifacts的打包方式，一臉懵逼，這些都不是關鍵問題，關鍵的是我電腦打開IDEA需要1分多鐘，真的快o(╥﹏╥)o了，打開eclipse間接性抽搐，哎，欲哭無淚，省了幾頓飯錢，忍痛從8g記憶體換到12g記憶體，沒什麼多大用。好恨，當初騙我買學習本的那個家伙！！！！
推薦一個關於IDEA的學習教程，寫的很棒，這是地址

關於Markdown

之前準備用sublime Text3的插件寫博客，sublime Text3的插件下載如果不能**就很難受，網賊慢，我自己搗鼓半天發現有點問題，之後就改用vscode寫markdown的文件，這篇博客就是利用vscode 的插件Markdown Preview Enhanced所完成的，怎麼說呢？用markdown寫文檔很酷(^▽^*)。
vscode

最後

一直都想寫博客，以為就是寫點文字貼點兒圖片代碼，第一次寫，寫到這裡真的很費神，首先語言組織，然後大致的格式，最重要的是技術的理解，是，寫是這麼寫，但為什麼這麼寫，你對這個技術的理解是否到位，是否會把別人帶到坑裡，這些都要考慮，這篇博客就圖個樂呵，真的寫的很差勁，對技術的理解也可能沒有到位，語言組織能力也比較差，不過這是一個過程，我會不斷的成長，提成各項的能力。加油，努力。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Android之Retrofit詳解（轉載）
    說明：該文章轉載於https://www.jianshu.com/p/a3e162261ab6 前言 在Andrroid開發中，網路請求十分常用 而在Android網路請求庫中，Retrofit是當下最熱的一個網路請求庫 image image 今天，我將獻上一份非常詳細Retrofit v2.0的 ...
  • CoreFoundation對象的記憶體管理
    近來沒什麼新項目做，想學習一些swift開源項目，看了幾個文件感覺有點懵，可能水平還沒達到，等用到具體內容的時候再去仔細看吧。 關於現在的項目，想想單元測試還可以完善一下，就在framwork工程中寫了一些測試用例。準備開始測試之前，先用product-analyze（快捷鍵cmd+shift+b） ...
  • Android音視頻之AudioTrack播放音頻(二)
    前一篇講瞭如何錄製wav音頻文件，本篇就來講講如何播放wav文件，這裡就是使用AudioTrack來播放音頻，確切的說是播放pcm格式數據，使用AudioTrack播放也沒什麼難度，主要就是將數據寫入到AudioTrack中就可以了，先貼代碼 播放的方法，是傳入文件路徑，AudioRecordMan ...
  • Android音視頻之AudioRecord錄音(一)
    在音視頻開發中，錄音當然是必不可少的。首先我們要學會單獨的錄音功能，當然這裡說的錄音是指用AudioRecord來錄音，讀取錄音原始數據，讀到的就是所謂的PCM數據。對於錄音來說，最重要的幾個參數要搞明白： 1、simpleRate採樣率，採樣率就是採樣頻率，每秒鐘記錄多少個樣本。 2、channe ...
  • Android studio 2 版本升級 Android studio 3 版本註意事項
    1. compile 需要改成 implementation 或者 api例：implementation 'com.android.support:support-v4:23.4.0'詳細規則 https://blog.csdn.net/yuzhiqiang_1993/article/detail ...
  • iOS - 關於數據持久化
    摘自cocos 一、什麼是持久化 所謂的持久化，就是將數據保存到硬碟中，使得在應用程式或機器重啟後可以繼續訪問之前保存的數據。 二、沙盒是什麼 2.1 沙盒簡介及獲取沙盒路徑 沙盒（sandbox）:每一個App都有一個存儲空間。iOS系統為每個應用程式創建自己的目錄，每個應用程式只能訪問自己的目錄 ...
  • 前端經典面試題：如何理解 HTML 語義化？
    本文最初於 2018 09 21 發佈於 "知乎" ，後在 "《重學前端》" 專欄的學習中，重新複習整理，發佈於 "Github" 上，並計劃寫一系列前端學習相關的文章。歡迎 star 。 HTML 語義化 簡單來說，我們可以理解為：用正確的標簽做正確的事情。 例如： 段落用 p 標簽，標題用 h ...
  • 獲取屏幕翻轉：var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
    var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'，這段是為了獲取移動端屏幕是否翻轉（手機重力感應等引起屏幕長寬變化之類的） 'orientationchange' in window 這個是判 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類