PHP与JavaScript(JQuery)进行数据交换

资源类型:其他教程


数据流程

php(服务端)操作数据库
javascript接收PHP传递过来的信息,并对数据进行一定的处理
html显示信息

PHP作为服务端连接数据库

PHP接受前端发送的消息,用于查询数据库,之后把查询到的数据传递给前端。

jQuery与PHP进行数据传递主要有三种方式:post、get、ajax。实际上,这三种方式的本质都是用ajax的技术,实现异步的数据更新,post和get是jQuery的封装好的方法,属于高层简易方法,目的就是简化数据交互过程。

PHP与数据库连接user.php

<?php
$servername = “localhost”;
$username = “root”;
$password = “admin”;
$dbname = “testphp”;

// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
die(“连接失败: ” . $conn->connect_error);
}

//查询数据库
mysqli_query($conn, ‘set names utf8′);
$sql = “SELECT * FROM user”;
$result = $conn->query($sql);

if ($result->num_rows > 0) {//判断查询结果行数
// 输出数据
while($row = $result->fetch_assoc()) {//从结果集中取出一行作为关联数组
echo json_encode($row,JSON_UNESCAPED_UNICODE).’ ‘;//转化为json串传输
}
} else {
echo “0 结果”;
}
$conn->close();
?>

一些常用的php操作数据库的函数

mysqli_fetch_field($result);//获取数据集中的字段名
$result->field_count;//获取数据集字段数
$result->fetch_row();//取出数据集中的一行数据
mysqli_field_seek($result,0);//定位到数据集中的第一条数据

JavaScript接收服务端信息

jQuery的ajax实现,接收PHP传递过来的数据 user.js

$.ajax({
type: ‘POST’,
url: ‘user.php’,
data:{
},
success: function (data) {
console.log(data);
var a = data.split(‘ ‘);
console.log(a);
var trStr = ”;//动态拼接table
for (var i = 0; i < a.length-1; i++) {
trStr += ‘<tr class=”example”>’;
trStr += ‘<td width=”15%”>’ + JSON.parse(a[i]).id + ‘</td>’;
trStr += ‘<td width=”15%”>’ + JSON.parse(a[i]).username + ‘</td>’;
trStr += ‘<td width=”15%”>’ + JSON.parse(a[i]).sex + ‘</td>’;
trStr += ‘<td>’ + JSON.parse(a[i]).tel + ‘</td>’;
trStr += ‘<td>’ + JSON.parse(a[i]).email + ‘</td>’;
trStr += ‘</tr>’;
}
$(“#tbody”).html(trStr);
},
error:function(){
console.log(“ERROR”)
}
});

注意:

ajax的参数,
type代表数据传递的方式,分表是get和post,两种方式各有优缺点,根据场景具体选择;
url代表指定哪一个PHP文件来接收,使用的是相对路径;
data代表js文件传递给PHP的数据,用于指定的数据查询,例如查询出指定id的信息等等。Data的内容是键值对(key-value)的形式。Js如果传递给PHP数据,PHP接收的方式是使用_GET[key]和_POST[key]函数接收;
Success代表数据成功传递的回调函数,函数的参数data是传递的过来的信息;
Error代表数据未成功传递
json数据
PHP查询的数据传递过来是json串的形式,并且是每一条数据构成一个json串,所以echo之间的间隔是空格,js这边获取全部的echo信息(这里意味着,即便php有多个echo,最终js文件也是获得一个总体的字符串),把传递过来的信息分割成一个json数组。通过对数组遍历的方式对json串进行解析。

页面信息展示

页面效果展示user.html

<!DOCTYPE html>
<html ng-app = ‘test’>

<head>
<meta charset=”UTF-8″>
<meta http-equiv=”Content-type=text/html;charset=utf-8″/>
<!– jQuery –>
<script type=”text/javascript” src=”http://code.changer.hk/jquery/1.11.2/jquery.min.js”></script>
<script src=”https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js”></script>
<!– Latest compiled and minified CSS –>
<link rel=”stylesheet” href=”https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css” integrity=”sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u” crossorigin=”anonymous”>
<style type=”text/css”>
.table{
width: 1000px;
text-align: center;
}
</style>
<title>用户信息</title>
</head>

<body ng-controller = ‘main’>
<div class=””>
<table class=”table table-bordered table-striped”>
<thead id=”thead” >
<tr>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
<td>电话</td>
<td>邮箱</td>
</tr>
</thead>
<tbody id=”tbody”></tbody>
</table>
</div>
</body>
<script src=”js/user.js”></script>
</html>

分享到:
赞(0)
魔趣商城是魔趣吧旗下,专业的整站资源和极品模板插件购买下载站,我们提供完善的售后服务,整站安装让你建站更加快捷,只需要几十分钟甚至几分钟,就可以获得一个运营级的完整网站!所有资源由本站技术亲手打造或严格线上测试,保证100%完整、安全、功能完善可直接运营使用!