前后端分离java*ajax登陆和打印mysql列表

最新推荐文章于 2022-11-03 00:18:12 发布

这个世界太冷用代码来暖暖

最新推荐文章于 2022-11-03 00:18:12 发布

阅读量297

点赞数

分类专栏： html_js_Jquery

本文链接：https://blog.csdn.net/weixin_42202498/article/details/102779160

版权

html_js_Jquery 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

今天做了一个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包的使用

这个世界太冷用代码来暖暖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前后端分离java*ajax登陆和打印mysql列表

今天做了一个ajax用json轻量级数据传输的登陆和打印列表也遇到了一些问题首先遇到的就是前后端主要问题就是跨域问题我没有用到别的方法就只用到了请求权限问题吧servlet的请求头设置了一下不过我并不推荐用这种方法感觉有点不安全由于自己所学的知识有限先将就着用 response.setHeader("Access-Control-Allow-Origin","*");第二个问题就是那...
复制链接

扫一扫