前端与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);

	
}

很关键，还有俩个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了，加油！！！