PHP新手求助：表单数据经JS提交至PHP类并写入SQL数据库

问题概述 #

我是PHP及Web开发新手，需实现以下流程：前端表单数据通过JavaScript发送至PHP文件，再调用自定义类方法写入SQL数据库。目前VS Code未安装PHP扩展，无法调试排查问题，附上相关代码请求协助修复。

核心问题排查与修复方案 #

1. 业务处理PHP脚本（product.php） #

问题点：

• 文件名拼写错误：include("netowking.php") 应为 include("networking.php")（假设数据库类文件名为networking.php）
• 变量作用域错误：insertQuery方法中直接使用$sku等变量，未通过$this->访问类私有属性
• SQL注入风险：直接拼接变量到SQL语句，存在安全隐患
• 类定义顺序错误：实例化Product类前未定义类，PHP解释执行会报错
• 未处理参数缺失：未检查$_POST参数是否存在，会触发未定义索引警告

修复后代码：

<?php
include("networking.php");

// 先定义类再实例化
class Product extends DatabaseCalls{
    private $sku;
    private $name;
    private $price;
    private $memory;

    public function __construct($sku, $name, $price, $memory){
        $this->sku = $sku;
        $this->name = $name;
        $this->price = $price;
        $this->memory = $memory;
    }

    public function insertQuery(){
        // 使用预处理语句防止SQL注入
        $sql = "INSERT INTO dvd (SKU, Name, Price, Memory) VALUES (?, ?, ?, ?)";
        return $this->insertData($sql, [$this->sku, $this->name, $this->price, $this->memory]);
    }
}

// 检查POST参数，避免未定义索引错误
$sku = $_POST['sku'] ?? '';
$name = $_POST['name'] ?? '';
$price = $_POST['price'] ?? '';
$memory = $_POST['dvd-memory'] ?? '';

// 验证必填字段非空
if(empty($sku) || empty($name) || empty($price) || empty($memory)){
    echo "Missing required fields";
    exit;
}

$dvdProduct = new Product($sku, $name, $price, $memory);
echo $dvdProduct->insertQuery();

2. 数据库操作PHP类（networking.php） #

问题点：

• 连接复用问题：每次调用insertData都新建数据库连接，性能低下
• 错误处理不规范：连接失败时用die终止脚本，无法返回错误信息给前端
• 未支持预处理语句：原方法仅支持直接执行SQL，无法处理参数化查询

修复后代码：

class DatabaseCalls{
    private $connection;
    private $servername = "localhost";
    private $username = "root";
    private $password = "";
    private $dbname = "scandiweb";

    // 构造函数初始化数据库连接
    public function __construct(){
        $this->connection = new mysqli($this->servername, $this->username, $this->password, $this->dbname);
        if($this->connection->connect_error){
            error_log("DB Connection failed: " . $this->connection->connect_error);
        }
    }

    // 支持参数化查询的插入方法
    public function insertData($dataQuery, $params = []){
        if(!$this->connection){
            return "Database connection unavailable";
        }

        $stmt = $this->connection->prepare($dataQuery);
        if(!$stmt){
            return "Prepare failed: " . $this->connection->error;
        }

        // 根据参数数量绑定类型（这里默认全为字符串，可根据字段类型调整）
        $types = str_repeat('s', count($params));
        $stmt->bind_param($types, ...$params);

        if($stmt->execute()){
            return "Done";
        }else{
            return "Insert error: " . $stmt->error;
        }

        $stmt->close();
    }

    // 析构函数关闭连接
    public function __destruct(){
        if($this->connection){
            $this->connection->close();
        }
    }
}

3. JavaScript提交代码 #

问题点：

• 未处理请求错误：仅监听onload，未处理网络错误、HTTP状态码错误等情况
• 变量未定义：sku、name、price等变量未从表单元素获取值
• this指向异常：validateAdditional(this.switcher)中this指向可能不符合预期

修复后代码：

const form = document.querySelector('.input');
form.addEventListener('submit', function(e){
    e.preventDefault(); // 阻止默认表单提交

    // 获取表单字段值
    const sku = document.getElementById('sku').value.trim();
    const name = document.getElementById('name').value.trim();
    const price = document.getElementById('price').value.trim();
    const selectedType = document.getElementById('select').value;

    // 示例验证正则（可根据需求调整）
    const validate = /^[a-zA-Z0-9]+$/;
    const validatePrice = /^\d+(\.\d{1,2})?$/;

    if(validate.test(sku) && validate.test(name) && validatePrice.test(price)){
        if(validateAdditional(selectedType)){
            const xml = new XMLHttpRequest();
            xml.open("POST", "./backend/product.php", true);
            
            xml.onload = () => {
                if(xml.readyState === 4){
                    if(xml.status === 200){
                        alert(xml.response);
                        form.reset();
                        history.back();
                    }else{
                        alert(`Request failed: ${xml.status}`);
                    }
                }
            };

            // 处理网络错误
            xml.onerror = () => alert("Network error occurred");

            const formData = new FormData(form);
            xml.send(formData);
        }else{
            alert("Please fill in all required additional fields");
        }
    }else{
        alert("Invalid input: no spaces or special characters allowed");
    }
});

// 验证选中类型的额外字段
function validateAdditional(type){
    switch(type){
        case 'dvd':
            return document.getElementById('dvd-memory').value.trim() !== '';
        case 'furniture':
            return document.getElementById('height').value.trim() !== '' && 
                   document.getElementById('width').value.trim() !== '' && 
                   document.getElementById('length').value.trim() !== '';
        case 'book':
            return document.getElementById('weight').value.trim() !== '';
        default:
            return false;
    }
}

4. HTML表单代码 #

问题点：

• 无提交按钮：用户无法触发表单提交
• 多余语法错误：<div class="dvd-mem", id="dvd"> 中逗号多余
• 标签与输入框不匹配：家具模块第三个标签文本为"Height(CM)"，但对应输入框是长度，且输入框ID拼写错误（lenght应为length）
• 未切换显示额外字段：选中不同类型时，未自动显示对应字段

修复后代码：

<form class="input" name="input" method="POST" action="./backend/product.php">
    <div>
        <label for="sku">SKU:</label>
        <input id="sku" type="text" name="sku" placeholder="#SKU" required>
    </div>

    <div>
        <label for="name">Name:</label>
        <input id="name" type="text" name="name" placeholder="#name" required>
    </div>

    <div>
        <label for="price">Price ($):</label>
        <input id="price" type="text" name="price" placeholder="#price" required>
    </div>

    <div class="switcher">
        <h3>Type Switcher</h3>
        <select name="select" id="select" required>
            <option selected disabled>Choose a type</option>
            <option value="dvd">DVD</option>
            <option value="furniture">Furniture</option>
            <option value="book">Book</option>
        </select>
    </div>

    <div class="switchContent">
        <div class="dvd-mem" id="dvd">
            <p>DVD-disc</p>
            <label for="dvd-memory">Size(MB):</label>
            <input id="dvd-memory" type="text" name="dvd-memory" placeholder="Please enter MB amount here" required>
            <p>Please enter amount of disc memory in MB.</p>
        </div>

        <div class="furniture" id="furniture" style="display:none;">
            <p>Furniture</p>
            <div>
                <label for="height">Height(CM):</label>
                <input id="height" type="text" name="height" placeholder="Enter height in here" required>
            </div>
            <div>
                <label for="width">Width(CM):</label>
                <input id="width" type="text" name="width" placeholder="Enter width in here" required>
            </div>
            <div>
                <label for="length">Length(CM):</label>
                <input id="length" type="text" name="length" placeholder="Enter length in here" required>
            </div>
            <p>Please enter all dimensions of furniture</p>
        </div>

        <div class="book" id="book" style="display:none;">
            <p>Book</p>
            <label for="weight">Weight(KG):</label>
            <input id="weight" type="text" name="weight" placeholder="Please enter weight in KG" required>
            <p>Please enter weight of book</p>
        </div>
    </div>

    <button type="submit">Submit Product</button>
</form>

<!-- 切换显示对应类型的额外字段 -->
<script>
document.getElementById('select').addEventListener('change', function(){
    const selectedType = this.value;
    // 隐藏所有额外字段
    document.querySelectorAll('.switchContent > div').forEach(div => div.style.display = 'none');
    // 显示选中类型的字段
    if(selectedType) document.getElementById(selectedType).style.display = 'block';
});
</script>

内容的提问来源于stack exchange，提问作者Ivars