提交数据到后台的方法

Posted 2021-01-23 yanghanwen

一、AJAX

　　引用jquery：

1 <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>

jquery

　　构造json:

 1     var sendData = {
 2         forgetType:flag,
 3         loginID:recevData.loginID,
 4         contactType:contactType,
 5         countryCode:countryCode,
 6         areaCode:areaCode,
 7         phone:phone,
 8         email:email,
 9         token:recevData.userInfo.token,
10         purpose:purpose,
11     };

json

　　传值：　　

 1 function testAjax() {
 2  
 3     varusers=[{name:‘张三‘,   age:‘21‘, birth:‘1994-12-12‘},
 4               {name:‘李四‘,   age:‘20‘, birth:‘1995-12-11‘},
 5               {name:‘wangwu‘, age:‘20‘, birth:‘1995-12-11‘}];
 6  
 7     $.ajax({
 8  
 9         type:‘POST‘,
10  
11         data:JSON.stringify(users),
12  
13         contentType :‘application/json‘,
14  
15         dataType:‘json‘,
16     
17         url :‘user/saveJsonUser.do‘,
18  
19         success :function(data) {
20  
21             alert("OK");
22  
23         },
24  
25         error :function(e) {
26  
27             alert("error");
28  
29         }
30  
31     });
32  
33 }

ajax

　　后台处理：

　　　　用到springmvc这里参数中要加上@RequestBody，@RequestBody将HTTP请求正文转换为适合的HttpMessageConverter对象

 1 @RequestMapping(value="/saveJsonUser.do",method=RequestMethod.POST)  
 2   
 3 public Map saveJsonUser(@RequestBody User[]users){  
 4   
 5     for(Useru:users){  
 6    
 7         System.out.println(u.getName()+"  "+u.getAge()+"  "+u.getBirth());  
 8   
 9     }  
10   
11     Map result=newHashMap();  
12   
13     result.put("success","123");  
14   
15     return result;  
16   
17 }

SpringMVC

二、通过dom获取标签，触发标签的submit方法，直接提交数据到后台　

 1 function query() {
 2  
 3     var inputs = document.getElementsByName("sex");//对象是单选选项
 4  
 5     for(var i = 0; i < inputs.length; i++) {
 6  
 7         if(inputs[i].checked) {//是否选中
 8   
 9             varsex = inputs[i].value;
10  
11             document.getElementById("query").action = projectName+"/query.do?currentPage=1&stsex="+ sex;
12  
13             break;
14  
15         }else{
16  
17             document.getElementById("query").action = projectName+"/query.do?currentPage=1";
18  
19         }
20  
21     }
22  
23     document.getElementById("query").submit();//提交到后台
24  
25 }

DOM

三、简单的<a>

　　<a href="xxx.xxx?username=‘liufukin‘">请求服务器</a>

四、常用的<form>

1 <form action="xxx.xxx" method="post/get">
2     用户名：<input type="text" name="username">
3     密码：<input type="password" name="userpwd">
4     <input type="submit" value="提交">
5 </form>

form

五、在action中请求后台的方法。但是如果数值在传给后台之前需要校验，可以在form中的onsubmit调用js方法进行校验，js方法的返回值为true时，触发action，返回false时，action不起作用。

1 <form action="/test" onsubmit="myFunction()">
2   输入名字: <input type="text" name="name">
3   <input type="submit" value="提交">
4 </form>

form-onsubmit