前台怎么接受后台的数据

Posted 2023-03-09

参考技术A 通过 await  async

一、通过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的引用

js传值的方法如下

functiontestAjax()

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

@RequestMapping(value="/saveJsonUser.do",method=RequestMethod.POST)

publicMapsaveJsonUser(@RequestBodyUser[]users)

for(Useru:users)

System.out.println(u.getName()+"  "+u.getAge()+"  "+u.getBirth());

     

    Map result=newHashMap(); 

result.put("success","123");

returnresult;

</code> 

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

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

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

functionquery()

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

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



四、最简单的标签

请求服务器

五、用的最多的表单

用户名：

密码：

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

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

varsendData =

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：vardata1 =newObject();

data1.username ="liufu";

data1.userpwd ="abc";

data1.age =22;

2：vardata2 =

username:"liufu",

userpwd:"abc"

   

data2.age =22;

  data1 和data2里面的数据是一样的。都可以放在jquery的所有ajax请求功能的方法中的第二个参数位置。

注意：在ajax方法的第二个位置的数据必须是*json格式的对象*  ，而不能够用JSON.stringify(data1)转化为String后再放入