1. JSON.parse()
JSON.parse用于从一个字符串中解析出json对象
例如：
var str = '{"name":"huangxiaojian","age":"23"}'
JSON.parse(str);
结果：Object
age: "23"
name: "huangxiaojian"
proto: Object
注意：单引号写在{}外，每个属性名都必须用双引号，否则会抛出异常。
2. JSON.stringify()
JSON.stringify()用于从一个对象解析出字符串
例如：
var a = {a:1,b:2}
JSON.stringify(a)
结果："{"a":1,"b":2}"
-
JSON.stringify() 应用
下面代码，炸一看没什么毛病，代码简单明了，但是运行的时候却报错。
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
window.onload = function() {
var formData = new FormData();
formData.append('username','iiii');
$.ajax({
type:"post",
url:"regist/regist2.php",
async:true,
data: formData,
dataType: "json",
success: function(data) {
console.log(data);
}
});
}
</script>
错误信息
Jquery实现Ajax异步提交时报错"Uncaught TypeError: Illegal invocation"，百度一查发现formData是一个对象，在JQ封装是Ajax发送请求上传数据的时候，只能传字符串，jquery传递对象/数组，无法传递，并且服务端无法获取数据。JSON.stringify()方法，它可以将客户端发送的JSON数据对象进行序列化操作。因为需要把对象json序列化后，才能传递到后台，后台根据json字符串进行反序列化。
data:{wi:JSON.stringify(formData)}, // 将formData实例化
当然，当使用原生Ajax时，可以不用实例化
// 原生 Ajax
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
window.onload = function() {
var formData = new FormData();
formData.append('username','iiii');
var xhr = new XMLHttpRequest();
xhr.onload = function() {
console.log(this.responseText)
}
xhr.open("POST","regist/regist2.php",true);
xhr.send(formData);
}
</script>
3. header()
header() 函数向客户端发送原始的 HTTP 报头。
例如：
<?php
// 结果出错
// 在调用 header() 之前已存在输出
header('Location: http://www.example.com/');
?>
上述函数只用于form表单提交。
通过表单提交的时候可以做个判断，当用户名所在的输入框为空时，button按钮变成不可点击，如果不为空，button按钮设置为可点击按钮。
<body>
<form name="form1" action="" method="post">
用户名：<input type="text" name="con" id="con" value="" />
密 码：<input type="password" name="password" id="password"/>
<input type="button" name="btn" id="btn" value="提交"/>
</form>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$('#con').blur(function() {
if($('#con').val() == "") {
document.form1.btn.disabled = true;
}else {
document.form1.btn.disabled = false;
}
})
</script>
4. 自定义属性
var checks = $("input:checkbox");
var userSelect = [];
var _key = 0;
for(var i in checks) {
if(checks[i].checked == true) {
userSelect[_key].name = $(".name_"+i+"").html();
userSelect[_key].amount = $("input:text")[i].value;
_key++;
}
}
image.png
why？？？？因为userSelect是数组,userSelect[]是值，不能直接设置属性，
var checks = $("input:checkbox");
var userSelect = [];
var _key = 0;
for(var i in checks) {
if(checks[i].checked == true) {
userSelect[_key] = {}; // 将userSelect = [] 设置为对象
userSelect[_key].name = $(".name_"+i+"").html();
userSelect[_key].amount = $("input:text")[i].value;
_key++;
}
}
网友评论