前后端数据交互之前端传值到后台

在实际的项目开发中，经常要求前后端传值。今天，主要介绍前端向后台传值的几种方法。

第一种：ajax

传给后台的数据通过json封装起来，再用ajax将json传到后台，需要添加jquery库

[javascript]  view plain  copy

 

1. window.onload = function(){  
2.             //生成json  
3.             var json = [];  
4.             //实际情况中，json对象的值可通过document.getElementByName()来获取用户输入  
5.             for (var i = 1; i < 5; i++){  
6.                 var j = {};  
7.                 j.name = "name";  
8.                 j.cars = "22";  
9.                 j.obj = i;  
10.                 json.push(j);  
11.             }  
12.             var a = JSON.stringify(json);  
13.             alert(a);//json  
14.               
15.             //传递到后台  
16.             $.ajax({  
17.                 type:'POST',  
18.                 data:a,//json  
19.                 contentType = 'application/json',  
20.                 dataType:'json',  
21.                 url:'user/saveJsonUser.do',  
22.                 success:function(data){  
23.                     alert("发送成功");  
24.                 },  
25.                 error:function(e){  
26.                     alert("发送失败");  
27.                 }  
28.             });  
29.         }  

2、通过form表单的action传值

一般情况下数值在传给后台之前需要校验，可以在form中的onsubmit调用js方法进行校验，当js方法返回值为true时，触发action，当js方法返回值为false时，action不触发。这样处理的好处在于当用户输入不正确时，不会刷新页面，表单仍然会保留用户之前的输入

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

[javascript]  view plain  copy

 

1. function query(){  
2.             var inputs = document.getElementsByName("sex");  
3.             for(var i = 0; i < inputs.length; i++){  
4.                 if(inputs[i].checked){  
5.                     //判断是否选中  
6.                     var sex = inputs[i].value;  
7.                     document.getElementById("query").action = projectName+"query.do?currentPage=1&stsex="+sex;  
8.                     break;  
9.                 } else{  
10.                     document.getElementById("query").action = projectName+"query.do?currentPage=1";  
11.                 }  
12.             }  
13.             document.getElementById("query").submit();  
14.         }  

转载自： https://blog.csdn.net/henouren/article/details/78282406