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

文章目录

数据流程
PHP作为服务端连接数据库
JavaScript接收服务端信息
页面信息展示

数据流程

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>

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

文章目录

数据流程

PHP作为服务端连接数据库

JavaScript接收服务端信息

页面信息展示

猜你喜欢