web.Ajax基本知识

看了我之前的博客应该知道，之前博客界面都是进行一步一步的跳转，每次都要跳转界面，而今天分享的Ajax可以只刷新局部页面，提高效率，也更方便，那我们一起来了解一下Ajax吧

一、什么是Ajax？

只刷新局部页面的技术

二、为什么使用Ajax？

无刷新：不刷新整个页面，只刷新局部

无刷新的好处 ：只更新部分页面，有效利用带宽，提高用户体验

三、Ajax的两种方法

通过 HTTP 请求加载远程数据。

$.ajax()

 通过远程 HTTP POST 请求载入信息。 这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

$.post()/$.get()

三、关于Ajax的案例

项目目录

 

效果图

登录失败，会有提示，然后输入框的数据不会清空

登陆成功，会有提示，并跳转到首页

首页有一个搜索功能

 

创建一个js文件夹

创建一个登录界面（login.jsp）

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>









	

	

	登录




<%--
jsp其实就是java

前后端分离：后台与前端完全断开，前端请求（js）数据可以不跳转页面

前端：做页面（html,css,js）
后端：服务器

ajax 异步数据请求

同步 一件接一件
异步 几件同时进行

jquery
--%>

登录验证（LoginServlet.java）

package com.zking.servlet;

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

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

/**
 * 登录验证
 * 
 * @author zjjt
 *
 */
@SuppressWarnings("all")
@WebServlet("/login.do")
public class LoginServlet extends HttpServlet {

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doPost(req, resp);
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// 获取表单数据
		String account = req.getParameter("account");
		String password = req.getParameter("password");
		// 调用biz去数据库做验证
		PrintWriter out = resp.getWriter();
		if ("root".equals(account) && "root123".equals(password)) {
			out.println("yes");
		} else {
			out.println("no");
		}
	}

}

过滤器->将所有的请求的编码都设置为utf-8（EncodingFilter.java）

package com.zking.filter;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebFilter;

/**
 * 过滤器->将所有的请求的编码都设置为utf-8
 * @author zjjt
 *
 */
@WebFilter("/*")
public class EncodingFilter implements Filter{

	@Override
	public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)throws IOException, ServletException {
		request.setCharacterEncoding("utf-8");
		//如果不生效，请使用破碎重组
		chain.doFilter(request, response);
	}

}

首页界面（index.jsp）

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>









搜索

查询出对应关键字的商品名称（SearchServlet.java）

package com.zking.servlet;

import com.fasterxml.jackson.databind.ObjectMapper;

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.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

/**
 *
 * @Description 查询出对应关键字的商品名称
 **/
@SuppressWarnings("all")
@WebServlet("/search.do")
public class SearchServlet extends HttpServlet {

    //数据库中存在的商品名字
    List list = new ArrayList();

    {
        list.add("嘿嘿脑插");
        list.add("黑丝奶茶");
        list.add("勃勃奶茶");
        list.add("雷斯奶茶");
        list.add("拉屎奶茶");
        list.add("鸡鸡奶茶");
        list.add("哈哈奶茶");
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //去数据库查询  select * from goods where name like '%key%'
        String keyWord = req.getParameter("keyWord");
        //新建一个集合
        List ns=new ArrayList<>();
        for (String n : list) {
            if(n.contains(keyWord)){
                ns.add(n);
            }
        }
        //设置响应的编码
        resp.setCharacterEncoding("utf-8");
        //需要把结果告诉前台
        PrintWriter out = resp.getWriter();
        //需要将集合变成json
        //1.需要获取转换对象
        ObjectMapper mapper = new ObjectMapper();
        //2.调用方法
        String str = mapper.writeValueAsString(ns);
        out.println(str);
    }

}

注意我是没有连接数据库的哦，今天就到这啦，感谢你的观看，欢迎点赞收藏，下次见咯。