如何在JSP页面的JavaScript中获取Servlet传递的List数组数据

Hey there! Let's figure out how to get that Java List data from your Servlet into JavaScript in your JSP. The most reliable and clean approach is to convert your Java List to a JSON string (since JavaScript works seamlessly with JSON), then parse that string into a JavaScript array. Here's a step-by-step breakdown:

1. Add a JSON processing library (Gson or Jackson) #

First, you'll need a library to convert your Java objects to JSON. Let's go with Gson—it's simple and widely used. If you're using Maven, add this dependency to your pom.xml:

<dependency>
    <groupId>com.google.code.gson</groupId>
    <artifactId>gson</artifactId>
    <version>2.10.1</version> <!-- Use the latest stable version available -->
</dependency>

If you prefer Jackson instead, use this dependency:

<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.15.2</version>
</dependency>

2. Convert your Java List to a JSON string in JSP #

Update your JSP scriptlet to convert the alltutors list into a JSON string. Replace your existing code with this:

<%
import com.google.gson.Gson;
import java.util.List;
import java.util.ArrayList;
import your.package.name.OptimalsTutorListGetSet; // Replace with your actual package path

List<OptimalsTutorListGetSet> alltutors = (ArrayList<OptimalsTutorListGetSet>) request.getAttribute("tutors");
Gson gson = new Gson();
String tutorsJson = gson.toJson(alltutors);
%>

3. Parse the JSON string into a JavaScript array and use it #

Now in your JavaScript section, you can turn that JSON string into a native JavaScript array of objects, then loop through it to access the data:

<script>
// Parse the JSON string into a JavaScript array
const tutors = JSON.parse('<%= tutorsJson %>');

// Loop through each tutor object
tutors.forEach(tutor => {
    // Extract values (property names match your Java class's getter logic—e.g., getNames() becomes "names")
    const name = tutor.names;
    const desc = tutor.description;
    const qual = tutor.qualification;
    const con = tutor.contact;
    const email = tutor.email;
    const dis = tutor.distance;
    const rating = tutor.rating;
    const exp = tutor.experience;

    // Do whatever you need with these values—example: log to console or render to the page
    console.log(`Tutor: ${name}, Qualification: ${qual}`);
    // Example: Append tutor info to an HTML element
    document.getElementById('tutor-container').innerHTML += `
        <div class="tutor-card">
            <h3>${name}</h3>
            <p>${desc}</p>
            <p>Qualification: ${qual}</p>
            <p>Contact: ${con}</p>
        </div>
    `;
});
</script>

Key Notes: #

• Property Name Matching: The property names in the JavaScript objects (like tutor.names) correspond to your Java class's field names or getter method names (Gson converts getNames() to names by default). If you want custom property names, use Gson's @SerializedName annotation on your Java fields:

  import com.google.gson.annotations.SerializedName;
  
  public class OptimalsTutorListGetSet {
      @SerializedName("tutorName")
      private String name;
  
      // Getter: public String getNames() { return name; }
  }
  

  Then in JavaScript, you'd access it as tutor.tutorName instead of tutor.names.

• Special Character Handling: Gson/Jackson automatically escapes special characters (like quotes, newlines) in your data, so you won't run into syntax errors in JavaScript.

Alternative: Manual JS Array (Not Recommended) #

If you can't add a JSON library, you could manually build the JavaScript array—but this is error-prone (you have to escape special characters and handle trailing commas):

<script>
const tutors = [
    <% for(OptimalsTutorListGetSet t : alltutors) { %>
    {
        name: "<%= t.getNames().replace("\"", "\\\"") %>",
        desc: "<%= t.getDescription().replace("\"", "\\\"") %>",
        qual: "<%= t.getQualification().replace("\"", "\\\"") %>",
        con: "<%= t.getContact().replace("\"", "\\\"") %>",
        email: "<%= t.getEmail().replace("\"", "\\\"") %>",
        dis: <%= t.getDistance() %>,
        rating: <%= t.getRating() %>,
        exp: <%= t.getExperience() %>
    }<% if(!alltutors.get(alltutors.size()-1).equals(t)) { %>,<% } %>
    <% } %>
];
</script>

Stick with the JSON method—it's cleaner and less error-prone.

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