前端发送数据到后端
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端发送数据到后端相关的知识，希望对你有一定的参考价值。
请问前端具体是怎么发送数据给后端的，可以给一点简单的代码吗，谢啦
前段发送数据到后端有两种方式post和get方式：
$.ajax(type:"post",
url:"api.php",
dataType:"json",
success:function(data)
);$.ajax(
type:"get",
url:"api.php",
dataType:"json",
success:function(data)
);
这两种都是页面js操作的，也可以直接写下边这种：
window.location.href="api.php?name=aaa&sex=1";
参考技术A 通过接口的形式，后端会给前端接口文档，然后前端通过http请求传值给后端，达到通信的目的。本回答被提问者采纳前端到后端路径
大规律：
页面：事件源-->绑定事件-->处理函数-->数据校验-->发送请求和数据-->处理响应结果展示给用户
后台: 接收请求-->接收数据-->转发业务层(业务处理)-->持久层(CRUD)-->业务层-->表现层-->页面
使用ElementUI来构建页面，在页面上引入 js 和 css 文件即可开始使用 index.css、vue.js、index.js ```html <!-- 引入ElementUI样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme- chalk/index.css"> <script src="https://unpkg.com/vue/dist/vue.js"></script> <!-- 引入ElementUI组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> ``` ? 使用Vue: ``` <script src="js/vuejs-2.5.16.js"></script> `` Vue: <html> <head> <script src="vue.js"></script> <script src="axios.js"></script> </head> <body> <div id="app"> v-model：作用：将Vue中的数据更新到表单项value属性上 v-bind:/: v-if： v-for:遍历 v-on:/@:<button @click="fun(‘这是使用vue绑定的点击事件‘)">vue的onclick</button> </div> <script> new Vue({ el:‘#app‘, datas:{ 属性名:属性值,... }, //定义方法 methods:{ method:function(){}, method2(){ //发送异步请求，axios axios.get(url?key=value&...) .then((res)->{}) .catch(()->{}) .finally(()->{}); axios.post(url,data) .then((res)->{}) .catch(()->{}) .finally(()->{}); } }, //钩子函数，VUE对象初始化完成后自动执行 created(){ }, mounted(){ } }); </script> </body> </html> created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。 mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。 其实两者比较好理解，通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步，而如果你写入组件中，你会发现在created中无法对chart进行一些初始化配置，一定要等这个html渲染完后才可以进行，那么mounted就是不二之选。 ———————————————— ElementUI:复制粘贴修改 table form pagination ... 》后台 表现层(SpringMVC)-->Controller @Controller+@ResponseBody / @RestController 接收页面请求 (类+方法)@RequestMapping/@GetMapping/@PostMapping/@DeleteMapping/@PutMapping 接收页面参数 简单数据类型 url?id=x&name=y @RequestParam url/x/y @PathVariable application/json：@RequestBody 接收集合 转发业务层 @Reference @Autowired 响应结果 @ResponseBody @RestController @RequestMapping("/xxx") public class XxxController{ @Reference / @Autowired private XxxService xxxService; @RequestMapping/@GetMapping/@PostMapping/@DeleteMapping/@PutMapping public xxx methodName(...){ } } 业务逻辑 @Service @Transactional @Autowired serverInterface public interface XxxService{ public xxx methodName(...); } serviceImpl @Server @Transactional public class XxxServiceImpl implements XxxService{ public xxx methodName(...){ } } 持久层 Mybatis Mapper.java public interface XxxMapper{ public xxx methodName(...); } Mapper.xml 规则： （1）映射文件中的namespace要和接口的类全名保持一致 （2）映射文件中的statementId(statment:select update delete select)要和接口的方法名一致 （3）映射文件中的parameterType要和接口方法的参数一致 （4）映射文件中的resultType/resultMap要和接口方法的返回值一致 SQL / resultMap / <sql> <where> <if> <selectKey> domain 数据库表
以上是关于前端发送数据到后端的主要内容，如果未能解决你的问题，请参考以下文章