aJax文本中包含&符号上传错误的解决方法

    前几天写了个上传文本到服务器的网页，逻辑很简单，功能和paste.ubuntu.com差不多，主要是我平时上传代码使用，可以记录每一篇被阅读的次数。但是使用aJax上传的时候，却出了奇妙的问题，传文章之类的没有问题，但是传了个代码，却显示不完全。

    经过我半天的找bug，终于发现，是上传的时候，上传的字符串被文本中的 & 符号错误的分割了，因为aJax的上传会构造这样的代码。

xmlhttp.send("poster="+poster+"&content="+content+"&title="+title);

    这样的话，一旦提交的文本中有 &，整个就会被错误的分割开，导致无法完整的传上去。我想了几种办法来解决，其中一种是想先进行base64转码，这样转码之后的字符串中就不会有 & 这类特殊符号了，而且字符串长度只会增长三分之一左右。但是Google了JavaScript的base64转码函数之后，却发现并不适用。那个函数只能对ASCII里的符号进行转码，一旦有中文就会转码失败。之后我又想起了当时做POJ镜像的时候看到的POJ的base64转码函数，结果虽然可以对中文进行转码了，但是 & 的问题却没有解决。

    最后，我跑去问学长，学长从他的代码里找出了一个函数，可以将字符串进行URL转码。

encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。

    这个函数可以将&这类的特殊符号转码为 %26 这样的十六进制数，在使用aJax进行提交之后，接收的PHP会自动将这些转码回原来的格式。这样，既不用担心正确性，也可以成功的将含有各种特殊字符的文本进行上传，最后为了安全，在PHP里将上传的文本再进行一次html转码，然后就可以存入数据库了。

    全部的代码如下：

    HTML：

<form action="/index/index/uptext.html" method="POST" id="pasteform" name="pasteform"><div align="center"><table><tr><th><label for="id_poster">Title:</label></th><td><input id="id_title" type="text" name="title" maxlength="30" /><br /></td></tr><tr><th><label for="id_poster">Poster:</label></th><td><input id="id_poster" type="text" name="poster" maxlength="30" /><br /></td></tr><tr><th><label for="id_content">Content:</label></th><td><textarea id="id_content" rows="20" cols="80" name="content"></textarea></td></tr><tr> <th> </th> <td> <button type="button" class="btn github" onclick="UpText()"/> Paste</td></tr></table></div></form>

    JavaScript：

function UpText(){var xmlhttp;if (window.XMLHttpRequest){xmlhttp = new XMLHttpRequest();}else{xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}xmlhttp.onreadystatechange = function(){if (xmlhttp.readyState == 4 && xmlhttp.status == 200){document.getElementById("pasteform").innerHTML = xmlhttp.responseText;}}var poster = encodeURIComponent(document.getElementById("id_poster").value);var title = encodeURIComponent(document.getElementById("id_title").value);var content = encodeURIComponent(document.getElementById("id_content").value);xmlhttp.open("POST", "/index/index/uptext", true);xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");xmlhttp.send("poster="+poster+"&content="+content+"&title="+title);return false;}

    PHP（使用ThinkPHP5.0、Mongodb）：

public function uptext(Request $request){$id = Db::name('public_text_id')->find();Db::name('public_text_id')->where('id', $id['id'])->update(['id' => $id['id']+1]);date_default_timezone_set("Asia/Shanghai");$_time = date("Y-m-d H:i:s");$_id = $id['id'] + 1;$_poster = htmlspecialchars(input('poster'));$_content = htmlspecialchars(input('content'));$_ip = $request->ip();$_title = htmlspecialchars(input('title'));Db::name('public_text')->insert(["id" => $_id, "poster" => $_poster, "title" => $_title, "content" => $_content, "ip" => $_ip, "time" => $_time, "loadcount" => 0]);$_return = 'Success!';return $_return;}