web.Ajax

最新推荐文章于 2022-10-16 19:18:18 发布

liwangdeng

最新推荐文章于 2022-10-16 19:18:18 发布

阅读量84

点赞数 1

文章标签： web

本文链接：https://blog.csdn.net/liwangdeng/article/details/124567489

版权

一.理解Ajax

Ajax:简单概述一下就是不刷新整个界面，只刷新局部。

举例：列如进行登录时，假如输入密码或账号错误时，重新回到登录界面时，框内的值都会被清空，而Ajax就可以很好的解决这个问题。

好处：只更新部分界面，有效利用宽带，提高用户体验。

主要有三个方法：$.get $.post $.ajax,get和post只有单词不同

语法：$.get("url",data,fun(){},"text")
   $.post("url",data,fun(){},"text")
   $.ajax({
   url:"",
   type:"get|post",
   data:{},
   dataType:"",
   success(){}
   })

都需要导入jquery

二.代码展示

案例1.登录代码，$.Ajax和$.get方法

<body>
<p><input type="text" id="account" name="account"></p>
<p><input type="text" id="password" name="password"></p>
<button onclick="login()">登录</button>
<script>
//无刷新
function login(){
	//取到页面的值
	let account=$("#account").val()
	let password=$("#password").val()
	//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请求
	//post请求，只需要改个单词
	$.get(
			//请求地址
			"login.do",
			//携带过去的数据，直接放数据，名字就是数据的名字
			{account,password},
			//回调函数，请求后会调用
			//resp就是后台给我的值，resp可以随便给
			function(resp){
				//trim去空格
				//contains
				if(resp.trim()==="yes"){
					alert("登陆成功")
					location.href="index.jsp"
				}else{
					alert("登录失败")
				}
			},
			"text"//希望后台给我的是文本
			)
			 /**
	        $.get("url",data,fun(){},"text")
	        $.post("url",data,fun(){},"text")
	        $.ajax({
	            url:"",
	            type:"get|post",
	            data:{},
	            dataType:"",
	            success(){}
	        })
	         **/
}
</script>
</body>

过滤器代码展示filter

package filter;

import java.io.IOException;
import java.nio.charset.StandardCharsets;

import javax.servlet.FilterChain;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebFilter;
@WebFilter("/*")
public class Filter implements javax.servlet.Filter{

	@Override
	public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
			throws IOException, ServletException {
		//使编码为中文
		request.setCharacterEncoding("utf-8");
		//如果上面语句不生效就用破碎重组
//		String account=request.getParameter("account");
//		account=new String(account.getBytes(StandardCharsets.ISO_8859_1),StandardCharsets.UTF_8);
//		String password=request.getParameter("password");
//		password=new String(password.getBytes(StandardCharsets.ISO_8859_1),StandardCharsets.UTF_8);
		chain.doFilter(request, response);
		
	}
	

}

sevlet代码展示

package 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.println("yes");
        }else{
            out.println("no");
        }
	}

}

案例2.注册功能代码

$("#register").prop("disabled",true)，prop设置按钮是否禁用

<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>

sevlet代码展示

package 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;
@WebServlet("/find.do")
public class FindServlet extends HttpServlet{
	//模拟数据库，往集合里面添加数据充当数据库
	List<String> list=new ArrayList<>();
	{
		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");
		PrintWriter out = resp.getWriter();
		boolean f=false;
		for (String n : list) {
			if(n.equals(name)) {
				f=true;
				break;
			}
		}
		out.print(f);//把值给到前台
	}

}

案例3：搜索提示功能代码展示

<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">

</ul>
<script>
function search(){
	//得到值
	let keyword=$("#keyWord").val()
	$.get(
		"search.do",
		{keyWord},
		(resp)=>{
			//清空框内值
			$("#list").empty()
			//resp加json可变为数组
			for(let n of resp){//foreach
				$("#list").append("<li>"+n+"</li>")
			}			
		},"json"
	);
}
</script>
</body>

sevlet代码展示

package 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;
@WebServlet("/search.do")
public class SearchServlet extends HttpServlet{
	//数据库拿值
	List<String> list=new ArrayList<String>();
	{
		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<String>();
		for (String n : list) {
			if(n.contains(keyWord)) {
			ns.add(n);
			}
		}
		//设置响应编码
		req.setCharacterEncoding("utf-8");
		//通过响应获得输出
		PrintWriter out = resp.getWriter();
		//需要将集合变成json
		//1.需要获得转换对象
		ObjectMapper mapper=new ObjectMapper();
		//2.调用方法
		String str=mapper.writeValueAsString(ns);
		out.print(str);
	}

}

将集合变成json的方法

1.获得转换对象

ObjectMapper mapper=new ObjectMapper();

2.调用方法

String str=mapper.writeValueAsString(ns)填集合

打印ou.print()

总结：今天的分享就到这里了

liwangdeng

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web.Ajax

一.理解AjaxAjax:简单概述一下就是不刷新整个界面，只刷新局部。举例：列如进行登录时，假如输入密码或账号错误时，重新回到登录界面时，框内的值都会被清空，而Ajax就可以很好的解决这个问题。好处：只更新部分界面，有效利用宽带，提高用户体验。主要有三个方法：$.get $.post $.ajax,get和post只有单词不同语法：$.get("url",data,fun(){},"text") $.post("url",data,fun(){},"text"...
复制链接

扫一扫