JS 一些问题与解决方法

一、post/get传输json数据中包含特殊字符

　　在使用HTTP请求传输数据时，因为他本身也需要一些字符做标记，比如= &，所以传输的数据中如果有特殊字符，就会被错误的理解成标记字符做了一些期望之外的处理。

　　这个问题的解决方法有很多种，最基本的就是将这些特殊字符替换为URL编码，这样就可以正常传输了。然后服务端解析数据时会自动将URL编码转换为正常的字符，不过也有特例不会被自动转换，需要我们手动再转回来，比如"。

　　URL编码表可以自行去百度，我这里只举一些例子：

　　

js = "...";  //准备刚发送的json字段

js.replace(/\!/g , "%21").replace(/\"/g , "%22").replace(/\#/g , "%23").replace(/\$/g , "%24").replace(/\%/g , "%25")
        .replace(/\&/g , "%26").replace(/\'/g , "%27").replace(/\(/g , "%28").replace(/\)/g , "%29").replace(/\*/g , "%2A")
        .replace(/\+/g , "%2B").replace(/\,/g , "%2C").replace(/\-/g , "%2D").replace(/\./g , "%2E").replace(/\//g , "%2F")
        .replace(/\:/g , "%3A").replace(/\;/g , "%3B").replace(/\</g , "%3C").replace(/\=/g , "%3D").replace(/\>/g , "%3E")
        .replace(/\@/g , "%40");

 

二、<form>表单submit后不提交的解决方法

 

 　　对于前端开发的初学者而言，有的时候想要使用<form>表单发送数据，这时候经常会遇到一个问题。

　　我们希望的是点击按钮提交表单时，调用我们自己定义的方法，然后使用ajax发送请求，最后对返回结果进行判断处理。

　　但实际上，如果没有特殊处理的话，提交表单时他总会自动的向action所指向的url发送请求，默认action是本页面，这就可能带来很多错误。

 

　　百度之后，找到了解决方法，只有<form>表单submit属性绑定的函数返回false，表单就不会发送，代码样例如下：

　　

<form  id="login_form" onsubmit="return login();">
　　<h1>Log in</h1> 
　　<input id="username" name="username"  type="text" />
　　<input id="password" name="password" type="password" /> 

　　<input type="submit" value="Login" />
</form>

function login() {
    var username = document.getElementById('username');
    var password = document.getElementById('password');

　　//TODO 一些数据判断

    var json={
        'username':username.value,
        'password':password.value
    };

　　$.post("http://127.0.0.1:8000/login/", JSON.stringify(json),
　　　　function(result){
　　　　//TODO结果处理

　　　　return false;

　　});

　　return false;
}

 

　　　　这里一定要保证login()函数在任何情况下都返回false.

 

三、JS获取<form>表单中<input type='file'>，并提交给服务器的解决方法

　　这里我使用的是 FormData 这个对象，他会自己将一个form表单封装成字典的格式，我们也可以手动的往里面添加内容。

　　下面举个具体的样例：

　　

<form id="addForm" onsubmit="return uploadFile();">
<input type="file" name="conf" id="fileContent">

<button type="submit" class="btn btn-xs btn-xs btn-green">提 交</button>
</form>

function uploadFile() {
    var formData = new FormData($( "#addForm" )[0]); 　　//创建FormData对象，产生一个key为conf，value为上传文件的字典
　　formData.append('key',value);　　//手动添加数据

    $.ajax({
         url: 'http://127.0.0.1:8000/upload/' ,
         type: 'POST',
         data: formData,
         async: false,
         cache: false,
         contentType: false,
         processData: false,
         success: function (data) {
             //TODO 结果处理
         },
         error: function (returndata) {
             alert(returndata);
         }
     });

    return false;
}