go语言web开发04 - http请求往后端发送数据与后端往前端返回数据

一、get请求往后端发送数据与后端获取客户端发送数据的两种方法

1.1、http get请求往后端发送数据与后端获取get请求发送的数据方法一：参数键值对类型数据

1.路由设置：beego.Router("/user", &controller.UserController{})
2.客户端请求路径：http://127.0.0.1:8090/user?id=111
3.后端获取客户端发送数据的两种方法：
    3.1.方法一：id := c.Input().Get("id")
    3.2.方法二：id2 := c.GetString("id")

1.2、http get请求往后端发送数据与后端获取get请求发送的数据方法二：路径类型数据

1.路由设置：beego.Router("/user/?:id:int", &controller.UserController{})
2.客户端请求路径：http://127.0.0.1:8090/user/111

3.后端获取客户端发送数据的两种方法：
    3.1、方法一：id := c.GetString(":id")
    3.2、方法二：id2 := c.Ctx.Input.Param(":id")

二、post请求往后端发送数据与后端获取客户端发送的数据的方法

2.1、路由设置

beego.Router("/params", &controllers.ParamsController{})

2.2、form表单提交post请求

<!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>

<h1>POST提交数据</h1>

<form action="/params" method="POST">        <!-- action="/params": 是请求的路径。method：是请求的方法 -->
    用户名：<input type="text" name="username"><br>        <!-- form表单提交数据时一定要有name这个标签，同时指定值，后端是根据name的值来获取请求的数据的 -->
    年 龄: <input type="text" name="age"><br>
    价 格: <input type="text" name="price"><br>
    <!-- 是：<input type="radio" name="is_true" value="true">&nbsp; -->
    <!-- 否：<input type="radio" name="is_true" value="false"><br> -->    <!-- 单选radio时要保证多个radio类型的name字段的值要一样（如果name字段不一样就是多选了） -->
    <input type="submit" value="提交">        <!-- 提交按钮的类型一定要是submit才可以提交数据到后端 -->
</form>
    
</body>
</html>

2.3、后端获取post请求里的数据

方法一：通过GetString()方法获取请求里的数据

func (c *ParamsController) Post() {
    username := c.GetString("username")
    age := c.GetString("age")
    price := c.GetString("price")
    fmt.Println(username)
    fmt.Println(age)
     fmt.Println(price)
}

方法二：通过ParseForm()将请求数据解析到结构体

type UserStruct struct {
    Name string `form:"username"`
    Age int    `form:"age"`
    Price int `form:"price"`
}

func (c *ParamsController) Post() {
    user := UserStruct{}
    err := c.ParseForm(&user)
    if err != nil {
        fmt.Println("parseForm failed:",err)
    }
    fmt.Println(user)

    c.TplName = "success.html"
}

三、ajax往后端发送数据与后端获取ajax发送数据的两种方法

3.1、全局配置

1、路由设置

beego.Router("/ajax_test", &controllers.AjaxController{})

2、添加配置

使用ajax进行数据交互需要在配置文件 “app.conf” 里添加如下配置，使beego支持获取Request Body 里的 JSON 或 XML 的数据。

copyrequestbody = true

3.2、ajax发送json格式的数据给后端与后端获取数据并响应ajax

1、ajax发送数据到后端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/static/js/jquery.min.js"></script>        <!-- 引用jquery文件 -->
</head>
<body>

<h1>ajax 提交数据</h1>

<form>         <!-- 这里也是用form表单获取数据，但是没有指定提交数据的路径和方法 -->
    用户名：<input type="text" name="username" id="username"><br>         <!-- 此处的input标签需要有id或者class字段与对应的值，ajax获取数据时会用到 -->
    年 龄: <input type="text" name="age" id="age"><br>
    价 格: <input type="text" name="price" id="price"><br>
    <input type="button" value="提交" id="btn">         <!-- 这里提交按钮的类型就不是submit而是button了，submit类型是提交数据，button类型就是一个普通的按钮（不会自动提交数据） -->
</form>

<!-- js -->
<script>
    var btn = document.getElementById("btn");       // 根据id获取提交按钮
    btn.onclick = function() {           // 给提交按钮绑定点击事件（onclick是点击事件）的脚本
        var username = document.getElementById("username").value;        // 根据id是username值的标签获取输入框内的值
        var age = document.getElementById("age").value;
        var price = document.getElementById("price").value;
        $.ajax({        // 发送alax请求
            url: "/ajax_test",         // 请求的路径
            type: "POST",             // 请求的方法
            data: JSON.stringify({      // 通过json方法将发送的数据编码
                "username": username,
                "age": age,
                "price": price
            }),
            dataType: "JSON",        // 指定交互的数据类型为JSON类型
            success:function(data) {      // 发送数据成功触发的函数，（data）为后端返回的数据
                var code = data["code"]     // 获取返回数据里的code字段和message字段
                var message = data["mssage"]        
                if (code == "200"){      // 判断，如果code == 200就是处理成功
                    alert(message)       // 弹出返回的消息
                }
            },
            error:function(data) {        // 发送数据失败触发的函数，（data）为后端返回的数据
                alert("处理异常")
            }
        })

    }
</script>
    
</body>
</html>

2、后端获取ajax发送的json数据

// 定义结构体
type UserStruct struct {
    UserName string
    Age      string
    Price    string
}

func (c *AjaxController) Post() {
    var user UserStruct     // ajax发送的所有数据都是字符串类型的，这里结构体的字段要都设置字符串类型
    // 获取ajax数据 - 需要再配置文件里添加：copyrequestbody = true(如果不设置这个配置无法通过ajax实现交互)
    body := c.Ctx.Input.RequestBody
    json.Unmarshal(body, &user1)        // 将body里的数据直接解析到结构体
    fmt.Println(user)

    var result = map[string]string{"code": "200", "mssage": "处理成功"}
    c.Data["json"] = result      // 返回数据，返回的数据键一定要是”json“
    c.ServeJSON()     // 返回json格式数据
}

3.3、ajax发送字符串类型的数据到后端与后端获取数据并返回处理结果

1、ajax发送数据到后端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/static/js/jquery.min.js"></script>        <!-- 引用jquery文件 -->
</head>
<body>

<h1>ajax 提交数据</h1>

<form>         <!-- 这里也是用form表单获取数据，但是没有指定提交数据的路径和方法 -->
    用户名：<input type="text" name="username" id="username"><br>         <!-- 此处的input标签需要有id或者class字段与对应的值，ajax获取数据时会用到 -->
    年 龄: <input type="text" name="age" id="age"><br>
    价 格: <input type="text" name="price" id="price"><br>
    <input type="button" value="提交" id="btn">         <!-- 这里提交按钮的类型就不是submit而是button了，submit类型是提交数据，button类型就是一个普通的按钮（不会自动提交数据） -->
</form>

<!-- js -->
<script>
    var btn = document.getElementById("btn");       // 根据id获取提交按钮
    btn.onclick = function() {           // 给提交按钮绑定点击事件（onclick是点击事件）的脚本
        var username = document.getElementById("username").value;        // 根据id是username值的标签获取输入框内的值
        var age = document.getElementById("age").value;
        var price = document.getElementById("price").value;
        $.ajax({        // 发送alax请求
            url: "/ajax_test",         // 请求的路径
            type: "POST",             // 请求的方法
            data: {        // ajax发送的数据（这里没有通过json编码）
                "username": username,
                "age": age,
                "price": price
            },
            dataType: "JSON",        // 指定交互的数据类型为JSON类型
            success:function(data) {      // 发送数据成功触发的函数，（data）为后端返回的数据
                var code = data["code"]     // 获取返回数据里的code字段和message字段
                var message = data["mssage"]        
                if (code == "200"){      // 判断，如果code == 200就是处理成功
                    alert(message)       // 弹出返回的消息
                }
            },
            error:function(data) {        // 发送数据失败触发的函数，（data）为后端返回的数据
                alert("处理异常")
            }
        })

    }
</script>
    
</body>
</html>

2、后端获取ajax发送的数据并响应ajax

func (c *Ajax2Controller) Post() {
    username := c.GetString("username")      // 直接通过GetString()方法即可获取ajax发送的数据
    age := c.GetString("age")
    price := c.GetString("price")
    fmt.Println(username, age, price)

    var result = map[string]string{"code": "200", "message": "处理成功",}
    c.Data["json"] = result
    c.ServeJSON()
}

四、后端返回数据

4.1、路由配置

beego.Router("/othertype", &controllers.OtherTypeController{})

4.2、返回json格式数据

// 定义返回数据类型
type UserStruct struct {
    Id int `form:"id"` 
    Name string `form:"username"`
    Age int    `form:"age"`
    Price int `form:"price"`
}

// 返回json格式数据
func (c *OtherTypeController) Get() {
    
    user := UserStruct{Id: 1, Name: "Dream", Age: 22, Price: 45,}
    json格式数据传输
     c.Data["json"] = &user         // c.Data["json"] ：里面的键一定要是“json”, 返回什么数据就要是什么
     c.ServeJSON()        // 返回数据
}

访问：

4.3、返回xml格式数据

// 定义返回数据类型
type UserStruct struct {
    Id int `form:"id"` 
    Name string `form:"username"`
    Age int    `form:"age"`
    Price int `form:"price"`
}

// 返回json格式数据
func (c *OtherTypeController) Get() {
    
    user := UserStruct{Id: 1, Name: "Dream", Age: 22, Price: 45,}
    json格式数据传输
     c.Data["xml"] = &user         // c.Data["xml"] ：里面的键一定要是“xml”, 返回什么数据就要是什么
     c.ServeXML()        // 返回数据
}

访问：

4.4、返回jsonp格式数据

// 定义返回数据类型
type UserStruct struct {
    Id int `form:"id"` 
    Name string `form:"username"`
    Age int    `form:"age"`
    Price int `form:"price"`
}

// 返回json格式数据
func (c *OtherTypeController) Get() {
    
    user := UserStruct{Id: 1, Name: "Dream", Age: 22, Price: 45,}
    json格式数据传输
     c.Data["jsonp"] = &user         // c.Data["jsonp"] ：里面的键一定要是“jsonp”, 返回什么数据就要是什么
     c.ServeJSONP()        // 返回数据
}

访问：

4.5、返回yaml格式数据

// 定义返回数据类型
type UserStruct struct {
    Id int `form:"id"` 
    Name string `form:"username"`
    Age int    `form:"age"`
    Price int `form:"price"`
}

// 返回json格式数据
func (c *OtherTypeController) Get() {
    
    user := UserStruct{Id: 1, Name: "Dream", Age: 22, Price: 45,}
    json格式数据传输
    c.Data["yaml"] = &user         // c.Data["yaml"] ：里面的键一定要是“yaml”, 返回什么数据就要是什么
     c.ServeYAML()        // 返回数据
}

返回YAML格式数据访问时直接是一个YAML格式的文件下载下来了。

posted @ 2020-08-31 18:03 欧-阳阅读(1112) 评论(0) 收藏举报

刷新页面返回顶部

欧阳

如今刚好，没有来日方长！！

go语言web开发04 - http请求往后端发送数据与后端往前端返回数据

一、get请求往后端发送数据与后端获取客户端发送数据的两种方法

二、post请求往后端发送数据与后端获取客户端发送的数据的方法

三、ajax往后端发送数据与后端获取ajax发送数据的两种方法

四、后端返回数据

公告