2. 程式人生 > >後臺。利用Jquery與Ajax實現使用者名稱校驗小Demo

後臺。利用Jquery與Ajax實現使用者名稱校驗小Demo

阿新 • • 發佈：2018-11-17

Test類

package com.wangchao.controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

/**
 * @Auther:WangChao
 * @ClassName:TestController
 * @Date
 
:Created in 2018/9/8 19:18
 * @Despriction:後臺程式碼
 * @Modify By:
 */
@RestController
public class TestController {
    @RequestMapping("/test")
    public String test(String name){
    //test函式接收前端傳過來的name
        List<String> names = new ArrayList<>();
        //當作後臺儲存使用者名稱資料的陣列
        Collections.addAll(names,"zhangshan"
 
,"lisi","wangwu");
        //新增內容
        if (names.contains(name)){
        //如果陣列的內容包含傳進來的name
            return "no";
            //返回no
        }else {
            return "yes";
            //否則返回yes
        }
    }
}

前端程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset
 
="UTF-8">
    <title>Title</title>
    <!--匯入jquery-->
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            //定義起始函式
            $("#input1").blur(function () {
                //找到id為input1的那個模組呼叫blur當失去焦點事觸發事件
                var namevalue = this.value;
                //拿到當前作用模組的valun值
                $.post("/test",{name:namevalue},function (data) {
                    //呼叫post請求作用的方法為後臺test函式帶上資料namevalue對應name
                    //並獲取響應回來的資料data
                    if ("no"==data){
                        //如果後臺響應的資料為no
                        $("#span1").html("已存在")
                        //那麼在id為span1的標籤裡面新增文字已存在
                    }else {
                        $("#span1").html("恭喜可用")
                        //反之在id為span1的標籤裡面新增文字恭喜可用
                    }
                })
            })
        })
    </script>
</head>
<body>
  <div><input type="text" id="input1" >使用者名稱</input><span id="span1"></span></div>
</body>
</html>

相關推薦

後臺。利用Jquery與Ajax實現使用者名稱校驗小Demo

Test類 package com.wangchao.controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annot

利用jquery實現Ajax技術，post方式傳值中文亂碼問題的解決辦法。

連結：http://www.jb51.net/article/31791.htm jquery的ajax()函式傳值中文亂碼解決方法介紹，需要的朋友可以參考下 複製程式碼程式碼如下: $.ajax({  　 dataType : ‘json',type :

利用jquery的ajax實現非同步請求傳送資料到後臺

很多時候，作為一個使用者在前臺操作的時候，處理資料的時候並不一定要後臺實時處理然後再返回訊息，這樣，我們可以實用jquery的$.ajax方法實現非同步請求，在頁面不重新整理的情況下，將資料傳到後臺，

Java Web開發(五) JavaScript庫jQuery學習(3) jQuery與Ajax的應用(1)

  關於jQuery選擇器的知識這裡就先不介紹了，這裡向大家介紹一種比較厲害的技術，就是jQuery的Ajax應用，哈哈哈，我們當然先了解一些先進的技術啦，之後再為大家介紹jQuery選擇器和其他知識。 現在讓我們進入強大的jQuery的Ajax應用學習中吧。  

利用JQuery傳送ajax請求進行站內搜尋

前臺程式碼：（注意要匯入JQuery包，在lib中也要匯入gson-x.x.x.jar包） <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> &l

利用JQuery傳送ajax請求進行站內搜尋(Hibernate篇——超簡單系列)

此次任務是簡單的一次hibernate框架小訓練，利用上一篇的專案修改 1.導包，找到Hibernate-release-5.x.x.Final\lib\required下的所有包，copy到專案WEB-INF\lib下 2.開始編寫資料庫表（名字好煩，就亂取了） //建表h

AJAX 利用JQuery實現AJAX請求

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JqueryAjax.aspx.cs" Inherits="XXX.WebApp.JqueryAjax" %> <!DOCTYPE h

JavaScript，jQuery與Ajax的關係

首先讓我們來看看它們分別是什麼： 1、（JavaScript）JS是一門前端語言。 2、Ajax是一門技術，它提供了非同步更新的機制，使用客戶端與伺服器間交換資料而非整個頁面文件，實現頁面的區域性更新。 3、jQuery是一個框架，它對JS進行了封裝，使其更方便使用。jQuery使得JS

struts中利用jquery的$.ajax方法來動態獲得圖片以及資訊

最近在做一個系統，在此過程中，遇到了一個問題，就是如何能不重新整理整個頁面， 從而動態的能從資料庫中獲得圖片以及其他有用的需要顯示以及其他的資訊到頁面。 當然離不開jquery的$.ajax(); 這裡直接說我的解決方法：($.ajax()方法不多談) 首先，要用到ajax

jQuery與AJAX----jQuery中ajax介面

jQuery與AJAX整理自《鋒利的jquery》第二版 第六章 1.ajax的優勢與不足 1.1ajax的優勢 不需要外掛支援。 ajax不需要任何瀏覽器外掛，就可以被絕大多數主流瀏覽器支援，使用者只需要允許js在瀏覽器上執行即可。 優秀的使用

jQuery與Ajax小練習-二級聯動（從Oracle資料庫獲取資料）

之前做了個簡單的二級聯動小練習，這次算是加強版的吧，希望能對大家有點用處。 //主頁面 <html> <head> <meta charset="UTF-8"> <title>Insert titl

jQuery與Ajax的應用

jQuery與Ajax的應用 Ajax Ajax 即“Asynchronous Javascript An

Ajax異步方式實現登錄與參數的校驗

hasclass prim ann idcard lock stc item code repl 登錄代碼 這個是使用Bootstrap3的組件功能實現的 <div class="login_con_R"> <

Unity3D之UGUI——利用Camera與RawImage元件製作3D遊戲小地圖

對於場景較大的3D場景遊戲，玩家不能夠全域性觀察自己與敵人的位置以及地圖全貌，因此製作小地圖顯示自己與敵人在地圖上的位置是必要的！       現在我就利用一個小的Demo來製作一小地圖，我在製作中查閱了網上資料，製作了一個demo，但是由於只能顯示在我新增在T

jquery ui datepicker起始日期與結束日期的校驗

1.引言 之前做的一個專案中用到jquery datepicker,看了一些網上的例子，但是不夠完整。 http://blog.csdn.net/redarmy_chen/article/details/7400723這是類似的例子，但是不夠完整，dateText型別為D

力所能及之springmvc+ajax+jquery+json實現登入非同步校驗使用者名稱是否存在

小狼最近在想能不能用springmvc實現後臺非同步校驗 開發環境：windows7純淨版   myeclipse8.6   jquery-1.3.2 需要jar檔案   ：                                                工

java與js非空校驗

java與js非空校驗的使用 java import org.springframework.util.StringUtils; public class StringUtil { /** * 判斷字串是否為空 */ public static boolean

用Ajax實現非同步校驗使用者名稱是否存在

一、案例分析 1.<input name="username">失去焦點時，使用$.post()將使用者名稱以ajax的方式傳送給伺服器 2.伺服器獲取使用者名稱後，並通過使用者名稱查詢使用者，如果使用者存在，返回不可用提示；如果使用者名稱可用，返回可用提

利用jslint對javascript開展語法校驗

利用jslint對javascript進行語法校驗初步試用jslint對javascript進行語法校驗，事例程式碼如下： package com.yonge.validateScript; import java.io.File; import java.io.FileReader; import jav

android客戶端與javaweb服務端通訊——登入小demo的啟示

前兩天討論了javaweb專案連線mysql資料庫的注意事項，是因為剛剛租了一臺ecs雲伺服器，在上面搭載mysql要比Oracle方便很多，今天我們來探討一下android端與服務端通訊的方式方法，更多的是注意事項。 先說服務端，如果查詢成功，就返回一個由物件轉換而成的j