如何用AJAX读取HTML文件及实现HTML与JS变量交互替换

Hey there! Let's break down your two questions with clear, actionable solutions:

You have two reliable approaches here—one using the modern promise-based fetch API, and another using the legacy XMLHttpRequest method for broader browser support.

Using the Fetch API (Recommended) #

This is the cleaner, more modern option thanks to promises and simpler syntax:

fetch('path/to/your/target-file.html')
  .then(response => {
    if (!response.ok) {
      throw new Error(`Request failed with status: ${response.status}`);
    }
    return response.text(); // Extract HTML content as plain text
  })
  .then(htmlContent => {
    // Do something with the loaded HTML—like inject it into a page element
    document.getElementById('content-container').innerHTML = htmlContent;
    console.log('HTML file loaded successfully:', htmlContent);
  })
  .catch(error => {
    console.error('Error loading HTML file:', error);
  });

Using XMLHttpRequest (Legacy Approach) #

If you need to support older browsers that don't have fetch support, use this method:

const xhr = new XMLHttpRequest();
xhr.open('GET', 'path/to/your/target-file.html', true);

xhr.onload = function() {
  if (this.status >= 200 && this.status < 400) {
    // Success: Retrieve and use the HTML content
    const htmlContent = this.responseText;
    document.getElementById('content-container').innerHTML = htmlContent;
    console.log('HTML file loaded:', htmlContent);
  } else {
    console.error('Server error:', this.statusText);
  }
};

xhr.onerror = function() {
  console.error('Network error occurred while loading the HTML file');
};

xhr.send();

First, let's fix a critical mistake in your current code: when a <script> tag has a src attribute, any code inside the tag is ignored. Your var str = {{:stringVar:}}; line won't execute as written. Let's correct that and implement the variable replacement logic step by step.

Step 1: Fix your HTML structure #

Separate the backend-rendered variable declaration into its own script tag, then include your external JS:

<!-- First declare the variable rendered by your backend -->
<script>
// {{:stringVar:}} will be replaced by your backend with an actual string value
var str = {{:stringVar:}};
</script>
<!-- Now include your external JavaScript file -->
<script src="index.js"></script>

<!-- Optional: Add an element to display the updated value for users -->
<div class="display-value">Current value: <span id="dynamic-value"></span></div>

Step 2: Correct your JS logic and add replacement code #

Your current JS has a bug: if(hello ='master') uses assignment (=) instead of equality check (===). Let's fix that, then add code to replace the HTML variable/value:

var hello = 'gettingvalue from browser';
var changestr;

// Fix: Use strict equality check (===) instead of assignment
if (hello === 'master') {
  changestr = 'new asp key for mas';
} else {
  changestr = 'new asp key for dev';
}

// Option 1: Update the existing `str` variable with the new value
str = changestr;
console.log('Updated str variable:', str);

// Option 2: Replace content in the DOM to show users the new value
document.getElementById('dynamic-value').textContent = changestr;

// If you need to replace the original {{:stringVar:}} placeholder directly in visible text:
// document.querySelectorAll('*').forEach(el => {
//   if (el.textContent.includes('{{:stringVar:}}')) {
//     el.textContent = el.textContent.replace('{{:stringVar:}}', changestr);
//   }
// });

How this works: #

• The initial str variable is set by your backend before the page loads, replacing {{:stringVar:}} with a real value.
• Your external JS runs after this variable is declared, so it can access and modify str.
• You can inject the new changestr value directly into the DOM to update what users see on the page.

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