前端 - JS - 将JSON字符串转换为JS对象和Ajax编程
一、将JSON字符串转换为JS对象
1. 简单转换
<!DOCTYPE html>
<html lang="zh_hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var obj = {name: '小明', sex: '男', age: 18, email: 'xiaoming@xm.cn', study: {
school: '北京大学',
class: '软件工程一班'
}};
var json_str = JSON.stringify(obj, function(key, value){
if (key === 'name') {
return '小王';
} else {
return value;
}
}, 4);
var new_obj = JSON.parse(json_str);
console.log(new_obj);
</script>
</body>
</html>
2. 为每个属性执行回调
<!DOCTYPE html>
<html lang="zh_hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var obj = {name: '小明', sex: '男', age: 18, email: 'xiaoming@xm.cn', study: {
school: '北京大学',
class: '软件工程一班'
}};
var json_str = JSON.stringify(obj, function(key, value){
if (key === 'name') {
return '小王';
} else {
return value;
}
}, 4);
var new_obj = JSON.parse(json_str, function(key, value){
switch (key) {
case 'name':
return '小赵';
case 'age':
return 20;
default:
return value;
}
});
console.log(new_obj);
</script>
</body>
</html>
二、Ajax编程
1. GET请求
1. 创建Ajax对象
2. 监听请求
3. 初始化请求参数
4. 发送请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Ajax-GET</title>
</head>
<body>
<script>
// 1. 创建Ajax对象
var xhr = new XMLHttpRequest();
// 2. 监听请求
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
// 3. 初始化请求参数
xhr.open("GET", "ajget.php", true);
// 4. 发送请求
xhr.send(null);
</script>
</body>
</html>
$user = ["name"=>'jack', "sex"=>'male', "age"=>18];
echo json_encode($user);
2. POST请求
1. 创建Ajax对象
2. 监听请求
3. 初始化请求参数
4. 设置请求头,模拟表单类型的数组进行发送(包括application/x-www-form-urlencoded和application/json)
5. 发送请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Ajax-GET</title>
</head>
<body>
<script>
// 1. 创建Ajax对象
var xhr = new XMLHttpRequest();
// 2. 监听请求
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
// 3. 初始化请求参数
xhr.open("POST", "ajpost1.php", true);
// 4. 设置请求头
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
//定义一个对象
var user = {
name: '小明',
sex: '男',
age: 18
};
//转为json字符串
var data = JSON.stringify(user);
// 4. 发送请求
xhr.send(data);
</script>
</body>
</html>
<?php
//键为从前端传过来的数据
print_r($_POST);
//获取数据
$data = key($_POST);
//将json字符串转为对象
$user = json_decode($data);
print_r($user);
//将json字符串转为数组
$user = json_decode($data, true);
print_r($user);
- 请求头数据类型为JSON数据(服务端需要使用原始文件流接受json数据)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Ajax-GET</title>
</head>
<body>
<script>
// 1. 创建Ajax对象
var xhr = new XMLHttpRequest();
// 2. 监听请求
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
// 3. 初始化请求参数
xhr.open("POST", "ajpost2.php", true);
// 4. 设置请求头
xhr.setRequestHeader("content-type", "application/json;charset=utf-8");
//定义一个对象
var user = {
name: '小明',
sex: '男',
age: 18
};
//转为json字符串
var data = JSON.stringify(user);
// 4. 发送请求
xhr.send(data);
</script>
</body>
</html>
<?php
//获取数据
$data = file_get_contents('php://input');
echo $data;
//将json字符串转为对象
$user = json_decode($data);
print_r($user);
3. POST-FormData
1. 创建Ajax对象
2. 监听请求
3. 初始化请求参数
4. 发送请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1. 创建Ajax对象
var xhr = new XMLHttpRequest();
// 2. 监听请求
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
// 3. 初始化请求参数
xhr.open("POST", "work.php", true);
//创建formdata对象
var data = new FormData();
data.append("username", "admin");
data.append("password", "qwer1234");
// 4. 发送请求
xhr.send(data);
</script>
</body>
</html>
print_r($_POST);
4. POST-FormData(无刷新登录验证)
<?php
//判断是否登录
if (isset($_COOKIE['user'])) {
//如果已登录则输出请勿重复登录的信息并返回首页
exit('<script>alert("请勿重复登录");location.href="/index.php"</script>');
}
?>
<!DOCTYPE html>
<html lang="zh_hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录页</title>
<link rel="stylesheet" href="\css\login.css">
</head>
<body>
<h2>登录表单</h2>
<div class="f-box">
<!--取消表单的默认提交,改为自定义的Ajax提交-->
<form action="" method="POST" onsubmit="return false">
<fieldset>
<div class="e-box">
<label for="email">邮箱:</label>
<input type="email" name="email" id="email" require autofocus autocomplete="on">
</div>
<div class="p-box">
<label for="password">密码:</label>
<input type="password" name="password" id="password" require>
</div>
<div class="s-box">
<button type="submit">提交</button>
</div>
<div class="o-box">
<!--链接到注册页-->
<a href="register.php">还没有账户?注册一个吧!</a>
</div>
</fieldset>
</form>
</div>
<!--ajax提交表单数据-->
<script>
//获取表单和按钮
var form = document.querySelector("form");
var bth = document.querySelector("button");
//给按钮绑定点击事件,进行Ajax请求
bth.onclick = function() {
// 1. 创建Ajax对象
var xhr = new XMLHttpRequest();
// 2. 监听请求并将返回的提示信息展示在页面上
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
//将返回的json字符串转为js对象
var res = JSON.parse(xhr.responseText);
//根据状态代码输出相应的提示信息
switch (res.status) {
case 0:
case 1:
error = res.message;
break;
default:
error = '未知错误';
}
//将提示信息展示在表单中
var span = document.createElement("span");
span.innerHTML = error;
span.style.color = "red";
form.appendChild(span);
}
};
// 3. 初始化请求参数
xhr.open("POST", "../handle.php", true);
// 4. 打包数据
var data = new FormData(form);
// 5. 发送请求
xhr.send(data);
};
//清除提示信息
var inputs = document.querySelectorAll("input");
for (var i = 0; i < inputs.length; i++) {
inputs[i].oninput = function() {
if (document.getElementsByTagName("fieldset")[0].nextElementSibling !== null) {
form.removeChild(document.getElementsByTagName("fieldset")[0].nextElementSibling);
}
};
}
</script>
</body>
</html>
<?php
//1. 获取表中用户名、邮箱和密码字段数据
$pdo = new PDO('mysql:host=localhost;dbname=shopping', 'root', 'root');
$stmt = $pdo->prepare('SELECT `user_name`, `email`, `passwd` FROM `userinfo`');
$stmt->execute();
$t_data = $stmt->fetchAll(PDO::FETCH_ASSOC);
//2. 处理用户登录
//判断请求是否合法
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
//获取从前端传过来的数据
$f_email = $_POST['email'];
$f_passwd = md5($_POST['password']);
//与后台数据进行校验并获取
$results = array_filter($t_data, function($user) use ($f_email, $f_passwd) {
return $user['email'] === $f_email && $user['passwd'] === $f_passwd;
});
//如果有记录证明校验成功并在客户端设置用户cookie
if (count($results) === 1) {
$user_v = (current($results))['user_name'];
setcookie('user', $user_v);
//返回验证通过的提示信息
echo json_encode(['status'=>1, 'message'=>'验证通过']);
} else {
//返回验证失败的提示信息
echo json_encode(['status'=>0, 'message'=>'邮箱或密码错误,或者还未注册账户']);
}
} else {
die('请求类型错误');
}
四、课程总结
- 今天学习了 JavaScript 的Ajax编程,通过上课认真听讲和认真完成老师布置的作业,使得我对 Ajax 的理解和运用更加深入和熟悉。最主要的知识点是明白和掌握了Ajax请求的特点以及它的基本语法。