版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
今天做了一个ajax用json轻量级数据传输的登陆和打印列表也遇到了一些问题
首先遇到的就是前后端主要问题就是跨域问题我没有用到别的方法就只用到了请求权限问题吧servlet的请求头设置了一下不过我并不推荐用这种方法感觉有点不安全由于自己所学的知识有限先将就着用
response.setHeader("Access-Control-Allow-Origin","*");
第二个问题就是那个跳转路径 因为前端ajax用的是html写的我都用的绝对路径
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>登陆</title>
<link href="css/login.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div >
<h1>登陆</h1><br />
<input type="text" name="user" placeholder="请输入用户名"/>
<input type="password" name="pwd" placeholder="请输入密码"/>
<input type="text" name="code" placeholder="验证码"/><img url="#" /><br />
<input type="submit" value="提交" />
</div>
</body>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(":submit").on("click",function(){
// alert("hello");
console.log(
$("input[name=user]").val()+":"+
$("input[name=pwd]").val());
$.ajax({
type:"get",
url:"http://localhost:8080/JavaWeb/AjaxLogin",
data:{
user:$("input[name=user]").val(),
pwd:$("input[name=pwd]").val()
},
dataType:"json",
success:function(data){
console.log(data.u+":"+data.p);
if(data.bool == "true"){
window.location.href="home.html";
}else{
alert("账户或密码不正确");
}
}
})
});
})
</script>
</html>
因为时间原因我没写mvc形式的所以直接在servlet里写sql 我用的mysql
response.setCharacterEncoding("utf-8");
request.setCharacterEncoding("utf-8");
response.setHeader("Access-Control-Allow-Origin","*");
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
String user = request.getParameter("user");
String pwd = request.getParameter("pwd");
DButil dbutil = new DButil();
String sql = "select * from user where id = ? and name = ?";
Object[] obj = new Object[2];
obj[1] = user;
obj[0] = pwd;
Map<String,Object> map = new HashMap<String,Object>();
ResultSet rs = dbutil.DataQuery(sql,obj);
try {
while(rs.next()){
map.put("bool","true");
}
} catch (SQLException e) {
e.printStackTrace();
}finally{
dbutil.connClose(null,null,rs);
}
out.print(JSON.toJSONString(map));
System.out.print(user+":"+pwd);
System.out.println("响应成功");
out.flush();
out.close();
下面是sql别的你们自己搞
/*
Navicat MySQL Data Transfer
Source Server : localhost_3306
Source Server Version : 50505
Source Host : localhost:3306
Source Database : test
Target Server Type : MYSQL
Target Server Version : 50505
File Encoding : 65001
Date: 2019-10-28 13:06:21
*/
SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for book
-- ----------------------------
DROP TABLE IF EXISTS `book`;
CREATE TABLE `book` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(255) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=latin1;
-- ----------------------------
-- Records of book
-- ----------------------------
INSERT INTO `book` VALUES ('1', 'book1');
INSERT INTO `book` VALUES ('2', 'book2');
INSERT INTO `book` VALUES ('3', 'book3');
INSERT INTO `book` VALUES ('4', 'book4');
-- ----------------------------
-- Table structure for user
-- ----------------------------
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(255) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=latin1;
-- ----------------------------
-- Records of user
-- ----------------------------
INSERT INTO `user` VALUES ('1', 'root');
学到了几个知识点
1.response.setHeader("Access-Control-Allow-Origin","*"); // 设置请求头
2.
$.each(data,function(i){
template ="<tr><td>"+data[i].id +"</td><td>"+data[i].name +"</td></tr>";
$("tbody").append(template);
console.log(i);
})
JQ的each
3."jdbc:mysql://localhost:3306/watermarking?useUnicode=true&characterEncoding=utf-8" //连接mysql的中文问题
4.JSON.toJSONString(listMap) //factjsonJar包的使用