JavaScript中在href内传递JSON对象至函数的解决方案求助

First, let’s break down why your current code isn’t working: when you concatenate jsonResposneObj.dataObj[i] into the href string, JavaScript converts the object to its default string representation ([object Object]), so your function_test ends up receiving that useless string instead of the actual JSON object. Plus, using href for function calls isn’t the cleanest approach—here are some reliable solutions:

Solution 1: Use onclick Event Handler (Quick Fix) #

Replace the href-based function call with an onclick handler. This lets you pass the actual object by converting it to a valid JSON string first, and fixes the typo in your variable name (jsonResposneObj → jsonResponseObj) to avoid errors:

function function_test(option, jsonObj) {
  // Your existing logic here, e.g.:
  console.log("Option:", option);
  console.log("Received JSON:", jsonObj);
  displayMessage(str); // Ensure `str` is defined or adjust as needed
}

function function_prepare_div() {
  var str = "";
  var jsonResponseObj = getJson(); // Fixed variable spelling
  for (let i = 0; i < jsonResponseObj.length; i++) { // Use let to avoid loop scope issues
    const dataObj = jsonResponseObj.dataObj[i];
    // Build link with onclick handler
    str += `<a href="#" onclick="function_test(${i}, ${JSON.stringify(dataObj)}); return false;">1. ${dataObj.yourPropertyName}</a><br>`;
  }
  // Insert the generated HTML into your target div
  document.getElementById("your-div-id").innerHTML = str;
}

• JSON.stringify(dataObj) converts the object to a valid JSON string that gets parsed back into an object when passed to the function.
• return false; stops the link from navigating to # (you can also use event.preventDefault() if you prefer explicit syntax).

Solution 2: Data Attributes + Event Delegation (Cleaner, Maintainable) #

For better code organization, store the object data in HTML data attributes and use a single event listener on a parent element (event delegation):

function function_test(option, jsonObj) {
  console.log("Option:", option);
  console.log("Received JSON:", jsonObj);
  displayMessage(str);
}

function function_prepare_div() {
  var str = "";
  var jsonResponseObj = getJson();
  for (let i = 0; i < jsonResponseObj.length; i++) {
    const dataObj = jsonResponseObj.dataObj[i];
    // Store data in data attributes
    str += `<a href="#" class="test-link" data-option="${i}" data-obj="${JSON.stringify(dataObj)}">1. ${dataObj.yourPropertyName}</a><br>`;
  }
  const container = document.getElementById("your-div-id");
  container.innerHTML = str;
  
  // Add one event listener to the parent container
  container.addEventListener("click", function(e) {
    if (e.target.classList.contains("test-link")) {
      e.preventDefault(); // Stop default link behavior
      const option = parseInt(e.target.dataset.option);
      const jsonObj = JSON.parse(e.target.dataset.obj); // Parse back to object
      function_test(option, jsonObj);
    }
  });
}

• This keeps your HTML free of inline JavaScript and works even if links are added dynamically later.

Solution 3: Create Elements Programmatically (Best Practice) #

Instead of building HTML strings, create DOM elements directly. This avoids string escaping issues and lets you pass the actual object without conversion:

function function_test(option, jsonObj) {
  console.log("Option:", option);
  console.log("Received JSON:", jsonObj);
  displayMessage(str);
}

function function_prepare_div() {
  const container = document.getElementById("your-div-id");
  container.innerHTML = ""; // Clear existing content
  const jsonResponseObj = getJson();
  
  for (let i = 0; i < jsonResponseObj.length; i++) {
    const dataObj = jsonResponseObj.dataObj[i];
    const link = document.createElement("a");
    link.href = "#";
    link.textContent = `1. ${dataObj.yourPropertyName}`;
    // Attach click handler with direct access to the object
    link.addEventListener("click", function(e) {
      e.preventDefault();
      function_test(i, dataObj);
    });
    container.appendChild(link);
    container.appendChild(document.createElement("br"));
  }
}

• This method uses closures to retain access to the actual dataObj in each loop iteration, no stringify/parse needed.
• It’s more secure, as it avoids XSS risks that can come from inserting HTML strings with user-provided data.

Key Notes: #

• Always fix variable name typos (like jsonResposneObj vs jsonResponseObj) to avoid reference errors.
• Using let instead of var in loops ensures each iteration has its own scope for variables like i and dataObj.

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