HTML值变更时MySQL数据检索：员工姓名自动更新问题求助

Hey there, let's work through this problem together! The 500 error you're seeing is a server-side issue, so we'll start by debugging the backend getEmpName.jsp before fixing up the frontend Ajax logic.

Step 1: Diagnose the 500 Server Error #

First, let's get to the root of the server error. Here's how to start:

• Directly test the JSP: Open your browser and navigate to getEmpName.jsp?empId=YOUR_VALID_EMPLOYEE_ID (replace with an ID you know exists in your MySQL table). If you still get a 500, check the error details in your server logs (e.g., Tomcat's localhost.log in the logs directory) — this will tell you exactly where the failure is (bad SQL, missing JDBC driver, connection issues, etc.).
• Check JDBC setup: Ensure your MySQL driver is properly added to your project's lib folder, and your connection URL, username, and password are correct (don't forget timezone settings for MySQL 8+).
• Validate your SQL: Double-check that your table and column names match exactly (MySQL is case-insensitive by default, but if you used quoted identifiers when creating the table, you'll need to match the case).
• Add error handling: Wrap your JSP code in a try-catch block to catch and return meaningful errors instead of letting the server throw a generic 500.

Fixed getEmpName.jsp Example #

Here's a robust version of your JSP with proper error handling and JSON responses (easier to work with in frontend):

<%@ page import="java.sql.*, org.json.JSONObject" %>
<%
// Set response to JSON format
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");

JSONObject responseObj = new JSONObject();
String empId = request.getParameter("empId");

// Validate input first
if (empId == null || empId.trim().isEmpty()) {
  responseObj.put("success", false);
  responseObj.put("message", "Employee ID is required");
  out.print(responseObj.toString());
  return;
}

// Database config (use a connection pool in production!)
String dbUrl = "jdbc:mysql://localhost:3306/your_db_name?useSSL=false&serverTimezone=UTC";
String dbUser = "your_db_user";
String dbPass = "your_db_password";

Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;

try {
  // Load MySQL driver (for MySQL 8+)
  Class.forName("com.mysql.cj.jdbc.Driver");
  conn = DriverManager.getConnection(dbUrl, dbUser, dbPass);

  // Safe prepared statement to avoid SQL injection
  String sql = "SELECT Employee_Name FROM your_table_name WHERE Employee_ID = ?";
  pstmt = conn.prepareStatement(sql);
  pstmt.setString(1, empId);
  rs = pstmt.executeQuery();

  if (rs.next()) {
    responseObj.put("success", true);
    responseObj.put("empName", rs.getString("Employee_Name"));
  } else {
    responseObj.put("success", false);
    responseObj.put("message", "No employee found with this ID");
  }
} catch (Exception e) {
  // Log the error (replace with proper logging in production)
  e.printStackTrace();
  responseObj.put("success", false);
  responseObj.put("message", "Server error: " + e.getMessage());
} finally {
  // Clean up database resources
  if (rs != null) try { rs.close(); } catch (SQLException ignored) {}
  if (pstmt != null) try { pstmt.close(); } catch (SQLException ignored) {}
  if (conn != null) try { conn.close(); } catch (SQLException ignored) {}
}

out.print(responseObj.toString());
%>

Step 2: Fix Frontend Ajax Logic #

Now let's update the frontend to work with the fixed JSP. Here's a reliable vanilla JS implementation (no jQuery needed, but you can adapt it if you prefer):

<!-- Your HTML table row with Employee ID select -->
<tr>
  <td>
    <select class="empIdSelect" onchange="updateEmpName(this)">
      <!-- Options populated from MySQL -->
      <option value="1">EMP001</option>
      <option value="2">EMP002</option>
    </select>
  </td>
  <td>
    <input type="text" class="empNameInput" readonly>
  </td>
</tr>

<script>
function updateEmpName(selectElement) {
  const empId = selectElement.value;
  const nameInput = selectElement.closest('tr').querySelector('.empNameInput');

  // Clear input if no ID is selected
  if (!empId) {
    nameInput.value = '';
    return;
  }

  const xhr = new XMLHttpRequest();
  xhr.open('GET', `getEmpName.jsp?empId=${encodeURIComponent(empId)}`, true);
  
  xhr.onload = function() {
    if (xhr.status === 200) {
      const response = JSON.parse(xhr.responseText);
      if (response.success) {
        nameInput.value = response.empName;
      } else {
        alert(`Error: ${response.message}`);
        nameInput.value = '';
      }
    } else {
      alert(`Server error: ${xhr.status}`);
    }
  };

  xhr.onerror = function() {
    alert('Network error occurred. Please check your connection.');
  };

  xhr.send();
}
</script>

Key Checks for the Frontend #

• URL correctness: Make sure getEmpName.jsp is in the same directory as your HTML page, or adjust the path in the Ajax request (e.g., /your-app/getEmpName.jsp if it's in a subfolder).
• Parameter encoding: Use encodeURIComponent() to handle special characters in the Employee ID.
• DOM traversal: The example uses closest('tr') to find the corresponding name input in the same table row — this works if you have multiple rows, which you likely do for a table of employees.

Final Troubleshooting Tips #

1. Open your browser's developer tools (F12) and go to the Network tab to see the Ajax request details. Check if the request is sent correctly, and look at the response body for error messages from the JSP.
2. Verify that the Employee ID you're passing exists in your MySQL table — a missing ID will return a "No employee found" message, not a 500.
3. If you're using jQuery, ensure you're not mixing up data parameters or dataType settings (match it to the JSON response from the JSP).

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