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格式了。键值对中的值是获取到的控件对象
但是请求头不一样 request.setRequestHeader('content-type', 'application/json;charset=utf-8');
而监听事件回调中的successCallback方法, 也可以按照第三点的方式,让后端返回数据也是JSON格式。
从而实现 前后端数据交互都是JSON格式。
5、利用AJAX和POST方法验证登陆表单,如何通过表单序列化把表单控件的值发送到服务端验证
针对按钮的监听事件,方法中都会有 监听事件回调、配置请求参数、发送请求,但是没有了请求头,因为FormData不需要设置请求头,服务端可以自动识别
var data = new FormData(login);
发送请求为 request.send(data);