JSON对象与JSON字符串的转换及应用场景-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44718747/article/details/112276305

一、Json对象

最显著的特征：对象的值可以用对象.属性的方式进行访问；

例子如下：

var person={"name":"shily","sex":"女","age":"23"}//json对象
console.log(person);
console.log(person.name);
console.log(typeof person);

输出结果是：
在这里插入图片描述

二、Json字符串：本质是一个JSON格式的字符串！！！

【注意】JSON串不能像JSON对象那样通过对象.属性的方式访问某个值
例子如下：

var person='{"name":"shily","sex":"女","age":"23"}';//json字符串
console.log(person)
console.log(person.name)
console.log(typeof person)

输出结果是：
在这里插入图片描述

三、 Json对象与Json字符串的相互转化

1、Json字符串转化为Json对象（ JSON.parse() ）

var  str = '{"name":"shily","sex":"女","age":"23"}';
var  strToObj = JSON.parse(str);
console.log(strToObj);
console.log(typeof strToObj);
console.log(strToObj.name)

输出结果为：
在这里插入图片描述

2、Json对象转化为Json字符串（ JSON.stringify() ）

var  obj = {"name":"shily","sex":"女","age":"23"}//json对象
var  objToStr = JSON.stringify(obj);
console.log(objToStr);
console.log(typeof objToStr)

输出结果为：
在这里插入图片描述
后端

func LoadUserController(r *gin.Engine){
	userGroup := r.Group("/user")
	{
		userGroup.GET("/to_register", toRegister)
		userGroup.POST("/do_register", doRegister)
	}
}
func doRegister(ctx *gin.Context)  {
	user := new(entity.RegisterUser)
	if err := ctx.ShouldBindJSON(user);err != nil {
		panic(err)
	}
	ok := service.UserRegister(user)
	if ok {
		ctx.JSON(http.StatusOK, gin.H{
			"status":0,
			"msg":"注册成功，欢迎您："+user.UserName,
		})
	}else{
		ctx.JSON(http.StatusOK,gin.H{
			"status":1,
			"msg":"注册失败，用户已存在",
		})
	}

前端

{{define "user/register.html" }}<!--当模板文件夹内含多级目录时，需要借助头尾两个花括号里来包裹我们的Html文件以此来指定每个模板在其内的具体位置-->
<html lang="en">
<head>
    <!-- JQuery -->
    <script type="text/javascript" src="/static/js/jquery-3.5.1.js"></script>
    <!-- CSS-->
    <style type="text/css">
        html,body{
            height:100%;
            width:100%;
        }
        body{
            background:url('/static/img/bg.jpg') no-repeat;
            background-size:100% 100%;
            padding-top:100px;
        }
    </style>


    <meta charset="UTF-8">
    <title>注册</title>

</head>
<body>
<form id="loginForm" name = "loginForm" method="post" enctype="application/x-www-form-urlencoded" style="width:30%; margin:0 auto;">

    <h2 style="text-align:center; margin-bottom: 20px">用户注册</h2>

    <div class="form-group">
        <div class="row">
            <label class="form-label col-md-4">请输入昵称</label>
            <div class="col-md-8">
                <input id="username" name="username" class="form-control" type="text"  placeholder="昵称" required="true" minlength="1" maxlength="16" />
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="row">
            <label class="form-label col-md-4">请输入手机号码</label>
            <div class="col-md-8">
                <input id="mobile" name = "mobile" class="form-control" type="text" placeholder="手机号码" required="true"  minlength="11" maxlength="11" />
            </div>
            <div class="col-md-1">
            </div>
        </div>
    </div>


    <div class="form-group">
        <div class="row">
            <label class="form-label col-md-4">请输入密码</label>
            <div class="col-md-8">
                <input id="password" name="password" class="form-control" type="password"  placeholder="密码" required="true" minlength="6" maxlength="16" />
            </div>
        </div>
    </div>

    <div class="row" style="margin-top:40px;">
        <div class="col-md-6">
            <button class="btn btn-primary btn-block" type="reset" onclick="reset()">重置</button>
        </div>
        <div class="col-md-6">
            <button class="btn btn-primary btn-block" type="submit" onclick="register()">注册</button>
        </div>
    </div>
</form>
</body>

<script>

    function reset(){
       //case1:使用传统js获取表单项及其值
       // document.getElementById("mobile").innerText = ""
       // document.getElementById("password").innerText = ""
       // var uid = document.getElementById("mobile").value  //document.getElementById()获取的是一个dom对象，
       // var password = document.getElementById("password").value

        //case2:借助JQuery
       $("#username").innerText = ""
       $("#mobile").innerText = ""
       $("#password").innerText = ""
   }

   function register(){
       var user = {
           "mobile" : $("#mobile").val(),//用val()取值而不是.因为val()是在有jQuery插件的时候才能用，而这里我们前面刚好使用了JQuery
           "username" : $("#username").val(),
           "password" : $("#password").val()
       };
       $.ajax({
            url:"/user/do_register",
            type:"POST",
            data:JSON.stringify(user),//这里是把对象给封装成一个JSON串注意是JSON形式的字符串而不是JSON对象
            success:function(data){//当请求成功被后端接收到时调用回调函数success。这里的data即为后端返回的数据(这里返回的是一个JSON对象不是JSON串)
                alert(data.msg);
                if(data.status == 0){//如果是JSON对象则前端可以像访问对象的属性那样来访问JSON对象的字段值
                    window.location.href="/goods/to_list";
                }else{
                    window.location.href="/user/to_register";
                }
            },
            error:function(){
                alert("请求错误，请重新尝试");
                window.location.href="/user/to_register";
            }
        });
   }

</script>
</html>
{{end}}