前端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 ...
随机推荐
- 使用JavaScript脚本控制媒体播放(顺序播放和随机播放)
在JavaScript脚本中获取<audio.../>元素对应的对象为HTMLAudioElement对象,<video.../>元素对应的对象为HTMLVideoElemen ...
- JVM jmap
需求:经常会因为OOM而导致系统挂掉,很多服务无法连接,所以准备了解一下. 参考:http://www.open-open.com/lib/view/open1390916852007.html 一. ...
- CentOS 7运维管理笔记(12)----PHP页面失去焦点后变成空白的解决方法
昨天搭建好了LAMP服务器,可以正常看到PHP页面了.后来发现每当把鼠标从浏览器中移开而点击其他地方时,PHP页面就变成一片空白.即PHP页面失去焦点后就变空白,不知为何. 今天网上搜索解决方案,终于 ...
- 【Python之搜索引擎】(一)概述
learning goal--search engine 1.Find datas - crawl 2.Index 3.page rank String操作 提取网络中的链接 Extracting a ...
- Vue2.0中的Ajax请求
Vue可以借助于vue-resource来实现Ajax请求 http请求报文 浏览器与服务器数据交互是遵循http协议的,当浏览器要访问服务器的时候,浏览器需要将相关请求数据提交给服务器. 格式分为: ...
- JavaScript中模块化工具require.js
什么是require.js? RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一.它还同时可以和其他的框架协同工作,使用RequireJS必将使您的前端代 ...
- 佛系结对编程---四则运算(Core 第四组)
----by core 第四组 ( 邹卫其 范力 ) 一. 项目介绍 1. 能自动生成小学四则运算题目并给出答案,生成题目时可以选择下列参数: 1)生成题目数量 2)每道题目中运算数数量 ...
- 深入理解mysql的底层实现
MySQL 的常用引擎 1. InnoDB InnoDB 的存储文件有两个,后缀名分别是 .frm 和 .idb,其中 .frm 是表的定义文件,而 idb 是数据文件. InnoDB 中存在表锁和行 ...
- Oracle归档模式和非归档模式的区别
一.查看oracle数据库是否为归档模式: Sql代码1.select name,log_mode from v$database; NAME LOG_MODE ------------------ ...
- undo表空间不足,ORA-30036: unable to extend segment by 8 in undo tablespace 'UNDOTBS2'
故障现象:UNDO表空间越来越大,长此下去最终数据因为磁盘空间不足而崩溃: 问题分析:本问题在ORACLE系统管理中属于比较正常的一现象,产生问题的原因主要以下两点: 1. 有较大的事务量让Oracl ...