快捷導(dǎo)航

SpringMVC接收頁(yè)面表單參數(shù)

更新時(shí)間：2017年05月02日 10:38:23 作者：碧波寒

本篇文章主要介紹了SpringMVC接收頁(yè)面表單參數(shù)的相關(guān)知識(shí)，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧

1、直接把表單的參數(shù)寫(xiě)在Controller相應(yīng)的方法的形參中

@RequestMapping("/addUser1")
 public String addUser1(String userName,String password) {
  System.out.println("userName is:"+userName);
  System.out.println("password is:"+password);
  return "/user/success";
 }

2、通過(guò)HttpServletRequest接收

@RequestMapping("/addUser2")
 public String addUser2(HttpServletRequest request) {
  String userName = request.getParameter("userName");
  String password = request.getParameter("password");
  System.out.println("userName is:"+userName);
  System.out.println("password is:"+password);
  return "/user/success";
 }

3、通過(guò)一個(gè)bean來(lái)接收

1）建立一個(gè)和表單中參數(shù)對(duì)應(yīng)的bean

public class User { private String userName; private String password; public String getUserName() { return userName; }
　　//getter，setter方法。。. }

2）用這個(gè)bean來(lái)封裝接收的參數(shù)

　　@RequestMapping("/addUser3")
 public String addUser3(User user) {
  System.out.println("userName is:"+user.getUserName());
  System.out.println("password is:"+user.getPassword());
  return "/user/success";
 }

4、通過(guò)json數(shù)據(jù)接收

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Add User</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/resource/script/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
  $("#button_submit").click(function(){
   var name = $("#userName").val();
   var pass = $("#password").val();
   var user = {userName:name,password:pass};//拼裝成json格式
   $.ajax({
    type:"POST",
    url:"${pageContext.request.contextPath}/user/addUser4",
    data:user,
    success:function(data){
     alert("成功");
    },
    error:function(e) {
     alert("出錯(cuò)："+e);
    }
   });
  });
 });
</script>
</head>
<body>
 <form>
  <table>
   <tr>
    <td>賬號(hào)</td>
    <td>
     <input type="text" id="userName" name="userName">
    </td>
   </tr>
   <tr>
    <td>密碼</td>
    <td>
     <input type="password" id="password" name="password">
    </td>
   </tr>
   <tr>
    <td>&nbsp;</td>
    <td>
     <input type="button" id="button_submit" value="提交">
    </td>
   </tr>
  </table>
 </form>
</body>
</html>

依然可以使用bean來(lái)接收json數(shù)據(jù)

@RequestMapping("/addUser4")
 public String addUser4(User user) {
  System.out.println("userName is:"+user.getUserName());
  System.out.println("password is:"+user.getPassword());
  return "/user/success";
 }

5、使用jQuery的serializeArray() 方法序列化表單元素

如果表單元素很多，手工拼裝成json數(shù)據(jù)非常麻煩，可以使用jQuery提供的serializeArray()方法序列化表單元素，返回json數(shù)據(jù)結(jié)構(gòu)數(shù)據(jù)?！?/p>

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Add User</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/resource/script/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
  $("#button_submit").click(function(){
   //序列化表單元素，返回json數(shù)據(jù)
   var params = $("#userForm").serializeArray();
   //也可以把表單之外的元素按照name value的格式存進(jìn)來(lái)
   //params.push({name:"hello",value:"man"});
   $.ajax({
    type:"POST",
    url:"${pageContext.request.contextPath}/user/addUser5",
    data:params,
    success:function(data){
     alert("成功");
    },
    error:function(e) {
     alert("出錯(cuò)："+e);
    }
   });
  });
 });
</script>
</head>
<body>
 <form id="userForm">
  <table>
   <tr>
    <td>賬號(hào)</td>
    <td>
     <input type="text" id="userName" name="userName">
    </td>
   </tr>
   <tr>
    <td>密碼</td>
    <td>
     <input type="password" id="password" name="password">
    </td>
   </tr>
   <tr>
    <td>&nbsp;</td>
    <td>
     <input type="button" id="button_submit" value="提交">
    </td>
   </tr>
  </table>
 </form>
</body>
</html>

依然可以使用bean來(lái)接收json數(shù)據(jù)：

@RequestMapping("/addUser5")
 public String addUser5(User user) {
  System.out.println("userName is:"+user.getUserName());
  System.out.println("password is:"+user.getPassword());
  return "/user/success";
 }

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家!

您可能感興趣的文章: