Ajax的基本使用

筱☆

已于 2023-07-04 10:26:55 修改

阅读量7.2k

点赞数 9

分类专栏： JavaWeb 文章标签： ajax javascript 服务器

于 2022-05-04 09:33:04 首次发布

本文链接：https://blog.csdn.net/weixin_67235801/article/details/124565563

版权

JavaWeb 专栏收录该内容

21 篇文章 2 订阅

订阅专栏

过滤器：EncodingFilter.java

案例一：无刷新登录

登录判断：LoginServlet.java

登录界面：login.jsp

案例二：使用Ajax实现搜索自动提示

查询处理：SearchServlet.java

主界面：index.jsp

一、什么是Ajax？

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

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

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

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

二、为什么要使用Ajax？

我们可以使用Ajax进行无刷新，无刷新是指不刷新整个页面，只刷新局部。

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

三、Ajax的基本使用

1. $.Ajax ()

$.ajax(url,[settings])

2.$.post()

$.post(url, [data], [callback], [type])

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

3.$.get()

$.get(url, [data], [callback], [type])

四、案例

过滤器：EncodingFilter.java

package com.xyz.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
 */

@WebFilter("/*")
public class EncodingFilter implements Filter{

	@Override
	public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws IOException, ServletException {
		req.setCharacterEncoding("utf-8");
		//破碎重组
		
		chain.doFilter(req, resp);
	}

}

案例一：无刷新登录

登录判断：LoginServlet.java

package com.xyz.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");
	   
	   PrintWriter out = resp.getWriter();
	   if("root".equals(account)&&"root123".equals(password)) {
		   //登录成功
		   out.print("yes");
	   }else {
		   //登录失败
		   out.print("no");
	   }
	   
	}


}

登录界面：login.jsp

<%@ 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 type="text/javascript">
	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){
				//resp就是后台给我的值
				if(resp.trim()==="yes"){
					alert("登录成功")
					location.href="index.jsp"
				}else{
					alert("登录失败")
					}
				},
			
			//错误
			error(){

			}
		})

/**
		$.get( //get请求
			//1.请求路径
			"login.do", 

			//2.携带的数据
			//直接放数据，名字就是数据的名字
			{account,password}, 

			//3.回调函数
			function (resp){
				//resp就是后台给我的值
				if(resp.trim()==="yes"){
					alert("登录成功")
					location.href="index.jsp"
				}else{
					alert("登录失败")
				}
			},

			//4.返回内容格式
			"text"  //希望后台给我的是普通的文本

		)
**/

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

案例二：使用Ajax实现搜索自动提示

查询处理：SearchServlet.java

package com.xyz.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<>();
	{
		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 {
		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.print(str);
	}
	
}

主界面：index.jsp

<%@ 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>
	🔍<input id="keyWord" name="keyWord" onkeyup="search()">
	<ul id="list">
	
<script type="text/javascript">

	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>

感谢观看，下次再见