当前位置:   article > 正文

beego ajax接口对接案例

beego ajax接口对接案例

beego是有两种模式

一种mvc就是直接前端页面导入beego的views文件夹 直接插入 beego的模板语法 来服务器端渲染数据页面

一种是api接口模式,也就是直接提供api接口,前后端分离来分别渲染数据和页面

先说简单版的吧   对了  注意 跨域 !!!!!下面会讲

首先上 后端部分

我的 群852311425  beego交流群 ,绝对原创,转载请附上 本微博链接。

1、router.go 路由加入一段

beego.Router("/ajaxTest",&controllers.MainController{},"get:AjaxTest")

2、default.go  新建一个方法  前面两行代码解决跨域的 

  1. func (c *MainController) AjaxTest() {
  2. //c.Data["json"]= `[{"name":"cxh","sex":"man"},{"name":"cxh1","sex":"man1"}]`
  3. //c.ServeJSON()
  4. c.Ctx.ResponseWriter.Header().Add("Access-Control-Allow-Origin", "*")
  5. c.Ctx.ResponseWriter.Header().Add("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept")
  6. c.Data["json"] = map[string]interface{}{"code":"200","msg":"請求成功","data":"33333"}
  7. c.ServeJSON()
  8. }

然后是前端请求部分

1、注意  http://192.168.105.102:8080 url地址  是你本地的  ip地址  :8080是你beego的服务地址 ,

不知道本地地址的  你打开命令符 cmd  输入 ipconfig 就可以看到  其中有一个 是ipv4的 那个ip就是了,

对了   记得 引用 jquery,我这边简单演示下  而已,所以直接jquery  vue react的 同学   跨域  注意  !!!!!

  1. $.ajax({
  2. url:"http://192.168.105.102:8080/ajaxTest",
  3. dataType:"json",
  4. type:"get",
  5. data:{
  6. },
  7. success:function(res){
  8. debugger
  9. }
  10. })

这样就可以了,当然,你过要的是复杂的返回数据格式 可以关注我的博客,我后续会更新,比如对象嵌套对象 

比如  怎么返回给前端  数组格式啊    对象嵌套对象格式啊 

怎么返回像 如下的格式  也可以进博主的qq群问下。我的 群852311425  beego交流群 ,绝对原创,转载请附上 本微博链接。

  1. {
  2. "code": 200,
  3. "data": [
  4. {
  5. "name": "小明",
  6. "old": "7"
  7. },
  8. {
  9. "name": "小紅",
  10. "old": "10"
  11. }
  12. ],
  13. "msg": "请求成功"
  14. }

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/2023面试高手/article/detail/509425
推荐阅读
  

闽ICP备14008679号