一般来讲,前端不会给后端接口,而是后端给前端接口的情况比较普遍。一些人可能不理解接口和前端开发的关系,其实不合适的接口设计会极大地影响用户的页面体验。那么今天我们就来看看,前端如何调用后端接口?有哪几种方式?
首先,要弄清楚前端提供一个接口或者调用后台接口,那么这个接口具体指什么?网上用户上传图片作为头像 这个需求需要后台人员处理,当用户登录 修改自己个人信息的时候,上传了头像。此时,后台处理该用户update个人信息,将该图片存入数据库,一般存的都是图片地址,string形式的数据。然后,要返回到前台的时候,后台人员需要对这些用户的个人信息进行处理,不只是头像,还有一些别的信息。后台通过语言编译,生成json格式的键值对(一般是json 还有xml txt 等数据格式)。生成一个地址也就是url,前台人员利用ajax,将返回的data显示到页面就好了。大体上来讲,接口一般指的是HTTP接口,也可以说是HTTP API。接口由后端提供,前端调用后端接口以获取后端数据。而且接口由URL和HTTP方法构成,URL为接口的地址,HTTP方法指的是GET, PUT, DELETE等等。
前端调用后端接口无外乎六种方法,如下:
1、打开vs,创建空的asp.net mvc演示项目【WebMVC】
(1)依次点击【文件】->【新建】->【项目】;
(2)在【新建项目】界面选择【Web】->【ASP.NET Web 应用程序(.NET Framework)】,输入名称,选择框架至少4.5版本,点击【确定】按钮;
(3)选择【空】->【MVC】->【确定】 ;
(4)创建好了项目。
2、在项目中
(1)在Controllers文件夹上点击鼠标右键,依次选择【添加】->【控制器】,即可完成HomeController的创建;
(2)在Controller的Index方法内,点击鼠标右键,选择【添加视图】;
(3)在项目中添加文件夹【Content】并添加jquery源文件;
(4)在Index页面添加jquery的引用。
3、在Index页面中添加一个输入文本框,一个按钮,以及显示结果的dom。
4、在HomeController中添加新的方法,用于接收前台传入的参数,组装后返回。
5、在Index页面,添加Jquery的ajax方式,调用后台接口,返回结果的处理代码。
6、在vs中,按F5调试运行结果,如下:
(1)在文本框中输入内容;
(2)点击按钮,调用接口,并将返回值显示在界面;
(3)如果要提交大量数据,或者敏感数据,请修改ajax的type方式,这样参数就不会在url地址栏中显示了。
本篇讲了接口的概念和前端调用后端接口的六种方式,希望对大家的前端开发项目能有所帮助。关于前端学习的更多疑问,大家可以上博学谷平台进行更加深入的学习。
在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!
相关推荐 更多
Web自动化测试主流框架有哪些?现在市面上的Web自动化测试主流框架有selenium、AutoRunner、watir、Robot Framework、QTP。这五种主流框架都是目前被广泛使用,且深受程序员的喜爱和欢迎。下面本文将一一为大家介绍这些主流框架的优缺点。
3500
2019-10-24 11:40:27
前端培训机构有必要参加吗?答案是肯定的,如果大家都可以通过自学,掌握前端开发的核心技术,那么市面上也不会有这么多大大小小的前端培训机构。一般来讲,优质的培训机构有经验丰富的讲师、与时俱进的课程以及良好的学习氛围。尤其是零基础学习者更需要系统全面的前端培训。因此,大家要考虑的不是“前端培训机构有必要参加吗”,而是“选择什么培训机构好”。
472
2020-7-29 10:51:17
在互联网技术岗位中,前端一直被定义为入门简单,发展潜力巨大的技术方向。尤其对于新接触编程的同学们而言,非常容易理解并掌握HTML和CSS的基本知识,但是作为一门技术岗位,前端开发依旧具有一定的挑战性。因此我们一定要注意前端学习中的重点难点知识,在学习的过程中尽量掌握其要点,保障在实际工作中减少踩雷的风险。
712
2020-8-07 10:27:04
许多微前端解决方案都是JavaScript 框架。JavaScript 不是可选的。每个人都想要高度交互的体验,而JS 在提供这些体验中发挥着至关重要的作用。许多JavaScript 框架都提供了 isomorphic 渲染能力。不仅能够在客户端进行拼接(stitch),还能在服务器上准备好一切
274
2020-10-15 10:37:28
HTTPS其实是SSL+HTTP的简称,当然现在SSL基本已经被TLS取代。在HTTP的基础上通过传输加密和身份认证保证了传输过程的安全性。HTTPS和HTTP的区别主要区别:ca申请证书、http是超文本传输协议,https则是具有安全性的ssl加密传输协议;http和https使用的是完全不同的连接方式;链接方式不同。
316
2020-10-20 16:08:02
免费 基础 1996
¥399 进阶 281
免费 基础 1312
免费 基础 767
¥1 进阶 129
扫描二维码,回复"前端"获取90G资料包