前端向后台传值的5种方式总结

最新推荐文章于 2025-06-04 09:07:12 发布

JSai

最新推荐文章于 2025-06-04 09:07:12 发布

阅读量7.3w

点赞数 76

CC 4.0 BY-SA版权

文章标签：前台向后台传值 from表单传值 ajax传值 js传值

本文链接：https://blog.youkuaiyun.com/s2152637/article/details/90947003

本文详细介绍了网页中常见的数据提交方式，包括form表单提交和JQuery中的ajax提交。探讨了不同提交方式的使用场景，如GET与POST的区别，以及如何在后台获取提交的数据。同时，还讨论了通过URL字符串拼接提交数据的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、form表单提交（常用）

from表单把所有属于表单中的内容提交给后台，例如输入框，单选框，多选框，文本域，文件域等。

在后台可通过对应的name属性获取相应的值。
from表单中的action属性标识提交数据的地址。
method属性指明表单提交的方式。

<form action="demo.do" method="post">
        用户名：<br>
        <input type="text" name="username"><br>
        密码:<br>
        <input type="password" name="password" ><br><br>
        <input type="submit" value="提交">
    </form>

二、JQuery中的ajax提交（常用）

JavaScript中也有ajax提交，但是代码太多，所以JQuery对JS中的ajax进行了简化。引入JQuery相应的包即可使用。一般格式为：

 $.ajax({
            url: "TestJsonServlet", //提价的路径
            type: "post",       //提交方式
            data: {
                //向后台提交的数据
            },
            dataType: "JSON",       //规定请求成功后返回的数据
            success: function (data) {
                //请求成功之后进入该方法，data为成功后返回的数据
            },
            error: function (errorMsg) {
                //请求失败之后进入该方法，errorMsg为失败后返回的错误信息
            }
        });

总结：以上两种方式如果不显示的指定post提交方式，则默认的提交方式为get方式提交。此外，ajax中的url也可以直接通过字符串拼接，然后向后台提交数据，这种方式为get方式提交。下面详细说明

三、通过url字符串拼接向后台提交数据

直接在ajax中url拼接数据

$.ajax({
            url: "TestJsonServlet?id="+id+"&gender="+"男", //提价的路径
            type: "get",       //提交方式
            dataType: "JSON",       //规定请求成功后返回的数据
            success: function (data) {
                //请求成功之后进入该方法，data为成功后返回的数据
            },
            error: function (errorMsg) {
                //请求失败之后进入该方法，errorMsg为失败后返回的错误信息
            }
        });

JS提交数据，通过window.location.href指定路径提交数据。

var deleteUser = function (deleteId) {
        if (confirm("确认删除编号是【"+deleteId+"】的成员吗?")){
            window.location.href="DeleteUserServlet?deleteId="+deleteId;
        }
    }

通过a标签提交数据，通过a标签的href属性提交数据，和js提交数据类似。

<a href="DeleteUserServlet?id='3'&gender='男'"></a>

在后台中也可以互相访问相应的Servlet

  request.setAttribute("id","3");
  request.setAttribute("gender","男");
  request.getRequestDispatcher("updateUser.jsp").forward(request,response);

然后在对应的Servlet中接受参数，进行相应的处理

 String id = request.getAttribute("id");
 String gender = request.getAttribute("gender");