JavaWeb.Ajax(异步数据请求)

最新推荐文章于 2023-05-21 02:01:00 发布

这脑子我不想要了(ಥ_ಥ)

最新推荐文章于 2023-05-21 02:01:00 发布

阅读量909

点赞数 11

CC 4.0 BY-SA版权

文章标签： ajax javascript jquery

本文链接：https://blog.csdn.net/weixin_64938628/article/details/124553460

本文详细介绍了Ajax的核心概念，包括其异步更新页面的特点和通过HTTP请求加载远程数据的方法。通过实例展示了如何使用Ajax实现无刷新登录、关键字搜索和用户注册功能，涉及jQuery的$.ajax()和$.get()方法。同时，文章还提供了相关的Servlet处理代码，以及使用过滤器确保请求编码的一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是Ajax？

加载数据的方式

通过 HTTP 请求加载远程数据( $.ajax())

通过远程 HTTP POST 请求载入信息($.post()/$.get())

什么是Ajax？

Ajax:只刷新局部页面的技术

Ajax的全称是Asynchronouns JavaScript and XML（异步的 JavaScript 和 XML ）

Ajax不是新的编程语言，而是一种使用现有标准的新方法

Ajax是一种在无需重新加载整个网页的情况下，能够与服务器交换数据并更新部分网页的技术

Ajax最大的优点是页面无刷新，用户的体验非常好。并且使用异步方式与服务器通信，具有更加迅速的响应能力

加载数据的方式

通过 HTTP 请求加载远程数据( $.ajax())

常用参数	说明
url	一个用来包含发送请求的URL字符串(请求地址)
type	请求方式 (“POST” 或 “GET“[默认])
data	发送到服务器的数据(参数)
dataType	预期服务器返回的数据类型(xml、json、text)
success(data)	请求成功的回调函数
error	请求失败的回调函数

通过远程 HTTP POST 请求载入信息($.post()/$.get())

常用参数	说明
url	一个用来包含发送请求的URL字符串(请求地址)
data	发送到服务器的数据(参数) key/value
success(data)	请求成功的回调函数
type	返回内容格式(xml、json、text等)

案例

使用Ajax完成无刷新登陆

在web里新建一个js文件夹导入jquery文件

登陆页面代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
	<div>
		<p><input id="account" name="account"></p>
		<p><input id="password" name="password"></p>
		<button onclick="login()">登陆</button>
</div>
<script >
  
  function login() {
	 //取到页面的值
	 let account=$("#account").val()
	 let password=$("#password").val()
	//通过jquery来发送请求ajax去后台login.do
   //ajax方法：get|post
        $.ajax({
            url:"login.do",//访问地址
            data:{account,password},//携带的数据
            dataType:"text",//希望后台给你什么样子的数据
            type: "get",//什么请求类型
            success(resp){
                if (resp.trim() === "yes") {
                    alert("登陆成功")
                    location.href = "index.jsp"
                } else {
                    alert("登陆失败")
                }
            },//成功
            error(){

            }//错误
        })
/**
	$.get(
			"login.do",//请求地址
			{
				account:account,
			    password:password
			},//携带过去的数据
			function (resp) {//回调函数
                 if(resp.trim()==="yes"){
                	 alert("登陆成功")
                	 location.href="index.jsp"
                 }else{
                	 alert("登陆失败")
                 }
			}
			)
**/
}
  
</script>
</body>
</html>

处理登陆代码：

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;
@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");
		}
	}
	
}

过滤代码：

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;
@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);
	}

}

使用Ajax完成关键字搜索

首页代码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery-3.3.1.js"></script>
</head>
<body>
🔍<input id="keyWord" name="keyWord" onkeyup="search()">
<ul id="list">

</ul>
<script>
    function search(){
        //得到输入框的值
        let keyWord=$("#keyWord").val()
        //发送到负责检索商品名称的servlet
        $.get("search.do",{keyWord},(resp)=>{
            //清空原来的选项
            $("#list").empty()
            //resp现在是从字符串变成了数组
            for(let n of resp){//foreach
                $("#list").append("<li>"+n+"</li>")
            }
        },"json");
    }

</script>
</body>
</html>

检索商品名称的servlet：

package com.zking.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

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 com.fasterxml.jackson.databind.ObjectMapper;
/**
 * 
 * @author zjjt
 *查询出对应关键字的商品
 */
@WebServlet("/search.do")
public class SearchServlet extends HttpServlet{

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

    {
        list.add("嘿嘿奶茶");
        list.add("cc奶茶");
        list.add("啵啵奶茶");
        list.add("雷斯奶茶");
        list.add("hh奶茶");
        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<String> 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);
    }
	
}

使用Ajax完成关用户注册

注册页面代码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery-3.3.1.js"></script>
    <style>
        #tip{
            color: red;
        }
    </style>
</head>
<body>
<p><input id="name" onkeyup="yz()" type="text" placeholder="请输入你的用户名"><span id="tip"></span></p>
<button id="register">去注册</button>
<script>
    function yz(){
        //获取数据
        let name=$("#name").val()
        //发送请求
        $.get("find.do",{name},(resp)=>{
            if(resp.trim()==="true"){
                $("#tip").text("用户名已经存在")
                $("#register").prop("disabled",true)
            }else{
                $("#tip").text("")
                $("#register").prop("disabled",false)
            }
        },"text")
    }
</script>
</body>
</html>

验证用户名的servlet：

package com.zking.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

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
 *验证用户名是否存在
 */
@WebServlet("/find.do")
public class FindServlet extends HttpServlet{

	//数据库中存在的名字
    List<String> list = new ArrayList<String>();

    {
        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 {
        //去数据库查询
        String name = req.getParameter("name");
        boolean f=false;
        for (String n : list) {
            if(n.equals(name)){
                f=true;
                break;
            }
        }
        //需要把结果告诉前台
        PrintWriter out = resp.getWriter();
        out.println(f);
    }
	
}

这篇文章的内容就到这里结束了