标签:nbsp ajax 单点 button 运动 put get javascrip 就是
传统的表单操作是每个表单元素一个一个获取值进行提交,这样效率比较低
所以我们有了 表单序列化方法: serialize() 他会智能获取表单内的所有元素,会将
里面的内容序列化到字符串中,然后在用AJAX提交。
简单点说:- 方法用于序列化一组表单元素,将表单的内容编码为用于提交的字符串
例:
<body> <!-- 此代码已导入JQ !!! 切记! --> <form id = "myform"> 昵称<input type="text" name = "username" value="admin"> <br> 密码<input type="password" name= "passowrd" value = "admin"><br> <input type="button" id = "submit" value = "序列化表单【提交】"> </form> <script type="text/javascript"> $(‘#submit‘).click(function() { alert( $(‘#myform‘).serialize() ); }); </script> </body>
打印出来的就是 要提交的内个Get的那个数据: username=admin&passowrd=admin
非常的方便啊,所以我们举一反三:
我们可以在AJAX的data哪里 直接 序列化提交,具体自己去实现啊啊哈哈~~~~
还可以获取单选框 和 复选框 和 下拉框的内容:
<body> <!-- 此代码已导入JQ !!! 切记! --> <form id = "myform" > 你喜欢游泳吗? <input type="radio" name = "Swimming" value = "喜欢" checked="checked"> 喜欢 <input type="radio" name = "Swimming" value = "不喜欢"> 不喜欢 <input type="radio" name = "Swimming" value = "还好"> 还好 <br> 你喜欢什么运动? <input type="checkbox" name = "hobby1" value = "跑步" > 跑步 <input type="checkbox" name = "hobby2" value = "跆拳道"> 跆拳道 <input type="checkbox" name = "hobby3" value = "登高"> 登高 <input type="checkbox" name = "hobby4" value = "跳绳"> 跳绳 <input type="checkbox" name = "hobby5" value = "游泳"> 游泳 <input type="checkbox" name = "hobby6" value = "羽毛球"> 羽毛球 <br> <input value="序列化提交" id = "submit" type="button"> </form> <script type="text/javascript"> $(‘#submit‘).click(function() { console.log($(‘#myform‘).serialize()) }); </script> </body>
我选了几个啊 返回的是:Swimming=%E5%96%9C%E6%AC%A2&hobby1=%E8%B7%91%E6%AD%A5&hobby4=%E8%B7%B3%E7%BB%B3&hobby6=%E7%BE%BD%E6%AF%9B%E7%90%83
然后我们将其解码:Swimming=喜欢&hobby1=跑步&hobby4=跳绳&hobby6=羽毛球
也可以用decodeURIComponent()解码...你自己喜欢啦...
JQUREY 的 表单序列化 和 .$.getScript () 和 $.getJSON() 方法!
标签:nbsp ajax 单点 button 运动 put get javascrip 就是
原文地址:https://www.cnblogs.com/bi-hu/p/14843102.html