当前位置 : IT培训网 > Web前端 > Web培训 > 简要说明前端怎么调用后端接口

简要说明前端怎么调用后端接口

时间:2019-10-14 14:27:39  来源:技能培训网  作者:IT培训网  已有:名学员访问该课程
前端怎么调用后端接口呢?一般来讲,前端不会给后端接口,而是后端给前端接口的情况比较普遍。一些人可能不理解接口和前端开发的关系,其实不合适的接口设计会极大地影响用户的页面体验。那么今天IT培训网就和大家一起来看看。

前端怎么调用后端接口呢?一般来讲,前端不会给后端接口,而是后端给前端接口的情况比较普遍。一些人可能不理解接口和前端开发的关系,其实不合适的接口设计会极大地影响用户的页面体验。那么今天IT培训网就和大家一起来看看。

简要说明前端怎么调用后端接口_www.cnitedu.cn

前端如何调用后端接口?

首先,要弄清楚前端提供一个接口或者调用后台接口,那么这个接口具体指什么?网上用户上传图片作为头像 这个需求需要后台人员处理,当用户登录 修改自己个人信息的时候,上传了头像。此时,后台处理该用户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地址栏中显示了。

以上六步骤,教会你成功利用前端调用后端接口,不会的小伙伴们,一定要注意了,让我们都能熟练的掌握这些技巧!

推荐阅读:

简述前端、后端、全栈工程师分别学什么

前端和Java到底哪个好 Java和前端哪个工资高

web前端未来发展趋势如何 六大方向驾遇未来

顶一下
(0)
0%
踩一下
(0)
0%

IT培训0元试听 每期开班座位有限.0元试听抢座开始! IT培训0元试听

  • 姓名 : *
  • 电话 : *
  • QQ : *
  • 留言 :
  • 验证码 : 看不清?点击更换请输入正确的验证码

在线咨询在线咨询

温馨提示 : 请保持手机畅通,咨询老师为您
提供专属一对一报名服务。

------分隔线----------------------------
------分隔线----------------------------

推荐内容

相关热点