axios和ajax axios和ajax的区别

前端怎么调用后端接口

前端调用后端接口无外乎六种方法，如下：

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地址栏中显示了。

在前端调用后端接口通常使用以下步骤：

定义后端接口：首先，后端开发人员需要定义接口的URL和请求方式（例如：GET、POST、PUT、DELETE等）。接口定义应包括所需的参数、请求体、请求头等信息。

发起网络请求：在前端代码中，你可以使用浏览器提供的内置方法（例如：XMLHttpRequest对象或Fetch API）来发起网络请求。你也可以使用一些常用的JavaScript库（例如：Axios、jQuery.ajax等）来简化请求的过程。

构建请求：根据接口定义，构建请求的URL、请求体、请求头等信息。请求的URL应该与后端定义的接口URL一致，并包含所需的查询参数（如果有的话）。

发送请求：使用上述选择的网络请求方法发送请求。如果使用原生的JavaScript方法，可以创建一个新的XMLHttpRequest对象，设置请求方法、URL和请求头，然后使用send方法发送请求。如果使用Axios等库，你可以直接调用相应的方法，传递请求参数并发送请求。

处理响应：一旦接收到后端的响应，你可以通过事件处理程序或Promise等方式处理返回的数据。可以根据返回的状态码来确定请求是否成功，然后提取响应数据并进行相应的处理。

vue与后端交互的方式

vue与后端交互方式主要还是用Ajax方式进行的，但vue本身不支持发送AJAX请求，需要使用vue-resource、axios等插件实现。

二者都比较方便易用，也很容易与vue整合，相对来说，axios用得比较多，发送请求后，后端数据以json的格式返回，再解析到页面元素上。