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

太过爱你忘了你带给我的痛 2021-09-22 23:18 253阅读 0赞

### 文章目录 ###

*   *  数据流程
     *  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")
        }
    });

**注意：**

1.  ajax的参数，  
    type代表数据传递的方式，分表是get和post，两种方式各有优缺点，根据场景具体选择；  
    url代表指定哪一个PHP文件来接收，使用的是相对路径；  
    data代表js文件传递给PHP的数据，用于指定的数据查询，例如查询出指定id的信息等等。Data的内容是键值对（key-value）的形式。Js如果传递给PHP数据，PHP接收的方式是使用\_GET\[key\]和\_POST\[key\]函数接收；  
    Success代表数据成功传递的回调函数，函数的参数data是传递的过来的信息；  
    Error代表数据未成功传递
2.  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"/>
        
        <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>
        
        <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>