【JavaEE】_前端POST请求借助form表单向后端传参

目录

1. 前端POST请求借助form表单向后端传参

2. 关于parameter方法获取参数的优先性问题


前端向后端传参通常有三种方法:

第一种:使用GET请求的query string部分向后端传参:

本专栏中已经详述了前端使用GET请求的query string向后端传参的方法,

文章详情如下:

【JavaEE】_前端使用GET请求的queryString向后端传参-CSDN博客

第二种:使用POST请求的body部分向后端传参,并且body格式为form表单;

本篇介绍第二种方法;

1. 前端POST请求借助form表单向后端传参

对于POST请求,可以通过body部分来传递参数;

对于通过form表单的方式将POST请求的参数传递给后端来说,body部分的格式就是query string的格式,即form表单

此时请求报头部分有:Content-Type : application / x - www - form - urlencoded

现约定:前端构造这样的请求:

POST / postParameter

Content-Type:x-www-form-urlencoded



username=zhangsan&password=123

服务器端.java文件如下:

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("/postParameter")
public class PostParameterServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        System.out.println("username=" + username);
        System.out.println("password=" + password);
        resp.getWriter().write("ok");
    }
}

 使用Postman按上述约定构造请求:

同时也可以打卡headers部分,postman已经帮我们设置好了:

发送请求后,可以看到客户端收到的响应如下:

查看服务器日志:

即服务器成功接收了客户端请求的body部分的参数;

2. 关于parameter方法获取参数的优先性问题

在本专栏介绍HTTP请求方法时已经提过:

POST请求通常没有query string部分,所以使用body部分传参;

而GET请求通常使用query string部分传参。

现假设某一POST请求既有query string部分,又有body部分,讨论其传参优先性问题:

.java文件如下:

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("/postParameter")
public class PostParameterServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        System.out.println("username=" + username);
        System.out.println("password=" + password);
        resp.getWriter().write("ok");
    }
}

使用Postman发送一个既含有query string也含有body的POST请求:

点击发送后,查看服务器端日志:

可见这两部分同时存在时,query string优先级相对更高;

但请注意,这种写法并非是标准行为,servlet并未承诺这种情况谁更优先,很有可能在其他版本的servlet上就会不符合上述验证。

并且,如果换成其他语言的其他框架,同样地,其运行结果不可预期;

在构造HTTP请求时,请尽量符合主流的习惯写法;

  • 5
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您可以按照以下步骤实现会员登录功能: 1. 前端部分(HTML、JS、jQuery、Ajax): 在HTML页面中,创建一个表单,包含用户名和密码的输入框,并添加一个登录按钮。给表单和按钮添加对应的id属性,方便后续操作。 ```html <form id="loginForm"> <input type="text" id="username" placeholder="用户名"> <input type="password" id="password" placeholder="密码"> <button type="submit" id="loginButton">登录</button> </form> ``` 使用jQuery和Ajax发送登录请求,并处理后端返回的结果。在JavaScript代码中,监听表单的提交事件,并阻止默认行为,然后获取输入框中的值。将这些值作为参数发送到后端接口。 ```javascript $(document).ready(function() { $("#loginForm").submit(function(event) { event.preventDefault(); // 阻止表单默认提交行为 var username = $("#username").val(); var password = $("#password").val(); // 发送登录请求 $.ajax({ url: "后端接口地址", type: "POST", data: { username: username, password: password }, success: function(response) { // 登录成功,跳转到index.html window.location.href = "index.html"; }, error: function(xhr, status, error) { // 登录失败,弹框提示错误信息 alert("登录失败:" + xhr.responseText); } }); }); }); ``` 2. 后端部分(JavaEE、SSM框架、JDBC): 在后端使用JavaEE的SSM框架,通过JDBC连接MySQL数据库,实现登录功能。具体实现步骤如下: - 创建一个Controller(或者Servlet)处理前端发送的登录请求,并提供一个对应的接口。 - 在Controller中,接收前端传递的用户名和密码参数。 - 使用JDBC连接MySQL数据库,查询用户表中是否存在该用户,并验证密码是否正确。 - 根据验证结果,返回相应的响应信息给前端。 这部分的具体实现可以参考您所使用的JavaEE框架的文档和示例代码。 请注意替换代码中的"后端接口地址"为实际的后端接口地址,以及根据您的数据库表结构和业务逻辑进行相应的修改。 希望能帮到您!如果有任何疑问,请随时提出。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值