前后端数据交互之前端传值到后台
在实际的项目开发中,经常要求前后端传值。今天,主要介绍前端向后台传值的几种方法。
第一种:ajax
传给后台的数据通过json封装起来,再用ajax将json传到后台,需要添加jquery库
- window.onload = function(){
- //生成json
- var json = [];
- //实际情况中,json对象的值可通过document.getElementByName()来获取用户输入
- for (var i = 1; i < 5; i++){
- var j = {};
- j.name = "name";
- j.cars = "22";
- j.obj = i;
- json.push(j);
- }
- var a = JSON.stringify(json);
- alert(a);//json
- //传递到后台
- $.ajax({
- type:'POST',
- data:a,//json
- contentType = 'application/json',
- dataType:'json',
- url:'user/saveJsonUser.do',
- success:function(data){
- alert("发送成功");
- },
- error:function(e){
- alert("发送失败");
- }
- });
- }
2、通过form表单的action传值
一般情况下数值在传给后台之前需要校验,可以在form中的onsubmit调用js方法进行校验,当js方法返回值为true时,触发action,当js方法返回值为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();
- }
转载自: https://blog.csdn.net/henouren/article/details/78282406
转载于:https://www.cnblogs.com/yoga21/p/9214486.html
前后端数据交互之前端传值到后台相关推荐
- Android---SpringBoot实现前后端数据交互
Android-SpringBoot实现前后端数据交互 星光不问赶路人,时间不负有心人 这篇是针对android传数据到后台springboot,使用Xutils框架 使用Xutils框架 关于xut ...
- 前后端数据交互方法 汇总
这篇文章给大家介绍几种常用的前后端数据交互方法,并给出使用建议.以提高前后端协同开发的效率.非常的详细,推荐给小伙伴们,有需要的小伙伴可以参考下. 1.HTML赋值 输出到 Element 的 val ...
- 干货 | 万字长文全面解析GraphQL,携程微服务背景下的前后端数据交互方案
作者简介 古映杰,携程研发高级经理,负责前端框架和基础设施的设计.研发与维护.开源项目react-lite和react-imvc作者. 前言 随着多终端.多平台.多业务形态.多技术选型等各方面的发展, ...
- ajax连接前后端原理,前后端数据交互方法和原理
前后端数据交互方法和原理 发布时间:2018-10-28 11:25, 浏览次数:742 对于想要搞web的新手而言,会用html+css+javascript实现一个页面没什么太大的困难,但是想要前 ...
- 前后端数据交互——ajax技术
在实际开发过程中,前端页面通常需要根据后台数据实现动态生成和实时更新,因此如何实现前后端数据交互成了开发过程中的难题. 现将使用ajax技术解决前后端数据的交互: (1)ajax技术介绍: ajax一 ...
- 前后端数据交互|分页查询|表格-双向绑定|get和post的区别
目录 1 前后端数据交互 1.1 前端代码 部署在 前端服务器 1.2 前端代码 在 浏览器展示(只展示页面,没有数据)----自给自足 1.3 前端/浏览器 请求 后端数据 (后端死数据)----给 ...
- 软件测试的交互,软件测试--前后端数据交互
作为一个合格的软件测试人员, 能够熟练定位bug的位置是属于前端还是后端,是必备技能之一.所以就需要明白前后端数据是怎么进行交互的. 一.网站数据处理主要分为三层 第一层,表示层,这部分可以用HTML ...
- 基于axios前后端数据交互
基于axios前后端数据交互 一.get 1.前端 <!DOCTYPE html> <html lang="en"> <head><met ...
- 超详细总结:前后端数据交互原理
最近开始接触前后端的一些知识,查了很多资料,今天把互联网产品的前后端数据交互做个总结留做笔记. 互联网产品的前后端数据交互是通过一个通讯协议完成.前后台交互的协议主要包括HTTP,FTP,SMTP,T ...
最新文章
- sqlserver 穷举 排列 组合
- Docker安装mysql8
- ngx_rtmp_shared模块对ngx_chain_t的操作总结
- 兄弟,就你这智商就别出轨了吧?
- kafka数据到flume_大数据摄取:Flume,Kafka和NiFi
- java web开发之 spring单元测试
- Python 一键转化代码为流程图
- Calico 的默认连通性 - 每天5分钟玩转 Docker 容器技术(69)
- 怎样用一个3升的杯子和一个5升的杯子装出4升水来(杯子没有刻度)?
- 《出发吧一起》第二阶段个人总结——Day08
- Express框架学习笔记-基础
- json数据转换工具-js
- MATLAB当中reshape函数以及转置的使用
- 五大学科竞赛(一)介绍
- 新华三笔试题(助力面试)
- 【论文阅读】UAV-Based Crop and Weed Classification for Smart Farming
- 这些你必须知道的 Linux 技能
- java-php-python-ssm商场VIP管理系统计算机毕业设计
- bootstrap之data-toggle,data-dismiss,data-target用法
- [Albert 朗读行动记录贴]采纳Scalers方法:口语成长行动
热门文章
- 浏览器接收到html文档后,认识HTMl,了解HTML文档在服务器和浏览器间是如何传递的...
- ideal 本地jar依赖_通过 YARN 的资源本地化技术减少 Flink 在 YARN 上的部署时间
- 如何上传文件及文件夹到IPFS
- 设计模式UML类图(摘至《HeadFirst设计模式》)
- java并发总结思维导图
- Ubuntu系列10.04、11.04、12.04等虚拟机中安装VMware Tools
- 如何理解5G空口(NR)?
- 隐藏多行文本框的滚动条
- tensorflow单变量线性回归
- mysql日期函_mysql日期函数