博客列表 >JSON,表单序列化-2019/7/17

JSON,表单序列化-2019/7/17

降落伞的博客
降落伞的博客原创
2019年07月19日 10:54:001207浏览

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 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议