ajax+servlet+mybatis 搭建网站

最新推荐文章于 2025-06-27 20:53:25 发布

bw_yyziq

最新推荐文章于 2025-06-27 20:53:25 发布

阅读量1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：架构 jquery ajax mybatis 文章标签： servlet ajax jQuery maven mybatis

本文链接：https://blog.youkuaiyun.com/bw_yyziq/article/details/79440176

架构同时被 3 个专栏收录

5 篇文章

订阅专栏

mybatis

2 篇文章

订阅专栏

jquery

1 篇文章

订阅专栏

最近忙于搞工程实践，一个基于机器学习的电影推荐系统，除了算法部分外还需要搭建一个展示用的网站，由于网站的功能不是很复杂，本来打算用ssm做架构，最后想想决定不用Spring和SpringMVC，只用一个MyBatis，前后台的交互用ajax+servlet来实现。现记录一下以备以后翻阅。

开发工具：Eclipse，Sublime
开发环境：jdk1.8，mysql-5.7.20，tomcat8，Maven
涉及：jQuery，ajax，servlet，MyBatis，

一、前端界面

点顶部导航栏登录后弹出这个登录框，页面具体的代码就不贴了，关键代码下面都有，完整的可以点击这里下载

这里写图片描述

二、以登录为例的前后台交互

ajax部分

js获取到用户输入的信息，然后传递给后台servlet

1.登录部分html代码：

<!--用户名-->
<input id="signin-inp1" name="username" autocomplete="off" placeholder="用戶名" type="text">
<!--密码-->
<input id="signin-inp2" name="password" autocomplete="off" placeholder="密码" type="password">
<!--登录按钮-->
<input value="登 录" hidefocus="true" id="btn-signin-inp" class="btn-sign-inp" type="button" onclick="login()">

2.登录部分js代码：

//登录
function login() {

    var username = $("#signin-inp1").val();
    var password = $("#signin-inp2").val();

    $.ajax({

        type : "post",
        //url 要写正确
        url : "/website1/UserValidateService?username=" + username,
        success : function(data) {
            var da = eval("(" + data + ")");
            if (da != null && da.password == password) {
                login_success();
            } else {
                $("#signin-error").html("用户名或密码错误！")
            }
        },
        complete : function(argument) {

        },
        error : function(argument) {
            alert('error');
        }
    });
}

function login_success() {

    $("#left1").show();
    $("#right1").show();
    $(".sp-li-on").show().css("display", "inline");
    $("#btn-herder-img").show();
    $(".sp-li-off").hide();
    $(".sign-css").hide();
    $("#sign-backgro").hide();
    $("#signin-error").html("");
}

servlet部分

servlet获取ajax传递过来的数据用request.getParameter()就可以了

String username = request.getParameter("username");
String password = request.getParameter("password");

要注意的是，servlet传递给ajax的数据要转换成json，需要下面这6个jar包
这里写图片描述
可以自己下载了搞进去，我这里用的Maven自动导入，很方便，pom文件里加这个dependency节点

<dependency>
    <groupId>net.sf.json-lib</groupId>
    <artifactId>json-lib</artifactId>
    <version>2.4</version>
    <classifier>jdk15</classifier>
</dependency>

然后用JSONObject的fromObject()方法将bean对象转化为json，像这样：

JSONObject jsonObject = JSONObject.fromObject(user);

然后再用response.getWriter()获取的PrintWriter写给ajax

PrintWriter pWriter = response.getWriter();
pWriter.write(jsonObject.toString());

servlet完整代码，UserValidateService.java

package com.jkbao.ustc.service;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.ibatis.session.SqlSession;

import com.jkbao.ustc.entity.User;
import com.jkbao.ustc.mapper.UserMapper;
import com.jkbao.ustc.tool.SqlSessionUtil;

import net.sf.json.JSONObject;

/*********************************************
 * UserValidateService.java Author: jkbao Created on: 2018年3月3日
 ********************************************/
public class UserValidateService extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");

        String username = request.getParameter("username");
        // String password = request.getParameter("password");

        SqlSession session = SqlSessionUtil.getSqlSession();
        try {
            // User user = (User) session.selectOne("selectUserByName", username);
            UserMapper uMapper = session.getMapper(UserMapper.class);
            User user = uMapper.selectUserByName(username);
            session.commit();
            JSONObject jsonObject = JSONObject.fromObject(user);
            PrintWriter pWriter = response.getWriter();
            pWriter.write(jsonObject.toString());
            pWriter.flush();
            System.out.println(jsonObject.toString());
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            session.close();
        }
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        doGet(request, response);
    }

}

MyBatis部分

MyBatis 是一款优秀的持久层框架，主要用起来很顺手，方便，配置也很简单所以就用了它，省的还要吭哧吭哧的用原生jdbc
1.首先确保电脑mysql已经安装好，然后配置MyBatis ，需要的jar包如下：
这里写图片描述
或者Maven：

<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <version>5.1.41</version>
</dependency>
<dependency>
    <groupId>org.mybatis</groupId>
    <artifactId>mybatis</artifactId>
    <version>3.4.4</version>
</dependency>

2.接着是jdbc.properties

driver=com.mysql.jdbc.Driver
url=jdbc:mysql://localhost:3306/（数据库名）?useSSL=false&amp
username=root
password=

3.还有mybatis-config.xml，注意typeAliases，mappers根据实际情况配置，在下面讲

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration> <!--加载连接数据库的基本信息文件 -->
    <properties resource="jdbc.properties"></properties>
    <typeAliases>
        <typeAlias alias="User" type="com.jkbao.ustc.entity.User" />
    </typeAliases>
    <environments default="development">
        <environment id="development">
            <transactionManager type="JDBC" />
            <dataSource type="POOLED">
                <property name="driver" value="${driver}" />
                <property name="url" value="${url}" />
                <property name="username" value="${username}" />
                <property name="password" value="${password}" />
            </dataSource>
        </environment>
    </environments>
    <mappers>
        <mapper resource="mapper/UserMapper.xml" />
    </mappers>
</configuration>

整个项目目录是这样的：
这里写图片描述
user表结构：

4.接下来要写对应user表的实体类User.java，如下：

package com.jkbao.ustc.entity;

public class User {
    private int id;
    private String username;
    private String password;

    public User() {
    }

    public User(String username, String password) {
        this.username = username;
        this.password = password;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }
}

5.接着是定义对于user表的mapper接口，UserMapper.java

/*********************************************
 * UserMapper.java
 * Author: bjk
 * Created on: 2018年3月4日
 ********************************************/
/**
 *
 */
package com.jkbao.ustc.mapper;

import com.jkbao.ustc.entity.User;

/*********************************************
 * UserMapper.java Author: jkbao Created on: 2018年3月4日
 ********************************************/
public interface UserMapper {

    User selectUserByID(int id);
    User selectUserByName(String username);
    void add(User user);
    void del(int id);
    void update(User user);
}

6.接着是UserMapper.xml，注意namespace要写成mapper接口的路径

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.jkbao.ustc.mapper.UserMapper">
    <select id="selectUserByID" parameterType="int" resultType="User">
        SELECT * FROM user where id = #{id}
    </select>
    <select id="selectUserByName" parameterType="String" resultType="User">
        SELECT * FROM user where username = #{username}
    </select>
    <insert id="add" parameterType="com.jkbao.ustc.entity.User">
        insert into
        user(username,password) value(#{username},#{password})
    </insert>
    <delete id="del" parameterType="int">
        delete from user where id = #{id}
    </delete>
    <update id="update" parameterType="com.jkbao.ustc.entity.User">
        update user set
        name=#{username},age=#{password} where id=#{id}
    </update>
</mapper>

7.接着要注册userMapper.xml文件，在mybatis-config.xml加上，如下

<mappers>
    <mapper resource="mapper/UserMapper.xml" />
</mappers>

8.最后在UserValidateService.java里用就行了，首先需要获得SqlSession对象，这里作为工具类提取了出来

/*********************************************
 * SqlSessionUtil.java
 * Author: bjk
 * Created on: 2018年3月4日
 ********************************************/
/**
 *
 */
package com.jkbao.ustc.tool;

import java.io.IOException;
import java.io.Reader;

import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;

/*********************************************
 * SqlSessionUtil.java Author: jkbao Created on: 2018年3月4日
 ********************************************/
public class SqlSessionUtil {
    public static SqlSession getSqlSession() throws IOException {

        Reader reader = Resources.getResourceAsReader("mybatis-config.xml");

        SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(reader);

        return sqlSessionFactory.openSession();
    }
}

然后

//获得sqlsession
SqlSession session = SqlSessionUtil.getSqlSession();
try {
    //查询db
    UserMapper uMapper = session.getMapper(UserMapper.class);
    User user = uMapper.selectUserByName(username);
    session.commit();
    //user类转换成json数据
    JSONObject jsonObject = JSONObject.fromObject(user);
    //发送数据给ajax
    PrintWriter pWriter = response.getWriter();
    pWriter.write(jsonObject.toString());
    pWriter.flush();
} catch (Exception e) {
    e.printStackTrace();
} finally {
    session.close();
}