Ajax应用举例

最新推荐文章于 2021-08-06 00:19:31 发布

Levana。

最新推荐文章于 2021-08-06 00:19:31 发布

阅读量363

点赞数

分类专栏： Java Web Ajax 文章标签： Ajax

本文链接：https://blog.csdn.net/Levana1994/article/details/90181600

版权

Java Web 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

Ajax

1 篇文章 0 订阅

订阅专栏

Ajax应用举例

一.异步校验用户名

1.页面

在这里插入图片描述

2.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
<div>
    <span>会员注册</span>USER REGISTER
    <form class="form-horizontal" style="margin-top: 5px;">
        <table>
            <tr>
                <td>用户名</td>
                <td>
                    <input type="text" id="username" name="username" placeholder="请输入用户名">
                    <span id="usernameInfo"></span>
                </td>
            </tr>
            <tr>
                <td>密码</td>
                <td>
                    <input type="password" placeholder="请输入密码">
                </td>
            </tr>
        </table>
        <input type="submit" value="注册"/>
    </form>
</div>

<script src="./js/jquery-3.3.1.min.js"></script>
<script>
$("#username").change(function () {
    var params = "action=isExist&name=" + this.value;
    //发Ajax请求到服务端，判断用户名是否存在
    $.post("user",params,function(result){
        //result的值是字符串。如果存在就是"true"；否则就是"false"
        if (result === "true") {//用户名已存在，不可用
            $("#usernameInfo").html("用户名已存在").css("color","red");
        }else{
            $("#usernameInfo").html("用户名可用").css("color","green");
        }
    },"text");
});
</script>
</body>
</html>

二.异步校验搜索填充

1.页面

在这里插入图片描述

2.html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <style type="text/css">
        .content{
            width:643px;
            margin:50px auto;
            text-align: center;
        }
        input[type='text']{
            width:530px;
            height:40px;
            font-size: 14px;
        }
        input[type='button']{
            width:100px;
            height:46px;
            background: #38f;
            border: 0;
            color: #fff;
            font-size: 15px
        }
        .result{
            /*position: absolute;*/
            width: 535px;
            border: 1px solid #999;
            border-top: 0;

            display: none;
        }
        .result div:hover{
            background-color: #ccc;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="content">
    <img alt="" src="img/logo.png"><br/><br/>
    <input type="text" name="word" id="searchWord">
    <input type="button" value="搜索一下">
    <div class="result"></div>
</div>
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
    $("#searchWord").keyup(function () {
        //如果搜索框里没有值，不需要发Ajax进行查询
        if (this.value === "") {
            //隐藏结果列表
            $(".result").hide();
            return;
        }


        var params = "action=search&name=" + this.value;
        //发Ajax请求，搜索用户，把搜索结果显示出来
        $.post("user",params,function(result){
            //清除之前的结果
            $(".result").empty();
            //如果搜索结果了，就循环遍历显示出来
            if (result !== null && result.length > 0) {
                //result = [{"id":1,"name":"张三","password":"123"},{},{},...]
                for(var user of result){
                    //user: {"id":1,"name":"张三","password":"123"}
                    $("<div></div>").html(user.name).appendTo(".result");
                }
                $(".result").show();
            }else{
                //没有搜索到结果，隐藏结果列表
                $(".result").hide();
            }
        },"json");
    });

    $(".result").on("click","div",function(){
        //alert(this.innerHTML);
        //把当前元素的内容，设置到搜索框里
        $("#searchWord").val(this.innerHTML);
        //把结果列表隐藏掉
        $(".result").hide();
    });
</script>
</body>
</html>

三.后端代码实现

项目结构

1.web层

1.1 filter

@WebFilter(filterName = "EncodingFilter",urlPatterns = "/*")
public class EncodingFilter implements Filter {
    public void destroy() {
    }

    public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException {
        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) resp;

        //在放行之前，解决请求和响应的中文乱码
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");

        chain.doFilter(request, response);
    }

    public void init(FilterConfig config) throws ServletException {
    }
}

1.2 servlet

@WebServlet(urlPatterns = "/user", name = "UserServlet")
public class UserServlet extends HttpServlet {
    private UserService userService = new UserService();

    public void search(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.接收参数
        String name = request.getParameter("name");
        //2.封装实体：略
        //3.完成功能
        List<User> userList = userService.search(name);
        //4.处理结果
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(userList);
        response.getWriter().print(json);
    }

    public void isExist(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.接收参数
        String name = request.getParameter("name");
        //2.封装实体：略
        //3.完成功能
        boolean isExist = userService.isExist(name);
        //4.处理结果
        response.getWriter().print(isExist);
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        try {
            //接收参数action：是要执行的方法名称
            String action = request.getParameter("action");
            //反射执行名称为action的方法
            Class clazz = this.getClass();
            Method method = clazz.getMethod(action, HttpServletRequest.class, HttpServletResponse.class);
            method.invoke(this, request, response);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}

2.service层

public class UserService {
    private UserDao dao = new UserDao();

    /**
     * 判断数据库里name是否存在
     * @param name
     * @return
     *  存在，则返回true；不存在，则返回false
     */
    public boolean isExist(String name) {
        User user = dao.findByName(name);
        return user!=null;
    }

    public List<User> search(String name) {
        return dao.search(name);
    }
}

3.dao层

public class UserDao {
    private JdbcTemplate jdbcTemplate = new JdbcTemplate(JdbcUtils.getDataSource());

    public User findByName(String name) {
        User user = null;
        try {
            user = jdbcTemplate.queryForObject("select * from user where name = ?", new BeanPropertyRowMapper<>(User.class), name);
        } catch (EmptyResultDataAccessException e) {
            System.out.println("找不到用户User[name="+name+"]");
        }
        return user;
    }

    public List<User> search(String name) {
        return jdbcTemplate.query("select * from user where name like ?", new BeanPropertyRowMapper<>(User.class), "%" +name+"%");
    }
}

4.util

4.1 jdbcUtils

public class JdbcUtils {

    /**c3p0连接池被创建时，会自动从src下加载c3p0-config.xml*/
    private static DataSource dataSource = new ComboPooledDataSource();

    /**
     * 获取连接
     */
    public static Connection getConnection() throws Exception {

        //获取连接
        Connection connection = dataSource.getConnection();
        return connection;
    }

    /**
     * 释放资源
     */
    public static void close(ResultSet resultSet, Statement statement, Connection connection){
        if (resultSet != null) {
            try {
                resultSet.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }

        if (statement != null) {
            try {
                statement.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }

        if (connection != null) {
            try {
                connection.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }

    }

    public static DataSource getDataSource() {
        return dataSource;
    }
}

4.2 beanUtils

package com.itheima.util;

import java.lang.reflect.InvocationTargetException;
import java.util.Map;

public class BeanUtils {
    /**
     * 封装实体<br>
     * 再次封装BeanUtils.populate方法，提供更简单的操作<br/>
     * 使用示例：<br>
     * User user = BeanUtil.populate(map, User.class);
     * @param properties  Map keyed by property name, with the corresponding (String or String[]) value(s) to be set
     * @param clazz The class of JavaBean whose properties are being populated
     * @return 封装后的JavaBean实例
     */
    public static <T> T populate(Map<?,?> properties, Class<T> clazz){
        T instance = null;
        try {
            instance = clazz.newInstance();
            org.apache.commons.beanutils.BeanUtils.populate(instance, properties);
        } catch (IllegalAccessException | InvocationTargetException e) {
            e.printStackTrace();
        } catch (InstantiationException e) {
            e.printStackTrace();
        }
        return instance;
    }
}

5.domain

public class User {
    private Integer id;
    private String name;
    private String password;

    public Integer getId() {
        return id;
    }

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

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getPassword() {
        return password;
    }

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

Levana。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax应用举例

Ajax应用举例一.异步校验用户名1.页面2.html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>用户注册</title></head><body><div>...
复制链接

扫一扫

专栏目录