- html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Documenttitle>
- <script src='js/jquery.js'>script>
- head>
- <body>
- <h1>helloh1>
- body>
- html>
在这个示例中,我们引入了 jQuery 库,它提供了简洁的 Ajax 实现方式。
标签中编写 Ajax 请求代码。- $.ajax({
- url:"IndexServlet",
- type:"get",
- data:{
- account:"admin10",
- password:"123456"
- },
- success:function(value){
- console.log(value);
- },
- error:function(){
-
- }
- });
url指定了要请求的后端 Servlet 的路径。type表示请求的类型,可以是get或post。data是要发送给后端的数据,这里是一个包含账号和密码的对象。success回调函数在请求成功时被调用,接收后端返回的数据。error回调函数在请求失败时被调用。- package com.qcby.servlet;
-
- import java.io.IOException;
- import javax.servlet.ServletException;
- import javax.servlet.annotation.WebServlet;
- import javax.servlet.http.HttpServlet;
- import javax.servlet.http.HttpServletRequest;
- import javax.servlet.http.HttpServletResponse;
-
- /**
- * Servlet implementation class IndexServlet
- */
- @WebServlet("/IndexServlet")
- public class IndexServlet extends HttpServlet {
- private static final long serialVersionUID = 1L;
-
- public IndexServlet() {
- super();
- }
-
- protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
- // 解决中文乱码
- request.setCharacterEncoding("utf-8");
- response.setCharacterEncoding("utf-8");
-
- // 接受参数
- String acc = request.getParameter("account");
- String pass = request.getParameter("password");
-
- System.out.println("账号为" + acc);
- System.out.println("密码为" + pass);
-
- String res;
- if (acc.equals("admin") && pass.equals("123456")) {
- System.out.println("登录成功");
- res = "登陆成功";
- } else {
- res = "登陆失败";
- System.out.println("登录失败");
- }
-
- // 后端给前端返回数据
- response.getWriter().write(res);
- }
-
- protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
- doGet(request, response);
- }
- }
request.getParameter()方法获取前端发送过来的参数。response.getWriter().write()方法将处理结果返回给前端。缓存问题
错误处理
error回调函数中显示错误信息,以便用户了解问题所在。性能优化