1. 程式人生 > >java前後臺數據互動【親測】

java前後臺數據互動【親測】

AJAX的POST方法傳值


寫在前面:

0.eclipse 工具下 Tomcat 部署 Java SSM框架的Maven專案的登入功能。(前提:ssm配置已完成,Tomcat部署已完成,java環境已配置)

1.資料庫準備(mysql)

(第8步應該在第一步完成!!!注意,由於在下一時疏忽,剛想起來才寫到了最後,讀者可以先看最後,建立bean)

2.登入介面的程式碼(前端程式碼)

3.Controller層

4.Service層

5.ServiceImpl層

6.Dao層

7.可以忽略。。。

8.bean:  User  和  AJAXResult

以下是AJAX的POST方法傳值

1.資料庫準備(mysql)

CREATE TABLE `user` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(15) NOT NULL,
  `userpswd` varchar(20) DEFAULT NULL,
  `loginacct` varchar(20) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8

建表後如圖所示

我添加了倆條資料(其實一條就好了。。。不影響)

2.登入介面的程式碼(前端程式碼)

<form id="loginForm" action="doLogin" method="post" class="form-signin" role="form">
        <h2 class="form-signin-heading"><i class="glyphicon glyphicon-user"></i> 使用者登入</h2>
		  <div class="form-group has-success has-feedback">
			<input type="text" class="form-control" id="loginacct" name="loginacct" placeholder="請輸入登入賬號" autofocus>
			<span class="glyphicon glyphicon-user form-control-feedback"></span>
		  </div>
		  <div class="form-group has-success has-feedback">
			<input type="text" class="form-control" id="userpswd" name="userpswd" placeholder="請輸入登入密碼" style="margin-top:10px;">
			<span class="glyphicon glyphicon-lock form-control-feedback"></span>
		  </div>
		  <div class="form-group has-success has-feedback">
			<select class="form-control" >
                <option value="member">會員</option>
                <option value="user">管理</option>
            </select>
		  </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" value="remember-me"> 記住我
          </label>
          <br>
          <label>
            忘記密碼
          </label>
          <label style="float:right">
            <a href="reg.html">我要註冊</a>
          </label>
        </div>
        <a class="btn btn-lg btn-success btn-block" onclick="dologin()" > 登入</a>
      </form>
<script src="jquery/jquery-2.1.1.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="layer/layer.js"></script>
    <script>
    while ("${param.errorMsg}"!=''){
    	layer.msg("${param.errorMsg}",{time:2000, icon:5,shift:6},function(){})
        break;
    }
    function dologin(){
    	//非空檢驗
    	var loginacct=$("#loginacct").val();
    	if(loginacct==''){
    		layer.msg("賬號不能為空",{time:2000, icon:5,shift:6},function(){})
    		return ;
    	}
    	var userpswd=$("#userpswd").val();
    	if(userpswd==''){
    		
    		layer.msg("密碼不能為空,請輸入",{time:2000, icon:5,shift:6},function(){})
    		return;
    	}   
 		//1.提交表單
 		/* $("#loginForm").submit(); */
 		
 		//2.AJAX提交資料
 		var loadingIndex=null;
 		$.ajax({
 			type : "POST",
 			url  : "doAJAXLogin",
 			data : {
 				"loginacct" : loginacct,
 				"userpswd"  : userpswd
 			},
 			//載入顯示
 			beforeSend : function(){
 				loadingIndex=layer.msg('玩命登入中...',{icon: 16});
 			},
 			success : function(result){
 				layer.close(loadingIndex);
 				if(result.success){
 					window.location.href="main";
 				}else{
 		    		layer.msg("登入賬號或密碼不正確,請重新輸入",{time:2000, icon:5,shift:6},function(){})

 				}
 			}
 		});
 		
    }
   
    </script>

 

前端程式碼用到了一個叫layer的東西,,,可以把彈出框寫的好看一點

比如:

我們谷歌瀏覽器的彈出框

而用了layer後的彈出框

顯然,用了layer後美觀一點哈哈哈哈

3.Controller層

@Controller
public class DispatcherController {
	@Autowired
	private UserService userService;
	
	//跳轉到登入頁面
	@RequestMapping("/login")
	public String login() {
		return "login";
	}
	//跳轉到主頁面
	@RequestMapping("/main")
	public String main() {
		return "main";
	}
	//表單方法登入
	@RequestMapping("/doLogin")
	public String doLogin(User user, Model model) throws Exception{
		User dbUser = userService.query4Login(user);
		//判斷使用者資訊是否存在
		if(dbUser != null) {
			return "main";
		} else {
			//登入失敗,提示資訊
			String errorMsg="登入賬號或密碼不正確";
			model.addAttribute("errorMsg", errorMsg);
			return "redirect:login";
		}
	}

//AJAX方法 POST提交登入
	
	@ResponseBody
	@RequestMapping("/doAJAXLogin")
	public Object doAJAXLogin(User user) {
		AJAXResult result=new AJAXResult();
		User dbUser = userService.query4Login(user);
		if(dbUser != null) {
			result.setSuccess(true);
		} else {
			//登入失敗,提示資訊
			result.setSuccess(false);
		}
		return result;
	}
}

 

4.Service層

public interface UserService {

	User query4Login(User user);

}

 

5.ServiceImpl層

@Service
public class UserServiceImpl implements UserService{

	@Autowired
	private UserDao userDao;


	public User query4Login(User user) {
		// TODO Auto-generated method stub
		return userDao.query4Login(user);
	}
}

 

6.Dao層

public interface UserDao {


	@Select("select * from user where loginacct=#{loginacct} and userpswd=#{userpswd}")
	User query4Login(User user);

	
}

7.部落格內容本來是打算寫的簡單一點,自己回顧的時候可以看得懂,但是想了想還是寫的詳細一點,萬一有別人看呢,嗯  如果哪裡有問題可以留言,有時間我會回答的....

如果哪裡有bug可以留言,我修改

哦哦哦。。。差點忘了

很關鍵,還有倆個bean沒有建立

 

8.bean:  User  和  AJAXResult

public class User {

	private Integer id;
	private String username;
	private String loginacct;
	private String userpswd;
	
	
	public String getUserpswd() {
		return userpswd;
	}
	public void setUserpswd(String userpswd) {
		this.userpswd = userpswd;
	}
	public String getLoginacct() {
		return loginacct;
	}
	public void setLoginacct(String loginacct) {
		this.loginacct = loginacct;
	}
	public Integer getId() {
		return id;
	}
	public void setId(Integer id) {
		this.id = id;
	}
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	
}

 

public class AJAXResult {

	private boolean success;

	public boolean isSuccess() {
		return success;
	}

	public void setSuccess(boolean success) {
		this.success = success;
	}
}

 

好了,到此一個ssm框架下的maven專案中的AJAX傳值就ojbk了,加油!!!(無bug,不人生)