Ajax提交參數時html標籤提交失敗如何處理

這次帶給大家Ajax提交參數時html標籤提交失敗如何處理，處理Ajax提交參數時html標籤提交失敗的注意事項有哪些，以下就是實戰案例，一起來看一下。

最近在公司做資源及文章上傳功能遇到一個小問題，被坑了好半天。

        此功能就類似利用富文本編輯器發布信息，但是用Ajax提交數據，因此提交參數值中不可避免的含有html標籤。

        在本機上執行程式碼一直沒問題，總是可以提交成功，但是程式碼部署到線上就不能成功提交資料了，被坑了好久，找了好半天才找到問題所在。

        提交不成功的原因是因為我的提交資料中含有html標籤，然後直接無法要求到我的目標地址。

         接著解決方法如下：

         1、在頁面上以JS的Base64編碼（類似加密）標示html標籤的參數值。

         2、在目標位址取得資料後，並使用後台Base64解碼方法對所取得的資料進行解碼即可。

          以下是我的JS的Base64編碼和解碼方法碼：

//下面是64个基本的编码
 var base64EncodeChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
 var base64DecodeChars = new Array(
   -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,
  -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,
  -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 62, -1, -1, -1, 63,
   52, 53, 54, 55, 56, 57, 58, 59, 60, 61, -1, -1, -1, -1, -1, -1,
   -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14,
   15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, -1, -1, -1, -1, -1,
   -1, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40,
   41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, -1, -1, -1, -1, -1);
 //编码的方法
 function base64encode(str) {
     var out, i, len;
    var c1, c2, c3;
     len = str.length;
    i = 0;
    out = "";
    while(i > 2);
             out += base64EncodeChars.charAt((c1 & 0x3) > 2);
            out += base64EncodeChars.charAt(((c1 & 0x3)> 4));
             out += base64EncodeChars.charAt((c2 & 0xF) > 2);
      out += base64EncodeChars.charAt(((c1 & 0x3)> 4));
       out += base64EncodeChars.charAt(((c2 & 0xF) >6));
       out += base64EncodeChars.charAt(c3 & 0x3F);
       }
     return out;
   }
 //解码的方法
 function base64decode(str) {
     var c1, c2, c3, c4;
    var i, len, out;
     len = str.length;
     i = 0;
  out = "";
     while(i > 4));
      do {
          c3 = str.charCodeAt(i++) & 0xff;
          if(c3 == 61)
            return out;
          c3 = base64DecodeChars[c3];
        } while(i > 2));
     do {
          c4 = str.charCodeAt(i++) & 0xff;
           if(c4 == 61)
            return out;
          c4 = base64DecodeChars[c4];
         } while(i = 0x0001) && (c  0x07FF) {
           out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
            out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
           out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
         } else {
            out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
             out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
          }
       }
    return out;
   }
 function utf8to16(str) {
   var out, i, len, c;
    var char2, char3;
    out = "";
    len = str.length;
   i = 0;
    while(i > 4)
       { 
      case 0: case 1: case 2: case 3: case 4: case 5: case 6: case 7:
          // 0xxxxxxx
          out += str.charAt(i-1);
          break;
         case 12: case 13:
          // 110x xxxx  10xx xxxx
          char2 = str.charCodeAt(i++);
         out += String.fromCharCode(((c & 0x1F) <p style="text-align: left;">    頁面呼叫JS方法進行Base64編碼碼如下：</p><pre class="brush:php;toolbar:false"> var articleContent = editor.getContent();
   articleContent = base64encode(utf16to8(articleContent));

   新的問題，用JS對資料進行Base64編碼後，JS居然把加號（+）替換成了空格，造成我後台方法解碼出來的資料不正確。

      解決方法如下：

      本人先採用JS方法replace()方法替換，但有錯誤，JS只是把我的第一個空格替換成了加號（+），最後解決方法如下。

      在後台（目標接受位址下）對取得到的數據，將空格替換成加號（+）。代碼如下：       

string content = Request["content"].ToString();
      if (content.Contains(""))
        {
          content=content.Replace(" ", "+");
        }
      //byte[] sa = Convert.FromBase64String(content);
      //Encoding Ansi = Encoding.GetEncoding("GB2312");
      // content = Ansi.GetString(sa);
      content = Base64Decrypt(content);//Base64解码

       如果後台的Base64編碼和解碼方法不會的請看下面：

/// <summary>
    /// Base64加密
    /// </summary>
    /// <param>需要加密的字符串
    /// <returns></returns>
    public static string Base64Encrypt(string input)
    {
      return Base64Encrypt(input, new UTF8Encoding());
    }
    /// <summary>
    /// Base64加密
    /// </summary>
    /// <param>需要加密的字符串
    /// <param>字符编码
    /// <returns></returns>
    public static string Base64Encrypt(string input, Encoding encode)
    {
      return Convert.ToBase64String(encode.GetBytes(input));
    }
    /// <summary>
    /// Base64解密
    /// </summary>
    /// <param>需要解密的字符串
    /// <returns></returns>
    public static string Base64Decrypt(string input)
    {
      return Base64Decrypt(input, new UTF8Encoding());
    }
    /// <summary>
    /// Base64解密
    /// </summary>
    /// <param>需要解密的字符串
    /// <param>字符的编码
    /// <returns></returns>
    public static string Base64Decrypt(string input, Encoding encode)
    {
      return encode.GetString(Convert.FromBase64String(input));
    }

相信看了本文案例你已經掌握了方法，更多精彩請關注php網其它相關文章！

推薦閱讀：

異步的檔案或圖片上傳ajax

#基於Ajax技術來實現無刷新使用者登入（附程式碼）

以上是Ajax提交參數時html標籤提交失敗如何處理的詳細內容。更多資訊請關注PHP中文網其他相關文章！