前端传值给后台的三种方法-韩烨

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() {

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)

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) {//是否选中

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

}

文/Mattina(简书作者)
原文链接:http://www.jianshu.com/p/6f54bab8451e
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。

时间: 2024-08-11 05:44:28

前端传值给后台的三种方法-韩烨的相关文章

asp.net后台向前端输出js脚本的三种方法

//这个方法最快,因为它会输出到html标签之前 Response.Write("<script type='text/javascript'>alert('这个最快')</script>"); //这个最慢this.ClientScript.RegisterStartupScript(this.GetType(), Guid.NewGuid().ToString(), "alert('<form/>之前,这个最慢')", tru

前端上传图片的三种方法

前端上传图片的三种方法 Django框架下,在前端上传文件,保存在数据库,并在前端不刷新页面显示上传图片. 利用XMLHttpRequest 对象和FormData对象上传文件 Ajax上传文件 基于form表单和iframe自己实现ajax请求 1.首先创建数据库表 class Img(models.Model): path = models.CharField(max_length=128) 更新数据库 >python manage.py makemigrations >python ma

struts2中的jsp值传到后台action接收的三种方法

struts2中的Action接收表单传递过来的参数有3种方法: 如,登陆表单login.jsp: <form action="login" method="post" name="form1"> 用户名:<s:textfield name="username"/><br/> 密 码:<s:password name="password"/><br/&g

Android之intent传值的三种方法

Android之intent传值的三种方法分别是:1.startActivity():2.startActivityForResult():3.调用在下个activity自定义的方法"actionStart()",也就是最佳的方法. 一.一般方式传值跳转:startActivity()方法 /* 在MainActivity中定义如下代码 */ button1.setOnClickListener(new OnClickListener() { @Override public void

MVC控制器向View视图传值的三种方法

首先创建一个MVC的项目,其中需要一个控制器(TestController),三个视图(index,edit,detail) 1.项目结构如下: 2.控制器向视图传值的三种方法 1)提供视图模型对象(直接把对象放在View里面) 2)通过VewBag传递数据 3)通过ViewData传递数据 3.控制器源码如下: using System;using System.Collections.Generic;using System.Linq;using System.Web;using Syste

YbSoftwareFactory 代码生成插件【二十五】:Razor视图中以全局方式调用后台方法输出页面代码的三种方法

上一篇介绍了 MVC中实现动态自定义路由 的实现,本篇将介绍Razor视图中以全局方式调用后台方法输出页面代码的三种方法. 框架最新的升级实现了一个页面部件功能,其实就是通过后台方法查询数据库内容,把查询结果的 HTML 代码呈现到 Razor 视图中,考虑到灵活性,需要能在任意 Razor 视图中调用该方法,这样任意 Razor 页面都能以统一的方式方便地共享该页面部件的 HTML 内容,这对于代码的重用性和可维护性都是非常有必要的. 为实现上述要求,本文介绍如下可供选择的三种方式.   1.

小程序的组件通讯三种方法==子向父传值

小程序的组件通讯三种方法 ============================ ================================ 子向父传值 第一步:小程序子向父传值在父组件定义方法 第二步:小程序子向父传值第二部在使用子组件的标签上在父的wxml文件中把方法传递给子组件 第三步:小程序子向父传值第三步在子组件的js文件中调用this·triggerEvent触发方法同时传递参数给父组件 第四步:第四步在第一步定义好的方法内部通过e·detail来接收子组件传递回来的参数 原

Node.JS的表单提交及OnceIO中接受GET/POST数据的三种方法

OnceIO 是 OnceDoc 企业私有内容(文档)管理系统的底层Web框架,它可以实现模板文件.静态文件的全缓存,运行起来完全不需要I/O操作,并且支持客户端缓存优化,GZIP压缩等(只压缩一次),拥有非常好的性能,为您节约服务器成本.它的模块化功能,可以让你的Web进行分布式存储,在一个扩展包里即可包含前端.后端和数据库定义,只需通过添加/删除目录的方式就可实现功能删减,实现真正的模块化扩展.目前 OnceIO 已经开源,本文主要介绍node.js语言中的表单提交及OnceIO中接受GET

AJAX实现跨域的三种方法

转 由于在工作中需要使用AJAX请求其他域名下的请求,但是会出现拒绝访问的情况,这是因为基于安全的考虑,AJAX只能访问本地的资源,而不能跨域访问. 比如说你的网站域名是aaa.com,想要通过AJAX请求bbb.com域名中的内容,浏览器就会认为是不安全的,所以拒绝访问. 会出现跨域问题的几种情况: 后台在百度上寻找解决方案解决了这个问题,一共总结出三种方案:代理.JSONP.XHR2(XMLHttpRequest Level 2). 第一种方法 代理:这种方式是通过后台(ASP.PHP.Ja