前端ajax的各种与后端交互的姿势
前端中常常用的与后端交换数据的话,通常是要用到ajax这种方法的
但是交互的方式有很多种,很多取决于你后端的属性,我这儿主要列举我目前项目比较常用的两种方式
--一个是我们通用的web api和控制器,
首先我们来仔细看看ajax来与webapi做的交互数据
这里先简单描述一下web api的四种属性--GET,POST,PUT,DELETE
这里面我永昌使用的是GET和POST
如果这时候我们需要用到AJAX与那些数据做后端交互的话
$.ajax({
url: "你的webapi",
type: "Get",
DATA{},//这里面写你要传给后端的数据,不过GET方法一般不需要,直接读就可以了
success: function (data) {
//成功后的return事件
}
error: function (data) {
alert("data");//请求错误后的报错事件(很重要,如果你报错了不知道哪儿要改的话这个可以帮助你,我个人感觉主要是500报错)
}
})
这种GET一般在网页初始化的时候从后端读取到一些数据然后赋给页面上(可能我的专业术语表达不标准,见谅QAQ)
然后我要讲的是POST方法
$.ajax({
url: "你的webapi",
type: "POST",
DATA{},//这里面写你要传给后端的数据,这里面有点十分重要就是你的webapi方法上面一定要加[HTTPPOST]不然会500报错
success: function (data) {
//成功后的return事件
}
error: function (data) {
alert("data");//请求错误后的报错事件(很重要,如果你报错了不知道哪儿要改的话这个可以帮助你,我个人感觉主要是500报错)
}
})
一般POST方法和通常的ajax方法一样,只需要记得在你WEBAPI方法上加上[HTTPPOST]即可
剩下的我想总结一些有时候会用到的POST到控制器方法,虽然说控制器直接URLPOST即可,但是我个人还是喜欢用AJAX,主要是因为AJAX可以看下自己的psot错误在哪些地方233
$.ajax({
url: 你的控制器/你的控制器方法名字,
type: 'POST',
dataType: 'json',
data: ,//依旧是你要传递参数的值
contentType: “”application/json”,//这儿是告诉你传递参数一定是要json格式的啊
success: function (data) {
//成功后的返回事件
}
});
值得一提是我个人传递的值感觉都是json类型的,目前还没有测试过传递非json类型的参数;
本片内容先写这么多好了 ,这儿有个用到webapi的的ajax方法实例,等我过会打包到github上面再在评论区上,
新人写东西不容易,求推荐QAQ。
前端ajax的各种与后端交互的姿势的更多相关文章
- content-type常见类型辨析(以ajax与springmvc前后端交互为例)
博客搬家: content-type常见类型辨析(以ajax与springmvc前后端交互为例) 在http报文的首部中,有一个字段Content-type,表示请求体(entity body)中的数 ...
- 前端ajax异步传值以及后端接收参数的几种方式
原文参考 异步传值 前台往后台传值呢,有很多种方式,大家听我细细道来. 第一种呢,也是最简单的一种,通过get提交方式,将参数在链接中以问号的形式进行传递. // 前台传值方法 // 触发该方法调用a ...
- ASP.Net WebAPI与Ajax进行跨域数据交互时Cookies数据的传递
前言 最近公司项目进行架构调整,由原来的三层架构改进升级到微服务架构(准确的说是服务化,还没完全做到微的程度,颗粒度没那么细),遵循RESTFull规范,使前后端完全分离,实现大前端思想.由于是初次尝 ...
- ASP.Net中关于WebAPI与Ajax进行跨域数据交互时Cookies数据的传递
本文主要介绍了ASP.Net WebAPI与Ajax进行跨域数据交互时Cookies数据传递的相关知识.具有很好的参考价值.下面跟着小编一起来看下吧 前言 最近公司项目进行架构调整,由原来的三层架构改 ...
- SSM-网站后台管理系统制作(4)---Ajax前后端交互
前提:Ajax本身就为前后端交互服务的,实现功能:用户输入信息,实时判断用户的情况,这也是现在登录界面普遍流行的做法.前端js通过注释识别Controller层,该层查询返回,和之前Google验证码 ...
- Django之前后端交互使用ajax的方式
1. 在项目中前后端数据相互是一种常态, 前后端交互使用的是ajax请求和form表单的请求两种方式" ajax与form表单的区别在于: form 是整个页面刷新提交的, 但是ajax ...
- ajax学习----json,前后端交互,ajax
json <script> var obj = {"name": "xiaopo","age": 18,"gender ...
- 框架基础:ajax设计方案(三)--- 集成ajax上传技术 大文件/超大文件前端切割上传,后端进行重组
马上要过年了,哎,回家的心情也特别的激烈.有钱没钱,回家过年,家永远是舔舐伤口最好的地方.新的一年继续加油努力. 上次做了前端的ajax的上传文件技术,支持单文件,多文件上传,并对文件的格式和大小进行 ...
- 关于web前端base64转换为Blob,存入数组后 ajax请求传输到后端 接受不到文件问题
前端console输出是正常Blob对象,通过ajax formdata 传输到 后端java SpringMvc用MultipartFile接受却一直接受不到,后来直接解析HttpServletRe ...
随机推荐
- php编程--二叉树遍历算法实现
今天使用php来实现二叉树的遍历 创建的二叉树如下图所示 php代码如下所示: <?php class Node { public $value; public $child_l ...
- 小白学习css记录
一.复习 什么是CSS? 层叠样式表 -层叠样式只会被覆盖而不会被替代 CSS的使用方式 style属性---> <h1 style="css属性"></h ...
- iview table数据排序不正确
在使用iview的table组件时,要做排序 代码: sortable: true,sortMethod: (a, b, type) => { if (type === 'desc') { re ...
- html dl dt dd 标签语法与使用
一.dl dt dd认识 html <dl> <dt> <dd>是一组合标 […]
- OpenCV 小图重叠至大图指定位置
Android OpenCV Java: Codes: smallImg.copyTo( bigImg.submat( y, smallImg.rows(), x, smallImg.cols() ) ...
- 01_dubbo实例_服务分组
[为什么要服务分组?] 当一个接口有多种实现时,可以用group区分. [ Provider 的配置信息] <?xml version="1.0" encoding=&quo ...
- 2 (自我拓展)部署花的识别模型(学习tensorflow实战google深度学习框架)
kaggle竞赛的inception模型已经能够提取图像很好的特征,后续训练出一个针对当前图片数据的全连接层,进行花的识别和分类.这里见书即可,不再赘述. 书中使用google参加Kaggle竞赛的i ...
- redis 在linux安装
转自:http://futeng.iteye.com/blog/2071867 下载 官网下载 安装 tar zxvf redis-2.8.9.tar.gz cd redis-2.8.9 #直接mak ...
- mongodb 3.4分片复制集配置
1:启动三个实例 mongod -f /home/mongodb/db27017/mongodb27017.conf mongod -f /home/mongodb/db27018/mongodb27 ...
- 使用POI解析Excel时,出现org.xml.sax.SAXParseException: duplicate attribute 'o:relid'的解决办法
1.使用org.apache.poi解析excle,.xlsx类型文件InputStream is = new FileInputStream(strFileName);XSSFWorkbook wb ...