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

本文介绍了前端向后端提交数据的多种方法,包括使用Ajax、DOM操作表单提交、JSON数据构造及验证等,并详细展示了如何利用jQuery实现Ajax异步请求。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

目录

一、通过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后再放入

 

### 前台传递BigDecimal到后台的实现方式及注意事项 在Web开发中,从前台后台传递`BigDecimal`类型的数据是一个常见的需求。由于前端通常是基于字符串形式传输数据,而后端则需要将其解析为具体的数值类型(如`BigDecimal`),因此需要注意以下几个方面。 #### 数据传递的方式 1. **JSON格式传递** 使用RESTful API接口时,可以通过JSON格式将数据前台发送至后台。此时,前台可以将`BigDecimal`类型的值作为字符串或者数字形式嵌入JSON对象中。 示例代码如下: ```json { "amount": "123.45" } ``` 后台接收到该JSON后,需手动将字符串转换成`BigDecimal`类型[^1]。 2. **表单提交** 当使用HTML表单提交数据时,输入框中的值默认是以字符串形式传递给服务器。例如: ```html <form action="/submit" method="post"> <input type="text" name="amount" value="123.45"/> <button type="submit">Submit</button> </form> ``` 此时,后台接收参数并完成类型转换即可。 #### 参数绑定与类型转换 为了简化操作,在Spring框架下可通过以下方式行自动绑定: 1. **@RequestParam 注解** 若请求参数位于URL查询串或POST请求体中,可以直接利用`@RequestParam`注解配合自定义转换器实现类型映射。 ```java @PostMapping("/process") public String process(@RequestParam BigDecimal amount) { // 处理逻辑... return "success"; } ``` 2. **DTO封装** 定义一个包含`BigDecimal`字段的数据传输对象(DTO),并通过`@RequestBody`注解放置于方法形参位置。 ```java public class RequestDto { private BigDecimal amount; // Getter and Setter methods } @PostMapping("/dto-process") public String dtoProcess(@RequestBody RequestDto requestDto) { BigDecimal amount = requestDto.getAmount(); // 一步业务处理... return "processed"; } ``` #### 注意事项 1. **避免精度丢失** 在构建`BigDecimal`对象时应优先考虑使用字符串构造函数而不是直接传入浮点数[^3]。这是因为浮点数本身存在存储误差,可能导致最终结果偏离预期。 2. **校验用户输入** 对来自客户端的数据务必加以验证,防止非法字符混入引发异常情况发生。比如金额字段只允许含有正负号、小数点以及阿拉伯数字等合法成分。 3. **国际化支持** 不同地区对于货币单位有着各自独特的表达习惯,所以在设计API之初就要考虑到这些差异因素的影响,并作出相应的适配措施。 ```java // 示例:安全地从String转为BigDecimal public static BigDecimal convertToBigDecimal(String strValue) throws NumberFormatException { if (strValue == null || strValue.trim().isEmpty()) { throw new IllegalArgumentException("Input cannot be empty"); } return new BigDecimal(strValue.trim()); } ```
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值