JavaWeb11（Ajax、校验用户名是否可用案例、JSON、搜索下拉提示案例）

最新推荐文章于 2021-07-04 19:09:00 发布

么古

最新推荐文章于 2021-07-04 19:09:00 发布

阅读量373

点赞数

分类专栏： JavaWeb 文章标签： JavaWeb

本文链接：https://blog.csdn.net/weixin_44090966/article/details/91865767

版权

JavaWeb 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

Part01:Ajax

1、Ajax概念：

”Asynchronous JavaScript And XML“（异步JavaScript和XML），即使用JavaScript语言与服务器进行异步交互，传输的数据为XML。

2、Ajax作用：

通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

3、Ajax应用场景：

检测用户名是否可用
搜索下拉提示
动态加载商品

4、Ajax优缺点：

优点：
- Ajax无需刷新整个页面
- 因为服务器响应内容不再是整个页面，而是页面中的局部，所以Ajax性能高
缺点：
- Ajax虽然提高了用户体验，但无形中向服务器发送的请求次数增多了，导致服务器压力增大
- 因为Ajax是在浏览器中使用JavaScript技术完成的，所以还需要处理浏览器兼容性问题

5、JS中Ajax的使用：

开发步骤：
- 获取核心对象（XMLHttpRequest)

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for all new browsers
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// code for IE5 and IE6
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

确定请求方式和请求路径
xmlhttp.open(请求的方式,请求的路径,[是否异步])
- 发送请求
  xmlhttp.send([post请求的参数])
- 编写回调函数
  - 常用属性：
    - onreadystatechange：监测XMLHttpRequest对象状态变化
    - readyState：XMLHttpRequest对象状态
      - 0：对象已创建
      - 1：对象调用了open方法
      - 2：对象调用了send方法
      - 3：部分已完成
      - 4：响应已完成
    - status：响应状态码
      - 200：“OK“
      - 404：未找到页面
    - responseText：响应回来的内容
- 注意⚠️：若是post请求需要发送参数，必须设置请求参数的mime类型（xmlhttp.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);）

<script type="text/javascript">
    //向服务器发送get请求
    function getAjax() {
        //获取XMLHttpRequest对象
        var xmlhttp;
        if (window.XMLHttpRequest)
        {// code for all new browsers
            xmlhttp=new XMLHttpRequest();
        }
        else if (window.ActiveXObject)
        {// code for IE5 and IE6
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        //确定请求方式和请求路径
        xmlhttp.open("get","${pageContext.request.contextPath}/demo1?name=tom");
        //发送请求
        xmlhttp.send();
        //接收结果（回调函数）
        xmlhttp.onreadystatechange = function () {
            if(xmlhttp.readyState==4&&xmlhttp.status==200){
                //弹出响应回来的内容
                alert((xmlhttp.responseText))
            }
        }
    }
    //向服务器发送post请求
    function postAjax() {
        //获取XMLHttpRequest对象
        var xmlhttp;
        if (window.XMLHttpRequest)
        {// code for all new browsers
            xmlhttp=new XMLHttpRequest();
        }
        else if (window.ActiveXObject)
        {// code for IE5 and IE6
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        //确定请求方式和请求路径
        xmlhttp.open("post","${pageContext.request.contextPath}/demo1");
        // 设置post请求的请求头
        xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        //发送请求,携带post请求参数
        xmlhttp.send("name=tom");
        //接收结果（回调函数）
        xmlhttp.onreadystatechange = function () {
            if(xmlhttp.readyState==4&&xmlhttp.status==200){
                //弹出响应回来的内容
                alert((xmlhttp.responseText))
            }
        }
    }
</script>

6、jQuery中Ajax的使用：

$.get(url, params,function(obj){},type);//发送get请求
$.post(url, params,function(obj){},type);//发送post请求
- url:请求的路径
- params:请求参数；
  - 格式1:key=value
  - 格式2:JSON格式
- Fn:成功之后的回调函数
  - function(obj){//obj就是服务器返回给浏览器的内容}
- type:返回数据的格式

<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script type="text/javascript">
    //向服务器发送get请求
    function getAjax(){
        $.get("${pageContext.request.contextPath}/demo1", "name=张三",function(obj){
            alert(obj)
        },"text");
    }
    //向服务器发送post请求
    function postAjax(){
        $.post("${pageContext.request.contextPath}/demo1", "name=张三",function(obj){
            alert(obj)
        },"text");
    }
</script>

$.ajax({
- url:请求路径,
- type:请求方式，默认get,
- date:请求参数,
- success:function (obj) {//成功之后的回调 },
- error:function (e) { //错误之后的回调},
- dataType:返回数据的格式,
- async：是否异步默认true })

Part02:校验用户名是否可用案例

1、案例需求：

在不刷新页面的情况下查询数据库中是否存在输入的用户名，若存在，提示：该用户名已存在，并且提交按钮不可用，若不存在，提示该用户名可以使用。

2、主要代码：

add.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
    <script type="text/javascript">
        $(function () {
            //失去焦点
            $("[name=sname]").blur(function () {
                $.post("/student", "sname=" + $("[name=sname]").val(), function (obj) {
                    if (obj == 1) {
                        $("#sname_msg").html("<font color=red>用户名已存在❌</font>")
                        $("#sub").attr("disabled", "disabled")
                    } else {
                        $("#sname_msg").html("<font color=green>用户名正确✅</font>")
                        $("#sub").removeAttr("disabled")
                    }
                })
            })
        })
    </script>
</head>
<body>
<h3>请输入要添加用户的信息：</h3>
<form action="#">
    用户名：<input type="text" name="sname">
    <span id="sname_msg"></span>
    年&nbsp;&nbsp;&nbsp;龄：<input type="text" name="sage">
    性&nbsp;&nbsp;&nbsp;别：<input type="radio" value="男" name="ssex">男<input type="radio" value="女" name="ssex">女
    <input type="submit" value="添加" id="sub">
</form>
</body>
</html>

StudentServlet

package Servlet;

import service.StudentService;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.SQLException;

@WebServlet(name = "StudentServlet",urlPatterns = {"/student"})
public class StudentServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        try {
            //解决请求和响应乱码问题
            request.setCharacterEncoding("utf-8");
            response.setContentType("text/html;charset=utf-8");
            //获取前台输入的数据
            String sname = request.getParameter("sname");
            //创建StudentService调用方法
            StudentService studentService = new StudentService();
            int flag = studentService.queryStudent(sname);
            response.getWriter().print(flag);
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }

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

    }
}

StudentService

package service;

import dao.StudentDao;

import java.sql.SQLException;

public class StudentService {
    public int queryStudent(String sname) throws SQLException {
        //创建StudentDao调用方法
        StudentDao studentDao = new StudentDao();
        return studentDao.queryStudent(sname);
    }
}

StudentDao

package dao;

import Utils.C3P0Utils;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.ScalarHandler;

import java.sql.SQLException;

public class StudentDao {
    public int queryStudent(String sname) throws SQLException {
        //创建QueryRunner对象
        QueryRunner queryRunner = new QueryRunner(C3P0Utils.getDataSource());
        //编写sql
        String sql = "select count(*) from student where sname = ?";
        //执行sql
        int value = ((Long) (queryRunner.query(sql, new ScalarHandler<>(), sname))).intValue();
        return value;
    }
}

Part03:JSON

1、JSON概念：

是一种轻量级的数据交换格式

2、JSON格式：

数组格式：[e1,e2…]
JSON对象：{“key”:”value”,”key2”:”value2”}

3、Java对象和JSON数据进行转换：

导入jar包
- 第一种方法
- 第二种方法:
方法：
- 第一种方法：
  - JSONArray.fromObject(数组或者list）
  - JSONObject.fromObject(map或者javaBean)

//数组
String[] strings = {"a","b","c"};
JSONArray jsonArray = JSONArray.fromObject(strings);
System.out.println(jsonArray);

//list
List<String> list = new ArrayList<>();
list.add("dd");
list.add("ee");
list.add("ff");
JSONArray jsonArray1 = JSONArray.fromObject(list);
System.out.println(jsonArray1);

//map
Map<String,String> map = new HashMap<>();
map.put("hh","HH");
map.put("ii","II");
map.put("jj","JJ");
map.put("kk","KK");
JSONObject jsonObject = JSONObject.fromObject(map);
System.out.println(jsonObject);

//JavaBean
User user = new User("张三", "123");
JSONObject jsonObject1 = JSONObject.fromObject(user);
System.out.println(jsonObject1);

在这里插入图片描述

第二种方法
- gson.toJson(数组/list/map/JavaBean )

//数组
String[] strings = {"a","b","c"};
Gson gson = new Gson();
String json = gson.toJson(strings);
System.out.println(json);

//list
List<String> list = new ArrayList<>();
list.add("dd");
list.add("ee");
list.add("ff");
String json1 = gson.toJson(list);
System.out.println(json1);

//map
Map<String,String> map = new HashMap<>();
map.put("hh","HH");
map.put("ii","II");
map.put("jj","JJ");
map.put("kk","KK");
String json2 = gson.toJson(map);
System.out.println(json2);

//JavaBean
User user = new User("张三", "123");
String json3 = gson.toJson(user);
System.out.println(json3);

Part04:搜索下拉提示案例

1、案例需求：

在键盘弹起的时候去数据库中查询4条数据，展示出来，鼠标经过是变成灰色，移开时变回白色，点击时输入框变成点击的数据
一开始点击后输入框变成[object HTMLDivElement]，加上innerHTML后获取到真正数据

function cl(a){
    $("#cxid").prop("value",a.innerHTML);
}

2、主要代码：

JSP代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
    <script type="text/javascript">
        $(function () {
            //键盘弹起事件
            $("#cxid").keyup(function () {
                $.post("/search","name="+$("#cxid").val(),function (obj) {
                    $("#did").html("");
                    if(obj != ""){
                        //遍历
                        $(obj).each(function () {
                            $("#did").append("<div onmouseover='over(this)' onmouseout='out(this)' onclick='cl(this)'>"+this+"</div>");
                            $("#did").show();
                        })
                    }else {
                        $("#did").hide();
                    }
                },"json");
            })
        });
    </script>
</head>
<body>
<center>
    <div>
        <h3>搜索下拉提示案例</h3>
        <div>
            <input type="text" name="cx" id="cxid" value="">
            <input type="button" value="搜索?">
        </div>
        <div id="did" style="border: 1px solid gainsboro;width:150px;position: relative;left: -30px;display: none">
        </div>
    </div>
</center>
</body>
<script type="text/javascript">
    function over(obj) {
        $(obj).css("background-color","gainsboro");
    }
    function out(obj) {
        $(obj).css("background-color","white");
    }
    function cl(a){
        $("#cxid").prop("value",a.innerHTML);
    }
</script>
</html>

Servlet代码

package Servlet;

import com.google.gson.Gson;
import service.SearchService;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.SQLException;
import java.util.List;

@WebServlet(name = "SearchServlet",urlPatterns = {"/search"})
public class SearchServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        try {
            //从前台获取输入的数据
            String name = request.getParameter("name");
            //创建SearchService调用方法
            SearchService searchService = new SearchService();
            List<Object> list = searchService.queryName(name);
            //把list转换为json
            Gson gson = new Gson();
            String s = gson.toJson(list);
            //把json数据传给前台
            response.getWriter().print(s);
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }

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

    }
}

service代码

package service;

import dao.SearchDao;

import java.sql.SQLException;
import java.util.List;

public class SearchService {
    public List<Object> queryName(String name) throws SQLException {
        //创建SearchDao调用方法
        SearchDao searchDao = new SearchDao();
        return searchDao.queryName(name);
    }
}

Dao代码

package dao;

import Utils.C3P0Utils;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.ColumnListHandler;

import java.sql.SQLException;
import java.util.List;

public class SearchDao {
    public List<Object> queryName(String name) throws SQLException {
        //创建QueryRunner
        QueryRunner queryRunner = new QueryRunner(C3P0Utils.getDataSource());
        String sql = "select name from cx where name like ? limit 0,4";
        List<Object> query = queryRunner.query(sql, new ColumnListHandler<>(), "%" + name + "%");
        return query;
    }
}

么古

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb11（Ajax、校验用户名是否可用案例、JSON、搜索下拉提示案例）

目录Part01:Ajax1、Ajax概念：2、Ajax作用：3、Ajax应用场景：4、Ajax优缺点：5、JS中Ajax的使用：**6、jQuery中Ajax的使用：**Part02:校验用户名是否可用案例1、案例需求：2、主要代码：Part03:JSON1、JSON概念：2、JSON格式：3、Java对象和JSON数据进行转换：Part04:搜索下拉提示案例1、案例需求：2、主要代码：Par...
复制链接

扫一扫