mybatis學習-入門（6）-實際例子，輸入使用者註冊，並在離開使用者名稱輸入框時檢查使用者是否存在

阿新 • • 發佈：2019-01-11

我們使用bootstrap+mybatis+spring展示一個實際示例：輸入使用者註冊，並在離開使用者名稱輸入框時檢查使用者是否存在.

輸入使用者名稱，當焦點離開使用者名稱輸入框，檢查輸入的使用者名稱是否存在。不存在，則打對號，否則打叉號。

輸入有效的使用者名稱密碼後，點選提交，則建立使用者。

例子做的比較簡單，spring mvc的controller 和jsp頁面還有很多需要完善的，比如對輸入資料的校驗等等，只是為了說明整個mybatis+spring+jquery的處理流程。

首先：

我們需要在server端建立mybatis的對映檔案和介面（相當與DAO），這個在前面的例子中都有了；我們還需要建立一個usercontroller，能夠處理頁面請求，驗證使用者名稱是否存在和新增使用者等。controller程式碼如下：

package controller;

import model.baiuser;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
import dao.baiuserMapper;
@Controller
@RequestMapping("/background/user/")
public class UserController {
	@Autowired
	baiuserMapper userDao;
	
	@RequestMapping("toAddUserPage")
	public String toAddPage(Model model ) {
		return "/addUser";
	}
	
	@RequestMapping("add")
	public ModelAndView add( baiuser user) {
		userDao.insert(user);
		ModelAndView mav = new ModelAndView();
		mav.setViewName("/index");
		mav.addObject("addeduser", user);
		return mav;
	}	
	
	@RequestMapping("check_user_exist")
	public @ResponseBody String checkuserexist(String username){		
		if(userDao.selectByUsername(username) !=null){
			return "USER ALREADY EXIST";			
		}		
		return "OK";
	}	
}

那麼在前臺，我們需要有jsp頁面與controller互動。

body部分程式碼如下：

<body>
    <div class="container">
    <div class="hero-unit">
    <form action="${pageContext.servletContext.contextPath }/background/user/add.html">
      <div >
      <label  for="inputInfo">Input UserName</label>
      	<div id="user_check_div">
        	<input type="text" name="USERNAME"  id="checkname">      
      	</div>
      </div>
      <div>
      <label  for="inputInfo">Input UserPass</label>
      	<div >
        	<input type="text" name="PASSWORD" id="PASSWORD">      
      	</div>
      </div>      
  		<div >
    		<div >
      		 <button type="submit" class="btn">Register</button>
    	     </div>
  	    </div>   	
    </form>
   
    </div><!-- end of hero-unit -->
    </div><!-- end of contrainer -->

然後再寫一段java script程式碼，實現互動：

	<script type="text/javascript">
	$(function(){
		var str_checkname ="";
		$("#checkname").blur(
		    function(){
		    //start if
		    if($("#checkname").val()!=""&&$("#checkname").val()!=str_checkname){
		    //記錄上次填入的值
		    str_checkname = 	$("#checkname").val() ;
			$.ajax({
				type              : "POST",
		    	url                 : "${pageContext.servletContext.contextPath}/background/user/check_user_exist.html",
		    	data              :  {'username':$("#checkname").val()},
		    	success         :  function(data){
		    		                 //$("#ta1").val(data);
		    		                 if(data=="OK"){
		    		                	$('#check_ok').remove();
		    		                	$('#check_false').remove();
		    		                	$('#user_check_div').append("<i class=\"icon-ok-sign icon-2x\"  id=\"check_ok\" style=\"color:#6699CC\"></i>");
		    		                 }else{
			    		                $('#check_ok').remove();
			    		                $('#check_false').remove();		    		                	 
		    		                	$('#user_check_div').append("<i class=\"icon-remove-sign icon-2x\" id=\"check_false\" style=\"color:#CC6666\"></i>"); 
		    		                 }
		                    }
		    	});
		    }	//end if
		}); //end button2 click
	});
	

	</script>

當然，例子中使用了jquery、bootstrap和Font-Awesome，所以要引用相關的css和js檔案。

這樣整個就完成了。

注意，javascript程式碼一定要在jquery等等的js之後，否則不能成功執行。因為如果參考bootstrap的例子，css檔案都是在head部分載入的，而js都是在body部分的最後面載入，並且裡面有個註釋，說明這樣做是為了加快頁面載入速度。所以，我們的javascript程式碼一定要在，類似：

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

  <!-- <script type="text/javascript" src="WEB-LIB/bsie/js/jquery-1.7.2.min.js"></script> -->
  <script type="text/javascript" src="WEB-LIB/bsie/bootstrap/js/bootstrap.js"></script>
  <!--[if lte IE 6]>
  <script type="text/javascript" src="WEB-LIB/bsie/js/bootstrap-ie.js"></script>
  <![endif]-->

的後面。

mybatis學習-入門（6）-實際例子，輸入使用者註冊，並在離開使用者名稱輸入框時檢查使用者是否存在

mybatis學習-入門（6）-實際例子，輸入使用者註冊，並在離開使用者名稱輸入框時檢查使用者是否存在

Python 學習入門（6）—— 網頁爬蟲

Windows學習總結（6）——MindManager新手入門教程

Mybatis學習筆記（二）--入門程式

myBatis學習筆記（1）——快速入門

MyBatis 學習總結（一）——MyBatis 簡單介紹及快速入門

Mybatis快速入門——Mybatis學習總結（一）

maven入門（6）maven的生命周期

Java入門——（6）集合

myBatis學習筆記（10）——使用攔截器實現分頁查詢

Tomcat學習總結（6）——Tomca常用配置詳解

ASP.NET學習筆記（6）——jQuery的Ajax基本操作

Linux第二周學習筆記（6）

TensorFlow學習筆記（6）讀取數據

python學習筆記（6）--循環語句

java 入門（6）--面向對象初探

Yii框架學習入門（1）--YII的MVC概念及邏輯解析

筆記50 Mybatis快速入門（一）

Mybatis學習系列（二）Mapper映射文件

Mybatis學習系列（七）緩存機制

mybatis學習-入門（6）-實際例子，輸入使用者註冊，並在離開使用者名稱輸入框時檢查使用者是否存在

相關推薦