json数据格式转换与form表单两个属性

js的基础数据类型复习：

string、Number、Boolean、Undifined、Null、Object

1、为什么需要JSON？

obj==>json 对象 c#就可以获取数据

2、什么是JSON？

1.JSON是轻量级的文本数据交换格式

2.JSON独立于语言和平台

3.JSON具有自我描述性，更容易理解。

3、JSON的语法可以是什么？

1.数据在名称/值对中(数据在键值对中) ​

2.数据由逗号分隔 ​

3.花括号保存对象({}) ​

4.方括号保存数组([])

4、JSON的值是可以是什么？

数字（整数或浮点数） ​ 字符串（在双引号中） ​ 布尔值（true或false） ​ 数组（在方括号中） ​ 对象（在花括号中） ​ null

5、JSON对象与JS对象有什么不一样的地方？

1.没有声明变量

2.末尾没有分号

6、如何将JS对象转换为JSON对象？（重点）

stringify():将JS对象序列化为JSON字符串

parse() [pɑ:z] :将JSON字符串解析为原生的JS值

下面通过展示代码对比JS对象与JSON对象的同与异

// js对象
        var obj = {
            "employees": [
                { "firstName": "Bill", "lastName": "Gates" },
                { "firstName": "George", "lastName": "Bush" },
                { "firstName": "Thomas", "lastName": "Carter" }
            ]
        };
        // JSON对象
        {
            "employees": [
                { "firstName": "Bill", "lastName": "Gates" },
                { "firstName": "George", "lastName": "Bush" },
                { "firstName": "Thomas", "lastName": "Carter" }
            ]
        }

JS(JSON)对象转换JSON(JS)对象代码如下

        // js对象转换JSON对象
        var str = JSON.stringify(obj);
        console.log(str);
        console.log(typeof str); // typeof 查看对象类型 string
        // JSON对象转换js对象
        var obj1 = JSON.parse(str);
        console.log(obj1);
        //注意：虽然obj与obj1具有相同的属性，但它们是两个独立的、没有任何关系的对象

控制台输出效果

form表单两个属性

input知识拓展：

button、checkbox、color、date、datetime、datetime-local、email、file、hidden、image、month、number、password、radio、range、reset、search、submit、tel、text、time、url、week

有些属性是存在兼容性问题，在此不细说

input效果图如下：

创建表单必须以form标签为开头，不然不能提交表单数据

form标签有两个属性：

form action=“提交路径”

method="提交方式"   默认的提交方式为get

GET与POST提交方式的区别

GET为form表单的默认提交方式

get提交时参数直接暴露在URL上，不安全

GET将表单里的数据添加到action所指向的URL后面，并且两者之间使用”?”连接

POST的所有操作对用户来说都是不可见的,数据都在数据体(FormData)中

GET方式获取数据后，刷新不会有负面的影响，因为它只是获取数据

POST数据会被重新提交可能会产生不良的后果(浏览器应该告知用户数据会被重新提交)

GET方法向URL添加数据,URL的长度是受限制的(URL的最大长度是2048个字符),POST提交无限制

然而，在以下情况中，请使用 POST 请求：

1.无法使用缓存文件（更新服务器上的文件或数据库）

2.向服务器发送大量数据（POST 没有数据量限制）

3.发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

下面通过创建实例了解form的表单提交

先搭建一个简单的form表单提交页面（本文通过Bootstrap框架搭建）

一、打开昨天创建的项目文件，在Controllers右键添加控制器并命名为Form

二、添加视图，创建表单页面

        
        
        

            

                姓名
                
            
            

                性别
                
                    --请选择--
                    男
                    女
                
            
            

                地址
                
            
            

                表单提交
                GET提交
                POST提交
                Reset重置
            
        
    

三、本次通过第一种接收方式

在控制器创建以下方法，通过传入值返回

注意：里面的name、sex、tel是与input的name值对应的，否则无效！

填写表单并提交页面

注意：button按钮的type的值必须设置为submit才能提交表单 默认值也是submit

表单提交

提交后会跳转此页面，并注意观察URL栏，这就是默认的GET提交方式

返回的值是在控制器中通过拼接返回的

断点调试，让大家少走弯路

在控制器的数字前面点击一下会出现红色按钮就是调试，重新打开页面重新提交表单会跳转到mvc控制器里面

鼠标移入到断点的值后面，出现null就会出现空的提示，就是与表单里面的值不匹配

在菜单栏的调试按钮里，继续就是下一个断点，结束就会返回浏览器

注意：里面的name、sex、tel值必须与input的里面的name属性值一致才能起效！！！

大多参照w3c文档与老师讲解