前端传值

本文详细介绍如何从前端使用Ajax和JSON将数据封装并发送到后端,包括使用Jquery的Ajax方法,以及后端如何利用SpringMVC的@RequestBody接收和处理数据。同时,文章还介绍了在提交数据前进行前端校验的方法。

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

前端传值

1、通过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() {

   var users=[{

       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对象。


@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;

}


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

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


function query() {

    var inputs = document.getElementsByName("sex");//对象是单选选项

    for(var i = 0; i < inputs.length; i++) {

       if(inputs[i].checked) {//是否选中

          var sex = 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();//提交到后台

}



作者:Mattina
链接:https://www.jianshu.com/p/6f54bab8451e
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值