前端向后台传值的5种方式总结
一、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");