Ajax 实现方式

html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        //定义方法
        function fun() {
            //使用$.Ajax()发送异步请求
            $.ajax({
                url:"ajaxServlet",//请求的路径
                type:"Post",//请求方式
                data:{"username":"jack","age":123},//请求参数
                success:function (data) {
                    alert(data);
                },//响应成功后的回调函数
            });
        }
    </script>
</head>
<body>

    <input type="button" value="发送异步请求" onclick="fun();">
</body>
</html>

AjaxServlet 类

package servlet;

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;

@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //获取请求参数
        String username = request.getParameter("username");

        //打印username
        System.out.println(username);

        //响应
        response.getWriter().write("hello:"+username);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }
}

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
要使用 Ajax 实现登录,可以按照以下步骤进行: 1. 创建一个登录表单,包含用户名和密码输入框,以及提交按钮。 2. 在 JavaScript 中,获取表单元素和提交按钮元素,并通过 addEventListener() 方法为提交按钮添加 click 事件监听器。 3. 在事件监听器中,获取用户名和密码输入框中的值,并创建一个 XMLHttpRequest 对象。 4. 使用 XMLHttpRequest 对象发送 POST 请求,向后端服务器发送登录请求,并传递用户名和密码参数。 5. 在请求成功后,获取服务器返回的响应数据,并根据响应数据决定是否登录成功。 6. 如果登录成功,可以在前端页面中显示一条登录成功的提示信息,并进行相应的页面跳转。 以下是一个示例代码,供参考: ```html <form id="login-form"> <label>用户名:</label> <input type="text" id="username" name="username"><br> <label>密码:</label> <input type="password" id="password" name="password"><br> <button type="button" id="login-button">登录</button> </form> <script> var form = document.getElementById('login-form'); var usernameInput = document.getElementById('username'); var passwordInput = document.getElementById('password'); var loginButton = document.getElementById('login-button'); loginButton.addEventListener('click', function() { var xhr = new XMLHttpRequest(); xhr.open('POST', '/login'); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.onload = function() { if (xhr.status === 200) { var response = JSON.parse(xhr.responseText); if (response.success) { alert('登录成功!'); window.location.href = '/home'; } else { alert('登录失败,请检查用户名和密码!'); } } else { alert('登录失败,请稍后再试!'); } }; var data = 'username=' + encodeURIComponent(usernameInput.value) + '&password=' + encodeURIComponent(passwordInput.value); xhr.send(data); }); </script> ``` 请注意,以上示例代码仅为参考,具体实现方式可能因后端服务器的不同而有所差异。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

稻田里展望者

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值