AJAX
是 异步的js 和 xml
是一种无需重新加载整个网页的情况下,能够更新部分网页的技术
get: 参数是写在url里面 (长度有限制) 相对不安全 高效
post: 参数是写在http 包体里面的 (长度无限制) 相对安全
JQuery
是js 的一个封装库
导入
网页登入写法
ssm 常规写法 : jsp页面 配合dao mapper controller 进行登入逻辑
jsp
<form action="${pageContext.request.contextPath}/user/login.do"
method="post">
用户姓名:<input type="text" name="username"><br><br><br>
用户密码:<input type="text" name="password"><br><br><br>
<input type="submit" value="添加" >
</form>
js硬核实现
硬核方法 和写安卓网络连接的工具类有点类似
jsp:
<form action="${pageContext.request.contextPath}/user/login2.do"
method="post">
用户姓名:<input type="text" id="username" name="username"><br><br><br>
用户密码:<input type="text" id="password" name="password"><br><br><br>
<input type="button" value="登入" οnclick="postLogin()"/>
</form>
js:
<script type="text/javascript">
//1.获取表单中的值
function postLogin() {
var username=document.getElementById("username").value;
var password = document.getElementById("password").value;
var params = "username="+username+"&password="+password;
console.log(params);
//2.创建XMLHttpRequest对象
var request = new XMLHttpRequest();
//3.发送请求
request.open("post","${pageContext.request.contextPath}/user/login2.do",true);
//设置请求头,一定要设置请求头
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
request.send(params);
//4。监听状态
request.onreadystatechange =function () {
if (request.readyState == 4 && request.status ==200){
var aaa = request.responseText;
if(aaa=="success")
alert("登入成功");
else
alert("失败");
}
}
}
</script>
controller
@RequestMapping("login.do")
public String login(TbUser user){
int count = userService.login(user);
if(count == 0){
System.out.println("登入失败");
return "forward:../index.jsp";
}else{
System.out.println("登入成功");
return "redirect:findAll.do";
}
}
Ajax + JQuery
听方便
jsp:
<table border="1">
<tr>
<td colspan="2" align="center">GET的登录请求,使用jquery实现</td>
</tr>
<tr>
<td>用户名:</td>
<td><input type="text" name="username" id="username"/></td>
</tr>
<tr>
<td>密码名:</td>
<td><input type="text" name="password" id="password"/></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="登录" id="loginBtn" οnclick="postlogin();">
</td>
</tr>
</table>
js:
<script type="text/javascript">
function postlogin() {
var username = $('#username').val();
var password = $('#password').val();
$.ajax({
type:'post',
url:"${pageContext.request.contextPath}/user/login2.do",
data:{
username:username,
password:password
},
success:function (data) {
alert(data);
if(data=="success111"){
}
},
error:function () {
alert("失败");
}
})
}
</script>