JavaScript跨页获取阿拉伯字符显示乱码问题求解决方案

Alright, let's fix that Arabic character garbling issue you're facing! The root cause is two-fold: improper form encoding and using an outdated decoding function in your JavaScript. Here's how to resolve this step by step:

Step 1: Correct the Form Submission Encoding #

First, your form has a small syntax error (using type=get instead of the proper method=get) and lacks explicit UTF-8 encoding. Adding the accept-charset="UTF-8" attribute ensures Arabic characters are encoded correctly when submitted.

Modified HTML Form:

<form method="get" accept-charset="UTF-8" action="http://ershadchem.yoo7.com/post?f=16&mode=newtopic">
  <table>
    <tr>
      <td>First Name:</td>
      <td><input type="text" name="firstname" size="10"></td>
    </tr>
    <tr>
      <td>Last Name:</td>
      <td><input type="text" name="lastname" size="10"></td>
    </tr>
    <tr>
      <td>Age:</td>
      <td><input type="text" name="age" size="10"></td>
    </tr>
    <tr>
      <td colspan="2"><input type="submit" value="Submit"></td>
    </tr>
  </table>
</form>

Step 2: Update JavaScript to Use Proper UTF-8 Decoding #

The unescape() function you're using is deprecated and doesn't handle multi-byte UTF-8 characters (like Arabic) correctly. Replace it with decodeURIComponent(), the standard method for decoding URI parameters that fully supports UTF-8. We'll also clean up the parameter parsing logic for better robustness.

Modified JavaScript Code:

<script language="JavaScript">
function getParams(){
  var idx = document.URL.indexOf('?');
  var params = {}; // Use object instead of array for key-value pairs
  if (idx !== -1) {
    var pairs = document.URL.substring(idx + 1).split('&');
    for (var i = 0; i < pairs.length; i++){
      var nameVal = pairs[i].split('=');
      // Only process valid key-value pairs to avoid errors
      if (nameVal.length === 2) {
        params[nameVal[0]] = nameVal[1];
      }
    }
  }
  return params;
}

var params = getParams();
// Decode with decodeURIComponent and handle missing parameters gracefully
var firstname = decodeURIComponent(params["firstname"] || "");
var lastname = decodeURIComponent(params["lastname"] || "");
var age = decodeURIComponent(params["age"] || "");

document.write("firstname = " + firstname + "<br>");
document.write("lastname = " + lastname + "<br>");
document.write("age = " + age + "<br>");

var getenwanid = document.getElementById("enwanid");
var getenwanid0 = document.getElementById("enwanid0");
</script>

Extra: Ensure the Receiving Page Uses UTF-8 #

Make sure the HTML page running this JavaScript includes a UTF-8 charset meta tag in the <head> section. This guarantees the browser renders Arabic characters correctly once decoded:

<meta charset="UTF-8">

Why This Works #

• accept-charset="UTF-8" forces the browser to encode Arabic characters into UTF-8-compatible URI components (e.g., %D8%A7%D9%84%D8%AD%D9%84 for Arabic text).
• decodeURIComponent() correctly decodes these UTF-8 encoded strings back into readable Arabic characters, unlike unescape() which treats each percent-encoded byte as a single ASCII character (causing garbling).
• We added safeguards for missing parameters (|| "") and valid key-value pairs to prevent runtime errors.

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