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>

php与JS通信

分享到：

赞(0)

温馨提醒：

资源类型：其他教程

数据流程

PHP作为服务端连接数据库

JavaScript接收服务端信息

页面信息展示

源码推荐

 最新资源

资源标签

更多资源