将数据从前台传到后台方法总结

目录

一、通过ajax

二、在action中请求后台的方法

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

四、最简单的标签

五、用的最多的表单

六、目前最流行的ajax异步请求 

1、第一步：首先构造需要发送给后台的json格式数据

2、第二步：使用jquery的ajax、load、get、post、getJSON、getScript、getHTML等方法。

七、对于构造json格式对象的数据，有以下几种方法

一、通过ajax

传给后台的数据通过json封装起来，再用ajax将json传到后台，ajax是用到Jquery的ajax，在jsp先加入Jquery的引用

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

js传值的方法如下

function testAjax() {
    varusers=[{name:'张三',   age:'21', birth:'1994-12-12'},
              {name:'李四',   age:'20', birth:'1995-12-11'},
              {name:'wangwu', age:'20', birth:'1995-12-11'}];
    $.ajax({
        type:'POST',
        data:JSON.stringify(users),
        contentType :'application/json',
        dataType:'json',
        url :'user/saveJsonUser.do',
        success :function(data) {
            alert("OK");
        },
        error :function(e) {
            alert("error"); 
        } 
    }); 
}

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

<code class="language-javascript">@RequestMapping(value="/saveJsonUser.do",method=RequestMethod.POST)    
public Map saveJsonUser(@RequestBody User[]users){  
    for(Useru:users){   
        System.out.println(u.getName()+"  "+u.getAge()+"  "+u.getBirth());   
    }   
    Map result=newHashMap();  
    result.put("success","123");  
    return result;    
}</code>  

二、在action中请求后台的方法

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

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

function query() {
    var inputs = document.getElementsByName("sex");//对象是单选选项
    for(var i = 0; i < inputs.length; i++) {
        if(inputs[i].checked) {//是否选中
            varsex = inputs[i].value;
            document.getElementById("query").action = projectName+"/query.do?currentPage=1&stsex="+ sex;
            break;
        }else{ 
            document.getElementById("query").action = projectName+"/query.do?currentPage=1";
        } 
    } 
    document.getElementById("query").submit();//提交到后台 
}

四、最简单的标签

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

五、用的最多的表单

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

六、目前最流行的ajax异步请求 

1、第一步：首先构造需要发送给后台的json格式数据

var sendData = {
    forgetType:flag,
    loginID:recevData.loginID,
    contactType:contactType,
    countryCode:countryCode,
    areaCode:areaCode,
    phone:phone,
    email:email,
    token:recevData.userInfo.token,
    purpose:purpose,
};

2、第二步：使用jquery的ajax、load、get、post、getJSON、getScript、getHTML等方法。

$.ajax({
    type:"post",
    url:"ResetLoginIDorPwd.action",
    data:sendData,
    success:function(data){
        if(isStrEmpty(data.error)){
        $("#sendResult").text(sendResult);
        gotoStep3();
        }else{
        $.alert(data.error);
        gotoLoginForm();
        }
    },
    error:function(){
        $.alert("<s:text name="err.system"/>");
        gotoLoginForm();
    }
});

七、对于构造json格式对象的数据，有以下几种方法

1：var data1 = new Object();
    data1.username = "liufu";
    data1.userpwd = "abc";
    data1.age = 22;
 
2：var data2 = {
        username:"liufu",
        userpwd:"abc"
    }
    data2.age = 22;
 
  data1 和data2里面的数据是一样的。都可以放在jquery的所有ajax请求功能的方法中的第二个参数位置。
  注意：在ajax方法的第二个位置的数据必须是*json格式的对象*  ，而不能够用JSON.stringify(data1)转化为String后再放入