登录  /  注册
博主信息
博文 13
粉丝 1
评论 0
访问量 8687
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
JSON,表单序列化-2019/7/17
降落伞的博客
原创
1182人浏览过

1、JSON是一种数据的书写格式,常用于前后端数据交互中。

  • 书写格式有两种,{...}, [...],包含的数据有Number, String, Boolean, Array, Object, Null。其中对象的属性和字符串,必须用双引号。

  • 可以使用在线解析JSON格式的工具(比如http://www.bejson.com/),来将JSON显示得更规范。

  • JS中将JSON格式字符串转换为js对象的函数  JSON.parse(JSON格式字符串)

  • JS将js对象转换为JSON格式字符串的函数JSON.stringift(js对象)

2、表单序列化,就是将表单中各个控件的值 组装成 适合 网站传输的键值对。

  • 1、创建一个与表单格式相同的数据

         首先通过FormData构造函数,实例化一个对象var formData = new FormData();

         可以手动追加键值对 formData.append('控件name', '控件输入值')

         如果要更新某个键值对 formData.set('控件name', '新的值')

         如果要删除某个键值对 formData.delete('控件name')

  • 2、序列化表单数据(两三行代码就可以把表单所有控件值 赋给一个表单对象)
         直接给FormData()对象传一个表单对象,使用表单对象中的键值对 初始化该对象

         var data = new FormData(document.forms.namedItem('form的name值'))    

         然后就可以直接获取到data中的值,比如data.get('控件name')

    实例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表单序列化</title>
    </head>
    <body>
    <form action="" name="login">
        用户名: <input type="text" name="username" value="jackson"><br>
        密码: <input type="password" name="password" value="123456" ><br>
        <input type="hidden" name="user_id" value="1010"><br>  <!--hidden类型是用来传 用户不必感知的数据-->
        <button name="submit">提交</button>
    </form>
    <script>
        var login = document.forms.namedItem('login');/*获取到表单控件*/
        var data1 = new FormData(login);/*用FormData构造函数实例化一个对象,并将表单控件中的值赋给表单对象*/
        console.log(data1.get('username')); /*利用get方法 获取到表单对象的属性*/ /*输出jackson*/
    </script>
    </body>
    </html>

    运行实例 »

    点击 "运行实例" 按钮查看在线实例


3、利用AJAX和POST方法验证登陆表单,如何处理后端返回的JSON格式状态码,从而进行正确的跳转或者错误提示。

  • 昨天是一样,即针对按钮的监听事件,方法中都会有 监听事件回调、配置请求参数
    、设置请求头、发送请求,内容也和昨天的一样。

  • 关键在于 监听事件回调中request.addEventListener('readystatechange', successCallback, false);

    successCallback中,现将request.responseText 通过JSON.parse()转化成一个JS对象,然后获取到该对象中的状态值,判断状态值,从而进行后续操作。


4、利用AJAX和POST方法验证登陆表单,如何把前端的数据以JSON格式传到服务端验证

  • 和昨天是一样,即针对按钮的监听事件,方法中都会有 监听事件回调、配置请求参数
    、设置请求头、发送请求,但会把表单数据封装成JS对象,再转为JSON字符串,监听事件回调、配置请求参数和之前一样,发送请求也一样,只是发送请求中的data已经是JSON格式了。


    465061D2-7A9D-440e-A618-0A89FE4715D8.png键值对中的值是获取到的控件对象

  • 但是请求头不一样 request.setRequestHeader('content-type', 'application/json;charset=utf-8');

  • 而监听事件回调中的successCallback方法, 也可以按照第三点的方式,让后端返回数据也是JSON格式。

  • 从而实现 前后端数据交互都是JSON格式。

5、利用AJAX和POST方法验证登陆表单,如何通过表单序列化把表单控件的值发送到服务端验证

  • 针对按钮的监听事件,方法中都会有 监听事件回调、配置请求参数、发送请求,但是没有了请求头,因为FormData不需要设置请求头,服务端可以自动识别

  • var data = new FormData(login);
    发送请求为 request.send(data);

 
批改状态:合格

老师批语:前面总结的不错 , 后面有的点模糊, 还要多做些练习
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学