ajax接口文档url路径的简写实例

 更新时间:2021年10月12日 14:36:55   作者:AnglaSolo  
前端工程师将来打交道最多的是Http API接口,此种接口会提供一个URL地址暴露在互联网上,可以通过编写Ajax代码去与之交互来完成功能,下面这篇文章主要给大家介绍了关于ajax接口文档url路径简写的相关资料,需要的朋友可以参考下

大家好,不知道各位小伙伴在写项目时向服务器发送ajax请求的时候,在url地址上每写一个分页路径时前面都要加上项目的请求根路径而感到繁琐,下面我就为大家介绍一种简便的方法直接写分页路径就行了。

我们先来看一段代码 :

 $.ajax({
        method: "get",
        url: "http://api-breakingnews-web.itheima.net/my/userinfo",
        success: res => {
           console.log()
        }
    })

以上我用的是Jquery方法向服务器发送请求的方式,里面的url地址

http://api-breakingnews-web.itheima.net/my/userinfo

是由项目的请求根路径http://api-breakingnews-web.itheima.net和分页路径/my/userinfo组成的

我们只需要新建一个js文件,在里面写入以下代码:

//设置请求根路径
$.ajaxPrefilter(options => {
    options.url = "http://api-breakingnews-web.itheima.net" + options.url;
})

其中http://api-breakingnews-web.itheima.net就是项目的根路径,当然,不同的项目根路径都不一样,我只是做个示例,你们在写的时候只需要把根路径换成你们项目的请求根路径就可以了。这个代码是建立在Jquery的 基础上的,所以要先引入Jquery,引入顺序如下:

 <script src="./assets/lib/jquery.js"></script>
 <script src="./assets/js/bassApi.js"></script>
 <script src="./assets/js/index.js"></script>

其中第一个是Jquery.js文件,第二个是我们新建的js文件,第三个是我们项目分页的js文件,顺序不能换,不然就没有效果了,这三个文件都要在项目分页的html文件底部引入,如下图

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
   
</head>
 
<body class="layui-layout-body">
   
    <!-- 导入相关的JS文件 -->
    
    <script src="./assets/lib/jquery.js"></script>
    <script src="./assets/js/bassApi.js"></script>
    <script src="./assets/js/index.js"></script>
    
</body>
 
</html>

总结

到此这篇关于ajax接口文档url路径简写的文章就介绍到这了,更多相关ajax接口文档url路径内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • AJAX跨域请求JSONP获取JSON数据的实例代码

    AJAX跨域请求JSONP获取JSON数据的实例代码

    Asynchronous JavaScript and XML (Ajax) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术。Ajax 这篇文章主要介绍了AJAX跨域请求JSONP获取JSON数据的实例代码,需要的朋友可以参考下
    2017-02-02
  • 关于Ajax中通过response在后台传递数据问题

    关于Ajax中通过response在后台传递数据问题

    这篇文章给大家介绍了Ajax中通过response在后台传递数据问题,需要的的朋友参考下吧
    2017-08-08
  • Ajax工作原理及优缺点实例解析

    Ajax工作原理及优缺点实例解析

    这篇文章主要介绍了Ajax工作原理及优缺点实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-09-09
  • 基于ajax html实现文件上传技巧总结

    基于ajax html实现文件上传技巧总结

    这篇文章主要为大家详细总结了基于ajax html实现文件上传技巧,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • 完美解决ajax访问遇到Session失效的问题

    完美解决ajax访问遇到Session失效的问题

    下面小编就为大家带来一篇完美解决ajax访问遇到Session失效的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • AJAX跨域请求数据的四种方法(实例讲解)

    AJAX跨域请求数据的四种方法(实例讲解)

    下面小编就为大家带来一篇AJAX跨域请求数据的四种方法(实例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • Ajax返回值类型与用法实例分析

    Ajax返回值类型与用法实例分析

    这篇文章主要介绍了Ajax返回值类型与用法,结合实例形式分析了ajax返回值的xml类型与文本类型详细分类、用法与相关操作注意事项,需要的朋友可以参考下
    2019-07-07
  • AJax与Jsonp跨域访问问题小结

    AJax与Jsonp跨域访问问题小结

    本文给大家汇总介绍了JavaScript的AJax,JQuery的AJax以及利用jsonp实现跨域访问的问题,非常的细致全面,有需要的小伙伴可以参考下。
    2015-12-12
  • 智能文本纠错API应用工作原理分析

    智能文本纠错API应用工作原理分析

    这篇文章主要为大家介绍了智能文本纠错API应用工作原理分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • ajax内部值外部调用不了的原因及解决方法

    ajax内部值外部调用不了的原因及解决方法

    下面小编就为大家带来一篇ajax内部值外部调用不了的原因及解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06

最新评论