前端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类型的参数;

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

时间: 2024-09-26 18:37:56

前端ajax的各种与后端交互的姿势的相关文章

服务器-前端页面我做的差不多了,但是不懂如何和后端交互,还有哪些是不能交互的需要修改的求帮助

问题描述 前端页面我做的差不多了,但是不懂如何和后端交互,还有哪些是不能交互的需要修改的求帮助 <div class=""am-list-news-bd""> <ul class=""am-list""> <li class=""am-g am-list-item-dated""> <a href=""invite-list.

类Flask实现前后端交互之代码聊天室

前言 框架 项目目录及各自功能 流程图 后端 server backend exector 前端 ajax 页面更新 演示 简易应答模式 代理模式处理外部请求 后台日志 总结 前言 这两天老是做梦,全根Python有关,这不昨晚梦见我把Python做成了类似于JavaScript一样的功能,在前端混的风生水起.结果是个梦...... 在第一次接触了Flask之后,就被它优雅的路由映射给俘获了.后来我自己又搜索了相关的知识点,算是勉强做出一个最最简化的版本.详细的内容可以查看我的这篇文章. htt

java-关于Java中Extjs前端与后台之间的数据交互

问题描述 关于Java中Extjs前端与后台之间的数据交互 本人java新手,最近新进一家公司,前端用的是Extjs,但是这个Extjs以前都没接触过,所以求大神能不能发我一个Extjs前端与java后台之间的数据交互的实例(前端输入数据,后台根据该数据在数据库中查,然后返回对应数据到前端,前端显示返回的数据),最好是用SH2框架.发我邮箱cgjiangpan@163.com,非常感谢.!!! 解决方案 网上那么多,就是通过json传输数据,如果你想用extjs,建议买本书先学习一下 解决方案二

Ext JS 4.0发布 一个与后台技术无关的前端ajax框架

ExtJS是一种主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架.&http://www.aliyun.com/zixun/aggregation/37954.html">nbsp;功能丰富,无人能出其右.无论是界面之美,还是功能之强,ext的表格控件都高居榜首. 单选行,多选行,高亮显示选中的行,推拽改变列宽度,按列排序,这些基本功能咱们就不提了. 自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染

ECharts, PHP, MySQL, Ajax, JQuery 实现前后端数据可视化

ECharts 下载js代码 工作原理浅析 在项目中引入ECharts 后台处理 数据库端MySQL PHP端 JQuery Ajax处理 ECharts 端处理 前端全部代码 演示结果 总结 最近要将后台数据库上的一些数据以可视化的方法显示到前端,找来找去,发现百度开发的这套图表工具库还不错,网上搜索了一下相关的教程,也算是实现了较为简单的demo.于是写下来,记录一下. ECharts ECharts是国人开发的一套前端的图表工具库,使用起来超方便,也很简单(当然了,前提是理解了其工作原理之

前端Ajax技术原理

ajax所包含的技术 大家都知道ajax并非一种新的技术,而是几种原有技术的结合体.它由下列技术组合而成. 1.使用CSS和XHTML来表示. 2. 使用DOM模型来交互和动态显示. 3.使用XMLHttpRequest来和服务器进行异步通信. 4.使用javascript来绑定和调用. 在上面几中技术中,除了XmlHttpRequest对象以外,其它所有的技术都是基于web标准并且已经得到了广泛使用的,XMLHttpRequest虽然目前还没有被W3C所采纳,但是它已经是一个事实的标准,因为目

ExtJs学习笔记(20)-利用ExtJs的Ajax与服务端WCF交互

ExtJs是一套非常不错的javascript UI库(第一次接触ExtJs的,可到官方网站http://www.extjs.com/deploy/dev/examples/samples.html看下示例.相信不少人会心动的),不仅组件丰富,效果漂亮,而且ExtJs集成的Ajax功能可以方便的与.Net的WCF进行交互. 这里我们将演示ExtJs的FormPanel从WCF加载数据,以及如何提交数据到WCF服务端 1.首先来定义一个用于传输信息的Class(实际开发中,可以是Linq to S

Ajax中浏览器和服务器交互详解_AJAX相关

在了解Ajax之前我们先了解一下浏览器和服务器之间如何进行交互的 1.浏览器向服务器发送请求 2.服务器接收到请求信息,根据不同的情况再返回给浏览器不同的信息 3.浏览器接收到信息,输出到当前页面上 上面介绍了浏览器和服务器交互的简单示意图,可以看到在最后一步,浏览器接收到信息后将本页面的内容全部进行了更新,但是一般情况下我们只需要将部分内容进行更新,那怎么办呢?于是服务器干脆将这个页面的内容修改后全部发送给浏览器,于是第2步,服务器向浏览器发送的便是"天上星星有几颗?我不知道啊"这么

这是前端页面-extjs4页面和数据库交互

问题描述 extjs4页面和数据库交互 var store; var grid; var pageSize = 2; var str = ""; function search(){ str = document.getElementById("sstj").value; //alert(str); store.reload({params:{ start: 0, limit: pageSize, str:str }}); } Ext.onReady(functio