基于PHP的http字段查询与注册（V1）（持续迭代）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>http报文查询</title>
    <style>
        /* 遮罩层样式 */
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
            /* 默认隐藏 */
        }

        /* 弹窗样式 */
        .popup {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 5px;
            display: none;
            /* 默认隐藏 */
        }

        label {
            width: 100px;
            margin-bottom: 10px;
        }

        input[type="text"] {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
            color: #555;
        }

        button {
            padding: 5px 10px;
            border-radius: 3px;
            border: none;
            background-color: #007bff;
            color: #fff;
            cursor: pointer;
        }

        button:hover {
            background-color: #0069d9;
        }
    </style>
    <script type="text/javascript" src="_JS/check_search.js"></script>
</head>

<body>
    <form method="post">
        <input type="text" name="query" placeholder="输入查询内容">
        <input type="submit" value="查询" name="Http_query">
    </form>

    <button id="openBtn">点击按钮添加字段</button>
    <div class="overlay" id="overlay"></div>

    <div class="popup" id="popup">      
    <form method="post" onsubmit="return checkForm(this)">
            <label>
                字段名称：
            </label>
            <input type="text" value="" placeholder="注册字段名" name="key_name" /><br><br>
            <label>
                字段属性：
            </label>
            <input type="text" value="" placeholder="注册字段属性" name="key_team" /><br><br>
            <label>
                字段释义：
            </label>
            <input type="text" value="" placeholder="注册字段含义" name="key_mess"><br><br>

            <bon id="closeBtn">放弃</bon>
            <button type="submit" name="Http_add">添加</button>

        </form>
    </div>
    <script>
        const openBtn = document.getElementById('openBtn');
        const closeBtn = document.getElementById('closeBtn');
        const popup = document.getElementById('popup');
        const overlay = document.getElementById('overlay');
        openBtn.addEventListener('click', function() {
            popup.style.display = 'block';
            overlay.style.display = 'block';
        }); 
    </script>
</body>

</html>

php处理逻辑

字段查询与添加：

php 复制代码

<?php
//文件包含：数据库连接文件
include('mysql_connect.php');

if (!$conn) {
    // 判断数据库连接状态
    // die()，输出一条信息，然后退出脚本.
    die('连接数据库失败！请检查数据库是否开启' . mysqli_connect_errno());
}

//请求传值
$query = $_POST['query'];
$queryHttp = strtolower($query);

//判断查询表单
if(isset($_POST['Http_query'])) {
    # code...
    $queryHttp = strtolower($_POST['query']);
    $sql_search = "select * from info_search where http_headnam = '$queryHttp';";
    $result = $conn->query(query: $sql_search);
    
//判断查询影响行数
    if (mysqli_num_rows($result) > 0) {
    
        $row = $result->fetch_assoc();     
        echo "<br>"; 
        echo $queryHttp . "属性是：" . $row['http_info'] . "<br>";
        echo $queryHttp . "意义是：" . $row['http_body'] . "<br>";
        
      
    } else {
        echo '<p>没有找到匹配结果或无此字段</p>';
        return false;
    }
} 
   
//判断数据添加表单
if(isset($_POST['Http_add'])){
    $key_name = ucwords(strtolower($_POST['key_name']));
    $key_team = ucwords(strtolower($_POST['key_team']));
    $key_mess = ucwords(strtolower($_POST['key_mess']));
    $http_id = "select http_id from info_search;";
    $now_id = mysqli_num_rows(mysqli_query($conn, $http_id));
    $new_id = $now_id + 1;

    $add_http = "INSERT INTO info_search VALUES ('$key_name','$key_team','$key_mess','$new_id');";
  
    if (mysqli_query($conn, $add_http)) {
       
        echo "<script>alert('注册成功')</script>";
        mysqli_refresh($conn, MYSQLI_REFRESH_TABLES);
        mysqli_close($conn);
        return true;
    } else {
      
        echo "<script language='javascript'>alert('字段注册失败')</script>";
        return false;
    }
}
$conn->close();
?>

字段添加

JS判空：只有三条内容都填写了才能添加成功。

javascript 复制代码

//表单JS判断
function checkForm(form){
    if(form.key_name.value == "" || form.key_name.value ==null){
        alert('请输入添加字段名');
        form.key_name.focus();
        return false;
    }
    else if(form.key_team.value == "" || form.key_team.value ==null){
        alert('请输入字段属性');
        form.key_team.focus();
        return false;
    }
    else if(form.key_mess.value == "" || form.key_mess.value == null){
        alert('请填写字段含义');
        form.key_mess.focus();
       return false;

    }
    else{
        return true;
    }
}

已知问题：

字段添加页面，返回button无效。

v1.1将解决！