前端基础-09-form表单&json数据

太过爱你忘了你带给我的痛 2022-06-05 05:39 170阅读 0赞

# 前端基础-form表单,json数据 #

### **1.form表单常用标签** ###

#完整的form表单标签
    <form action="http://www.baidu.com" method="post">
    ----------------------------------------------------
    #method 请求方式有两种：post,get
    #get请求：user=sdf&psd=sdf&gender=1
     参数会拼接到 https://www.baidu.com/?user=sdfsdf&psd=dfsa&gender=2
    #post请求： 
    #action 指定发送请求的地址
    ----------------------------------------------------
    
    #input框文本形式
        <input name="user" type="text"/>
    ----------------------------------------------------
    
    #input类型是password,输入的不可见：
        <input name="psd" type="password" required/>
    ----------------------------------------------------
    
    #单选框，radio是单选按钮
        <input name="gender" value="1" type="radio"/>男
        <input name="gender" value="2" type="radio"/>女
        <input name="gender" value="3" type="radio"/>保密
    ----------------------------------------------------
    
    #多选框，checkbox是复选框
        兴趣：
        <input type="checkbox"/>唱歌
        <input id="dance" type="checkbox"/><label for="dance">跳舞</label> #加label标签扩大可以点击区域
        <input type="checkbox"/>看书
        <input type="checkbox" checked="checked"/>运动 #默认选中
        <input type="checkbox" disabled="disabled"/>逛街 #disabled是不可点
    ----------------------------------------------------
    
    #下拉框：
        <select name="" >
            <option value="1">1</option>
            <option value="2">2</option>
            <option selected value="3">3</option> #selected默认选中是3
            <option value="4">4</option>
            <option value="5">5</option>    
          </select>
    ----------------------------------------------------
    
    #多文本框输入：
        <textarea name="" id="" cols="30" rows="10">
            </textarea>
    ----------------------------------------------------
    
    textarea {
    
        /*resize: none;*/
    / / 不能拉
        /*resize: horizontal; */
    / / 只能拉宽
        /*resize: vertical; */
    / / 只能拉高
    }
    ----------------------------------------------------
    
    #提交表单数据，会发送请求
        <input type="submit" value="注册">
    ----------------------------------------------------
    
    #简单的按钮：
        <input type="button" value="我是一个按钮">
    ----------------------------------------------------
    
    #类型reset，重置按钮，会重置form表单中元素到初始值
        <input type="reset" value="重置">
    
    </form>
    ----------------------------------------------------

### 完整运行代码： ###

### **2.JSON简介** ###

JSON:轻量级的数据交互格式，它实际在传输的时候都是字符串  
JSON:一种交互的格式，所有的语言基本上都有字符串，可以传递  
js对象:是一种js数据类型，是js特有的，无法传递交互数据

**JSON语法规则**：  
1.json数据格式的属性（键和字符串）的值都为双引号  
2.值：值：整数、浮点数（小数）、字符串、布尔、数组、对象（除了undefined/NaN）

### **JSON用法** ###

#通过字符串来定义,key-value方式展示
    
    var jsonStr = '{"name": "Jack","age":18}';
    alert(jsonStr);
    
     #通过js对象转换为字符串
        JSON在ES5标准中新添加的对象，支持IE8+
        JSON.stringify(js对象) 返回JSON
    var obj = {
       "name": "Jack","age":18};
    var x = JSON.stringify(obj); #对象转json字符串
    alert(x)
    
    # JSON字符串解析js对象
    var jsonStr = '{"name": "Jack","age":18}';
    var obj=JSON.parse(jsonStr)#json字符串转json对象
    console.log(obj)
    #遍历取出对象中的值
    for (var key in obj) {
        console.log(key, obj[key]);
    }