表单提交报500错误及TypeError: Cannot read properties of undefined (reading 'text')

问题描述 #

开发了一个表单用于将数据保存至数据库applicant_need表，涉及字段coursetype、course_need、c_name、total。提交时触发服务器500错误，同时提示Cannot read properties of undefined (reading 'text')，怀疑问题出在response.text()处。

相关代码 #

HTML代码 #

<form id='addneed' class="intro-y box grid-cols-1 p-5">
    <div class="grid grid-cols-1 gap-4 row-gap-5 mt-5">
        <div class="intro-y col-span-12 sm:col-span-4 px-2">
            <div class="mb-2">Course Type</div>
            <select name="coursetype" onchange="course_type_handler()" id="course_type_id" class="input w-full border flex-1 " required="">
                <option">Choose an option</option>
                <?php $x = 1;
                if ($course_types->num_rows > 0) {
                    while ($rowm = $course_types->fetch_assoc()) { ?>
                        <option value="<?php echo $rowm['id']; ?>"><?php echo $rowm['name']; ?></option>
                <?php }
                } ?>
            </select>
        </div>
        <div class="intro-y col-span-12 sm:col-span-4 px-2">
            <div class="mb-2">Courses Need</div>
            <select name='course_need' id="select_courses_id"  class="input w-full border flex-1 " required="">
                <option >Choose an option</option>
            </select>
        </div>
        <div class="intro-y col-span-12 sm:col-span-4 px-2">
            <label>Other</label>
            <br>
            <div>
                <input type="radio" name='others'   onchange="radio_extra_handler()" class="input w-full border flex-1" >
            </div>     
        </div>  
        <br>
        <div class='intro-y col-span-12 sm:col-span-4 px-2' name='extra'  id="extra" style='display: none;'>
            <div class="mb-2">Course Name</div>
            <input name='c_name'   type="text" class="input w-full border flex-1"  placeholder="Enter course name">
            <div class="mb-2">Total</div>
            <input name='total'  type="number"  class="input w-full border flex-1" placeholder="Enter number of nominees">
        </div>                               
    </div>
    <div style="display: flex; justify-content: center; margin-top: 20px;">
        <button required type="submit" class=" button text-white bg-theme-1 shadow-md mr-2">Submit</button>
    </div>
</div>
</form>

JavaScript脚本 #

<script>
function handleErrors(response) {
    if (response?.ok) {
        console.log('Use the response here!');
    } else {
        console.log(`HTTP Response Code: ${response?.status}`)
    }
}
// Function to handle form submission
function handleSubmit(event) {
    // Prevent the default form submission behavior
    event.preventDefault();

    // Get form elements and their values
    const form = event.target;
    const formData = new FormData(form);
    
    // Convert FormData to an object
    const formObject = {};
    formData.forEach((value, key) => {
        formObject[key] = value;
    });

    // Send form data to a PHP file using the Fetch API
    fetch('server/add_needs_server.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(formObject),
    })
    .then(handleErrors)
    .then(response =>  response.text())  // 怀疑问题出在这里
    .then(data => {
        console.log(document.getElementById('course_type_id').value);
        console.log(document.getElementById('select_courses_id').value);

        if(data == "Inserted") {
            var coursename = document.querySelector('select[name=course_need]').value;
            var message = document.querySelector('.message');
            var response = document.querySelector('.response');

            message.innerHTML = alert( 'your request has been submitted' );

            message.classList.remove('failed');
            message.classList.add('success');
            response.classList.remove("hide");

            document.getElementById("addneed").reset();
        } else {
            var coursename = document.querySelector('select[name=course_need]').value;
            var message = document.querySelector('.message');
            var response = document.querySelector('.response');

            message.innerHTML =  alert( 'Failed to upload' + coursename  );

            message.classList.remove('success');
            message.classList.add('failed');
            response.classList.remove("hide");
        }
    })
    .catch(error => {
        console.error('Error:', error);
    });
}

// Get the form element and add a submit event listener
const myForm = document.getElementById('addneed');
myForm.addEventListener('submit', handleSubmit);
</script>

问题原因与修复方案 #

1. 前端Promise链断裂（直接导致"Cannot read properties of undefined"错误） #

当前的handleErrors函数在响应成功时没有返回response对象，导致后续的.then(response => response.text())接收到的是undefined，调用undefined.text()就会触发报错。

修复handleErrors函数：

function handleErrors(response) {
    if (response?.ok) {
        console.log('Use the response here!');
        return response; // 必须返回response，保证Promise链传递数据
    } else {
        console.log(`HTTP Response Code: ${response?.status}`);
        throw new Error(`HTTP error! status: ${response.status}`); // 抛出错误，让后续catch捕获
    }
}

2. 服务器500错误（后端问题） #

服务器500错误说明add_needs_server.php存在代码逻辑错误，常见原因：

• 未正确解析JSON格式的请求体：前端发送的是JSON数据，PHP默认不会自动解析，需要手动获取并解析：

<?php
// 获取JSON请求内容
$rawData = file_get_contents('php://input');
$requestData = json_decode($rawData, true);

// 检查JSON解析是否成功
if (!$requestData) {
    http_response_code(400);
    echo "Invalid JSON data";
    exit;
}

// 后续执行数据库插入逻辑...
// 示例：假设插入成功后返回"Inserted"
echo "Inserted";
?>

• 数据库连接异常、SQL语句错误：检查数据库配置是否正确，SQL语句是否存在语法错误（比如字段名拼写错误、缺少引号等）
• 文件权限或路径错误：确认add_needs_server.php文件存在且服务器有读写权限

3. 其他前端细节问题 #

• HTML中第一个option标签语法错误：<option">Choose an option</option>改为<option>Choose an option</option>
• radio按钮缺少value属性：添加value="1"以便后端判断是否选中
• message.innerHTML = alert(...)写法错误：alert返回undefined，应分开写：

// 替换原代码中的对应行
alert('your request has been submitted');
message.innerHTML = 'your request has been submitted';

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