江苏龙网

  1. 主页 > 生活百科 > >

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

接口

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

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

文章插图
 
前端如何调用后端接口?
首先，要弄清楚前端提供一个接口或者调用后台接口，那么这个接口具体指什么?网上用户上传图片作为头像 这个需求需要后台人员处理，当用户登录 修改自己个人信息的时候，上传了头像 。此时，后台处理该用户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地址栏中显示了 。
以上六步骤，教会你成功利用前端调用后端接口，不会的小伙伴们，一定要注意了，让我们都能熟练的掌握这些技巧!




    推荐阅读


    上一篇：那些饮茶的人们

    下一篇：不会过时的茶