关于ajax表单提交.serialize()

.serialize() 方法使用标准的 URL-encoded 符号上建立一个文本字符串. 它可以对一个代表一组表单元素的 jQuery 对象进行操作，比如<input>, <textarea>, 和 <select>: $( "input, textarea, select" ).serialize();：

只有 "successful controls"可以被序列化成字符串。其中，提交按钮的值不会被序列化。另外，如果想要一个表单元素的值被序列化成字符串，这个元素必须含有 name 属性。此外，复选框（checkbox）和单选按钮（radio）(input类型为 "radio" 或 "checkbox")的值只有在被选中时才会被序列化。另外，文件选择元素的数据也不会被序列化。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4   <style>
 5   body, select { font-size:12px; }
 6   form { margin:5px; }
 7   p { color:red; margin:5px; font-size:14px; }
 8   b { color:blue; }
 9   </style>
10   <script src="http://code.jquery.com/jquery-latest.js"></script>
11 </head>
12 <body>
13
14
15 <form>
16   <select name="single">
17     <option>Single</option>
18     <option>Single2</option>
19   </select>
20
21   <br />
22   <select name="multiple" multiple="multiple">
23     <option selected="selected">Multiple</option>
24     <option>Multiple2</option>
25
26     <option selected="selected">Multiple3</option>
27   </select>
28   <br/>
29   <input type="checkbox" name="check" value="check1" id="ch1"/>
30
31   <label for="ch1">check1</label>
32
33   <input type="checkbox" name="check" value="check2" checked="checked" id="ch2"/>
34
35   <label for="ch2">check2</label>
36   <br />
37   <input type="radio" name="radio" value="radio1" checked="checked" id="r1"/>
38
39   <label for="r1">radio1</label>
40   <input type="radio" name="radio" value="radio2" id="r2"/>
41
42   <label for="r2">radio2</label>
43 </form>
44 <p><tt id="results"></tt></p>
45 <script>
46     function showValues() {
47       var str = $("form").serialize();
48       $("#results").text(str);
49     }
50     $(":checkbox, :radio").click(showValues);
51     $("select").change(showValues);
52     showValues();
53 </script>
54
55 </body>
56 </html>

View Code

另外：

对于 input 的类型为 checkbox 或者 radio 时配合 label 标签且 checkbox radio 添加为 click事件 checked="checked" 选定

select 添加为 change事件当为select标签时 multiple="multiple" selected="selected" 选定

checked="checked"

转载于:https://www.cnblogs.com/dobestself-994395/p/4363073.html

关于ajax表单提交.serialize()相关推荐

使用HTML5 FormData轻松完成Ajax表单提交
在我们的日常开发中,经常都会用到Ajax来提交表单.让我们来看一个典型的例子: <form id="myform" action="webservice.php&q ...
php提交后刷新父页面,jquery – php ajax表单提交没有刷新父页面
我有一些问题的ajax表单提交 $("#send").on("click", function() { $.ajax({ type: "POST&qu ...
web 表单自定义字段_带有自定义服务器字段验证的AJAX表单提交
web 表单自定义字段 Overview 总览 This article presents a method for validating form data in a PHP script usin ...
ajax刷新iframe页面,通过iframe实现简单的ajax表单提交
之前做项目都是用现成的jquery插件实现表单的校验以及ajax提交,但是今天有个简单的头像图片ajax上传,以及一个很简单的表单提交,实在不想引入一个插件了,本着代码量最小,最简单的原则,照着豆瓣照 ...
ajax提交输入内容,当输入用于提交时，AJAX表单提交
我有一位设计师坚持通过点击回车和由AJAX提交的帖子和由Fancybox提供的回复提交的单个表单域.问题是return false不能阻止页面的提交.当输入用于提交时,AJAX表单提交我在那里做错了 ...
Form 表单提交和 Ajax 表单提交的一些区别
自己一些心得体会: 1:form 表单提交后进行后台处理程序,没有直接返回值,只能进行后台处理,Form标签里的所有数据全部提交到后台 ajax 表单提交,是可以局部提交,具有ajax的所有属性... ...
form表单提交和ajax表单提交
相信大家在做itoo的时候都用过ajax异步提交数据,好处自然不言而喻,数据提交页面不会闪屏;页面局部更新速度快;网络带宽占用低.而表单提交则整个页面重绘.如果表单提交后跳转到另一个页面获取数据这种情 ...
ajax表单提交excel,ajax使用formdata 提交excel文件表单到rails解析
.modal-body .container-fluid .row .col-md-12 1.下载模板文件 = link_to '模板文件' .row .col-md-12 = form_tag '' ...
ajax 表单提交传文件,Ajax提交Form表单及文件上传
刚刚申请下来的博客,写得第一篇.有点小激动,本人以前是一名工业3D设计师突然有些变故做上了JavaWeb开发: 前几天,发现了一些小问题.我在写后台管理页面时,需要上传一张图片.于是我就用很普通的Fo ...
织梦ajax表单提交参数错误,【织梦二次开发】织梦jquery+ajax方式提交自定义表单...
我们在dedecms教程中学到很多,比如可以借助jquery ajax提交dedecms自定义表单到后台.此例只做为参考,实际项目中根据自己的情况酌情修改. html部分: 姓名: 电话: 留言: j ...

关于ajax表单提交.serialize()

关于ajax表单提交.serialize()相关推荐

最新文章

热门文章