createTime--2016年9月25日08:54:48
参考链接:http://www.w3school.com.cn/tags/html_ref_urlencode.html
jQuery的serialize()方法通过序列化表单值,创建URL编码文本字符串,我们就可以选择一个或多个表单元素,也可以直接选择form将其序列化
js部分
$(function() {//页面加载完毕 //给单选框添加一个单击事件 $("form input[name=sex]").click(function() { $('#box').html(decodeURIComponent($(this).serialize()));//给当前form表单元素数据进行序列化,并进行//转码,结果是:sex=男/sex=女 }) });
/** * 显示form表单进行序列化后的结果 */ function showData() { var result = $("form").serialize();//form表单进行序列化,获取的是所有带有name属性的form表单元素的name和值 $("#box").html(decodeURIComponent(result));//结果形如:userName=张三&userPass=iiiiiiN8&sex=男//&email=22@qq.com&address=河北 };
var FormSubmit = {}; $(function(){ (function() { /** * 方法一 */ var button1 = $("form input[type=button]").eq(1);//或使用$("input:button").eq(1) //获取元素下标为1的按钮 //$("form input[type=button]")[1] //和$("form input[type=button]").get(1) 都无法获取到 //这是js获取集合中某一元素的方法;jquery中,需使用eq()方法 button1.click(function(){//为第二个按钮绑定一个点击事件 alert(1); //ajax提交form表单 $.post("输入请求地址",encodeURI(encodeURI(decodeURIComponent($("form").serialize()))),function(result){ alert(result); }); }); /** * 方法二 * var button1 = $("form input:button")[1]; * button1.onclick = function(){ * alert(1); * $.post("输入请求地址",encodeURI(encodeURI(decodeURIComponent($("form").serialize()))),function(result){ * alert(result); * }); * } */ })(); });
需要特别注意的是:
1.网上许多都说明了$("form").serialize()方法可以序列化表单,但是并没有给出使用这种方法Ajax在提交form表单时后台接收到的中文乱码的问题,使用encodeURI(encodeURI(decodeURIComponent($("form").serialize())))这种方式可以解决中文参数乱码的问题,后台接收到的数据需要用java.net.URLDecoder.decode("接收到的数据","UTF-8"),再次进行转码即可。
2.如果传的参数,没有中文,则直接使用$("from").serialize()方法传递参数即可
html部分
<form action="#"> <table> <tr> <td>用户名:</td> <td><input type="text" name="userName" /></td> </tr> <tr> <td>密码:</td> <td><input type="password" name="userPass" /></td> </tr> <tr> <td>性别:</td> <td> <label><input type="radio" name="sex" value="男" checked="checked"/>男</label> <label><input type="radio" name="sex" value="女" />女</label> </td> </tr> <tr> <td>邮件:</td> <td><input type="text" name="email" /></td> </tr> <tr> <td>地址:</td> <td> <select name="address"> <option value="">---请选择省份---</option> <option value="河南">河南</option> <option value="河北">河北</option> </select> </td> </tr> <tr> <td colspan="2"><input type="button" value="显示表单数据" onclick="showData()"/></td> </tr> <tr> <td colspan="2"><input type="button" value="提交表单"/></td> </tr> </table> </form> <div id="box"></div>