下面开始详细讲解“php基于jquery的ajax技术传递json数据简单实例”的完整攻略：
一、什么是 AJAX？
AJAX(Ajax Asynchronous Javascript and XML)，即异步的 JavaScript 和 XML。它是一种在Web页面直接与服务器进行数据交互的技术，可以提高页面的交互能力，免去了页面的刷新，页面在不刷新的情况下动态更新数据。
二、什么是 JSON？
JSON(JavaScript Object Notation)是基于文本的轻量级数据交换格式，被广泛用于Web应用程序中，也可用于其他语言环境。
三、基于 jQuery 实现 AJAX 传递 JSON 数据
1. 客户端（前端）代码
通过 jQuery.ajax() 函数来实现 AJAX 传递 JSON 数据：
$.ajax({
url: 'xxx.php', // 发送请求的地址
type: 'POST', // 请求方式
data: JSON.stringify({ // 向服务器发送的数据
name: 'Tom',
age: 18,
gender: 'male'
}),
contentType: 'application/json; charset=utf-8', // 发送数据的格式，必须为 JSON 格式
dataType: 'json', // 接收服务器返回的数据格式
success: function (response) { // 请求成功后的回调函数
console.log(response);
},
error: function (xhr, status, error) { // 请求失败后的回调函数
console.log(error);
}
});
2. 服务端（后端）代码
在服务端接收 AJAX 传递的 JSON 数据，在 PHP 中可以通过 file_get_contents('php://input') 函数来获得，然后通过 json_decode() 函数将 JSON 数据转换成 PHP 的数组或对象。
<?php
// 从请求中获取JSON字符串
$json = file_get_contents('php://input');
// 将JSON字符串转换成PHP对象
$data = json_decode($json);
// 输出结果
echo json_encode([
'code' => 200,
'message' => 'success',
'data' => $data
]);
?>
四、示例说明
1. AJAX 登录示例
前端代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ajax Login</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function () {
$('#login_btn').on('click', function () {
$.ajax({
url: 'login.php',
type: 'post',
data: JSON.stringify({
username: $('#username').val(),
password: $('#password').val()
}),
contentType: "application/json;charset=utf-8",
dataType: 'json',
success: function (response) {
if (response.code === 200) {
alert(response.message);
} else {
alert(response.message);
}
},
error: function (xhr, status, error) {
console.log(error);
}
});
});
});
</script>
</head>
<body>
<form>
<label>Username:</label>
<input type="text" id="username">
<br>
<label>Password:</label>
<input type="password" id="password">
<br>
<button type="button" id="login_btn">Login</button>
</form>
</body>
</html>
后端代码：
<?php
// 从请求中获取JSON字符串
$json = file_get_contents('php://input');
// 将JSON字符串转换成PHP对象
$data = json_decode($json);
// 进行登录验证
if ($data->username === 'admin' && $data->password === '123456') {
// 登录成功
echo json_encode([
'code' => 200,
'message' => '登录成功',
'data' => null
]);
} else {
// 登录失败
echo json_encode([
'code' => 400,
'message' => '用户名或密码错误',
'data' => null
]);
}
?>
2. AJAX 获取 RSS 示例
前端代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ajax RSS</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function () {
$('#get_rss_btn').on('click', function () {
$.ajax({
url: 'rss.php',
type: 'get',
data: {
rss_url: $('#rss_url').val()
},
dataType: 'xml',
success: function (response) {
console.log(response);
var html = '';
$(response).find('item').each(function () {
var title = $(this).find('title').text();
var link = $(this).find('link').text();
html += '<li><a href="' + link + '">' + title + '</a></li>';
});
$('#rss_list').html(html);
},
error: function (xhr, status, error) {
console.log(error);
}
});
});
});
</script>
</head>
<body>
<form>
<label>RSS URL:</label>
<input type="text" id="rss_url">
<br>
<button type="button" id="get_rss_btn">Get RSS</button>
</form>
<ul id="rss_list"></ul>
</body>
</html>
后端代码：
<?php
$rss_url = $_GET['rss_url'];
$xml = file_get_contents($rss_url);
echo $xml;
?>
通过上述两个示例的说明，相信大家已经初步掌握了基于 PHP 和 jQuery 的 AJAX 传递 JSON 数据的方法。需要注意的是，在实际开发中，还需要注意防止潜在的安全漏洞，例如跨站点脚本攻击（XSS）等。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：php基于jquery的ajax技术传递json数据简单实例 - Python技术站
微信扫一扫 
支付宝扫一扫 