Ajax 和 Json 综合练习

最新推荐文章于 2024-07-17 12:52:53 发布

lao_kai_ybqy

最新推荐文章于 2024-07-17 12:52:53 发布

阅读量258

点赞数 1

分类专栏： JAVA Web 数据库网页设计文章标签： ajax json jquery tomcat

本文链接：https://blog.csdn.net/weixin_47701814/article/details/120642187

版权

网页设计同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

数据库

6 篇文章 0 订阅

订阅专栏

JAVA Web

5 篇文章 0 订阅

订阅专栏

注册时用户名的检测

在注册页面中输入要注册的用户名,利用ajax技术发送请求(用ajax发送异步请求在页面不变的,情况下处理请求)
servlet调用dao查找用户名方法,最后用json数据传输,最终在页面上显示相应的信息

数据库建立

CREATE DATABASE ajax;
USE ajax;
CREATE TABLE USER(
	username VARCHAR(20),
	PASSWORD VARCHAR(30)	
);
INSERT INTO USER VALUE(NULL,'hahaha','123456');

项目结构

在这里插入图片描述

页面展示

页面随便弄吧,最主要的是ajax和json的操作,页面用的jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>$Title$</title>
    <!-- 1. 导入CSS的全局样式 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
    <script src="js/jquery-2.1.0.min.js"></script>
    <!-- 3. 导入bootstrap的js文件 -->
    <script src="js/bootstrap.min.js"></script>
    <style type="text/css">
      body{
        background:url(img/img1.jpg)  no-repeat center center;
        background-size:cover;
        background-attachment:fixed;
        background-color:#CCCCCC;
      }
    </style>
    <script>
      $(function () {
        $("#username").blur(function () {
          var username=$(this).val();
          //ajax的jquery实现方法,参数类型为json
          $.get("/findServlet",{username:username},function (data) {
            var span=$("#s_username");
            if(data.flag){
              span.css("color","red");
              span.html(data.msg);
            }else{
              span.css("color","green");
              span.html(data.msg);
            }
          },"json")
        })
      })
    </script>
  </head>
  <body>
      <div class="container" style="width: 500px;margin-top: 40px;background-color: rgba(223,240,216,0.8)">
        <h3 style="text-align: center;">用户注册</h3>
        <form action="" method="post" style="border: 2px">
          <div class="form-group">
            <label for="username">用户名：</label>
            <input type="text" name="username" class="form-control" id="username" placeholder="请输入用户名"/>
            <%--设置要提示的位置 --%>
            <span id="s_username"></span>
          </div>
          <div class="form-group">
            <label for="password">密 码：</label>
            <input type="text" name="username" class="form-control" id="password" placeholder="请输入密码" width="400px"/>
          </div>
          <div class="form-group">
            <label for="againpass">确认密码：</label>
            <input type="text" name="username" class="form-control" id="againpass" placeholder="请输入确认密码" width="400px"/>
          </div>
          <hr/>
          <div class="form-group" style="text-align: center;">
            <input class="btn btn btn-primary" type="submit" value="注册">
          </div>
        </form>
      </div>
  </body>
</html>

在这里插入图片描述

依赖引入

使用pom中引入也可以jar包引入到web下的WEB-INF下的lib文件夹下

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>org.example</groupId>
    <artifactId>AjaxTest</artifactId>
    <version>1.0-SNAPSHOT</version>

    <dependencies>
        <dependency>
            <groupId>commons-beanutils</groupId>
            <artifactId>commons-beanutils</artifactId>
            <version>1.9.2</version>
        </dependency>
        <dependency>
            <groupId>commons-logging</groupId>
            <artifactId>commons-logging</artifactId>
            <version>1.2</version>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.2.5</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-annotations</artifactId>
            <version>2.9.0</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.9.0</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-core</artifactId>
            <version>2.9.0</version>
        </dependency>
        <dependency>
            <groupId>com.mchange</groupId>
            <artifactId>mchange-commons-java</artifactId>
            <version>0.2.20</version>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.21</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-beans</artifactId>
            <version>5.1.10.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-core</artifactId>
            <version>5.1.10.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-jdbc</artifactId>
            <version>5.1.10.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-tx</artifactId>
            <version>5.1.10.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.12</version>
            <scope>test</scope>
        </dependency>
    </dependencies>

</project>

实体类User

get和set方法就不展示了,需要get和set方法

package zkr.domain;

public class User {
    private String username;
    private String password;
 }

数据库连接操作

druid.properties配置文件

driverClassName=com.mysql.cj.jdbc.Driver
url=jdbc:mysql:///ajax?serverTimezone=UTC
username=root
password=123456
initialSize=5
maxActive=10
maxWait=3000

JDBCUtils类的编写

package zkr.utils;

import com.alibaba.druid.pool.DruidDataSourceFactory;

import javax.sql.DataSource;
import java.io.IOException;
import java.io.InputStream;
import java.sql.Connection;
import java.sql.SQLException;
import java.util.Properties;

public class JDBCUtils {
    private  static DataSource ds ;
    static {
        try{
            Properties pro = new Properties();
            InputStream is =JDBCUtils.class.getClassLoader().getResourceAsStream("druid.properties");
            System.out.println(is);
            pro.load(is);
            ds= DruidDataSourceFactory.createDataSource(pro);
        } catch (IOException e) {
            e.printStackTrace();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
    public static DataSource getDataSource(){
        return ds;
    }
    public static Connection getConnection() throws SQLException {
        return ds.getConnection();
    }
}

Dao类操作编写
这里只显示实现类

package zkr.dao.impl;
import org.springframework.dao.DataAccessException;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;
import zkr.dao.UserDao;
import zkr.domain.User;
import zkr.utils.JDBCUtils;

public class UserDaoImpl implements UserDao {
    private JdbcTemplate template= new JdbcTemplate(JDBCUtils.getDataSource());
    public User findByName(User user) {
        try{
            String sql ="select * from user where username=?";
            User loginuser = template.queryForObject(sql, new BeanPropertyRowMapper<User>(User.class), user.getUsername());
            return loginuser;
        }catch (DataAccessException e){
            e.printStackTrace();
            return null;
        }
    }
}

Service类实现

package zkr.service.Impl;

import zkr.dao.UserDao;
import zkr.dao.impl.UserDaoImpl;
import zkr.domain.User;
import zkr.service.UserService;
public class UserServiceImpl implements UserService {
    private UserDao userDao =new UserDaoImpl();
    public User findByName(User user) {
        return userDao.findByName(user);
    }
}

servlet类实现(最主要的部分)

package zkr.servlet;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.apache.commons.beanutils.BeanUtils;
import zkr.dao.UserDao;
import zkr.dao.impl.UserDaoImpl;
import zkr.domain.User;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.util.HashMap;
import java.util.Map;
@WebServlet("/findServlet")
public class FindServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //接受请求数据
        String username =request.getParameter("username");
        //设置响应的数据格式为json
        response.setContentType("application/json;charset=utf-8");
        //设立Map获取请求数据,且用来封装java对象
        Map<String, String[]> map = request.getParameterMap();
        User loginUser =new User();
        try {
            //利用BeanUtils的populate来封装map,得到注册页面的数据对应User对象
            BeanUtils.populate(loginUser,map);
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }
        //调用相应方法,来查找数据库中的数据
        UserDao userDao =new UserDaoImpl();
        User user = userDao.findByName(loginUser);
        //设置map来存储,将来用来变为json数据传输,这里值要Object,因为有boolen数据和String类型
        Map<String,Object> map1 =new HashMap<String, Object>();
        if(user!=null){
            //如果没有数据则设置相应信息
            map1.put("flag",true);
            map1.put("msg","不行啊,有人注册过了");
        }else{
            //如果有数据则设置相应信息
            map1.put("flag",false);
            map1.put("msg","可以的,这个名字不错");
        }
        //java对象变为json的方法
        ObjectMapper mapper =new ObjectMapper();
        //writeValue第一个参数为输出流对象,第二个参数为要转换的java数据,最终压入输出流对象中
        mapper.writeValue(response.getWriter(),map1);
    }

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

lao_kai_ybqy

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax 和 Json 综合练习

注册时用户名的检测在注册页面中输入要注册的用户名,利用ajax技术发送请求(用ajax发送异步请求在页面不变的,情况下处理请求)servlet调用dao查找用户名方法,最后用json数据传输,最终在页面上显示相应的信息数据库建立CREATE DATABASE ajax;USE ajax;CREATE TABLE USER( username VARCHAR(20), PASSWORD VARCHAR(30) );INSERT INTO USER VALUE(NULL,'hahaha','
复制链接

扫一扫