`
coder_xpf
  • 浏览: 9920 次
社区版块
存档分类
最新评论

jquery ajax 序列化表单

阅读更多

 

 checkbox 如果不设定值,默认选中值为on;设定值之后,选中则为设定的值

 

<input type="checkbox" name="favor" id="favor" checked="checked"/>
$("#favor").val()=="on"  //true
<input type="checkbox" name="favor" id="favor" value="1" checked="checked"/>
$("#favor").val()=="1" //true

 

$(selector).serialize() 

方法通过序列化表单值,创建 URL 编码文本字符串。

<script src="jquery-1.7.min。js"></script>
<script>
$(function(){
   $("#submit").click(function(){
     alert($("#myForm").serialize());//输出username=admin&password=admin123
   });
});
</script>
<form id="myForm">
昵称 <input type="text" name="username" value="admin" /><br />
密码 <input type="password" name="password" value="admin123" /><br />
<input type="button" id="submit" value="序列化表单" /> 
</form>

  把复选框和单选框的值序列化为字符串形式,只会将选中的值序列化。

<input type="checkbox" name="favor1" id="favor" value="1"/>
<input type="checkbox" name="favor2" id="favor" value="1" checked="checked"/>
$(":checkbox").serialize();//输出favor2=1

$.param()

方法创建数组或对象的序列化表示。

var obj = {a:1,b:2,c:3};
var k = $.param(obj);
alert(k);    //输出a=1&b=2&c=3

 $(selector).serializeArray()

返回的 JSON 对象是由一个对象数组组成的,其中每个对象包含一个或两个名值对 —— name 参数和 value 参数(如果 value 不为空的话)。举例来说:

[ 
  {name: 'firstname', value: 'Hello'}, 
  {name: 'lastname', value: 'World'},
  {name: 'alias'}, // 值为空
]

 

分享到:
评论

相关推荐

    jquery序列化表单去除指定元素示例代码

    本文将详细介绍如何使用jQuery来实现序列化表单数据的同时,去除指定的表单元素。 首先,我们需要了解jQuery的序列化方法`serialize()`的基本用法。`serialize()`方法能够获取表单元素,并将其值编码为URL编码的...

    jQuery Ajax无刷新提交表单并执行邮件通知

    data: $('#myForm').serialize(), // 序列化表单数据 dataType: 'json', // 预期的服务器响应类型 success: function(response) { if (response.success) { // 提交成功,显示成功消息或执行其他操作 } else {...

    jquery ajax提交整个表单元素的快捷办法

    这个函数能够将表单中的所有可序列化元素(如input、textarea、select等)转换为URL编码的字符串,非常适合用于发送表单数据到服务器。在给定的代码中,`$(“form”).serialize()`就是用来获取当前页面中所有表单...

    传智播客 jQuery ajax 课件

    - `.serialize()`: 将表单数据序列化为URL编码字符串,方便用于AJAX请求。 - `.ajaxStart()` 和 `.ajaxStop()`: 监听所有AJAX请求的开始和结束。 7. **实战应用** - 用户无刷新登录验证:使用AJAX提交用户登录...

    jquery表单验证插件

    - **fieldSerialize**:序列化表单中的特定字段。 ##### 4.3 实例:使用ajaxSubmit提交表单 ```javascript $('#myFormId').submit(function(){ $(this).ajaxSubmit(); return false; // 阻止默认提交行为 }); ```...

    jquery序列化表单以及回调函数的使用示例

    jQuery提供了一种方便的方法来序列化表单数据,使得这个过程变得简单且高效。本文将详细介绍如何使用jQuery的序列化功能以及如何结合回调函数来处理异步请求。 **jQuery序列化表单** 序列化表单是将HTML表单的数据...

    jquery ajax 如何向jsp提交表单数据

    data: $('#ajaxFrm').serialize(), // 序列化表单数据 success: function(response) { // 处理响应数据 }, error: function() { // 处理错误情况 } }); ``` 在示例中,`show.jsp` 页面通过 AJAX 将表单...

    Ajax使用jQuery提交表单

    // 序列化表单数据 $.ajax({ url: 'submit.php', type: 'POST', data: formData, success: function(response) { // 处理服务器返回的数据 console.log(response); }, error: function(xhr, status, error...

    jquery很全的例子源码,事件 ajax,表单应用

    4. 表单序列化:`$("#form").serialize()`将表单数据序列化为URL字符串,便于发送Ajax请求。 5. 表单元素操作:`.prop()`用于改变或获取表单元素属性,如`$("#checkbox").prop("checked", true)`。 以上内容只是...

    jquery.unobtrusive-ajax.rar

    5. **表单支持**:对于表单提交,它会自动处理表单数据的序列化和发送,并根据响应内容更新页面。 6. **兼容性**:jQuery Unobtrusive Ajax与jQuery库无缝集成,因此可以利用jQuery提供的各种便利函数和选择器。 ...

    jquery ajax异步提交表单数据的方法

    具体来说,处理不带文件的表单数据时,可以使用`.serialize()`方法序列化表单数据。序列化后的数据会被转换为一个URL编码的字符串,从而适用于HTTP请求。 对于带文件的表单数据,由于文件数据不能通过`.serialize()...

    jquery实现弹窗表单填写提交

    总结,这个项目涉及了jQuery的基本用法,包括DOM操作(选择元素、显示/隐藏元素)、事件处理、表单序列化、Ajax请求,以及基本的前端表单验证。这些都是Web开发者必备的技能,尤其在构建交互性强的网页应用时。通过...

    jQuery 表单序列化实例代码

    3. jQuery提供了序列化表单数据的两种方法:serialize()和serializeArray()。 - serialize()方法会把一个表单内的元素编码成一个URL查询字符串,这对于处理表单数据和发送GET请求非常有用。该方法会自动处理表单中...

    jquery异步提交form表单

    通过查看源码,我们可以看到如何处理表单数据的序列化、如何监听和触发事件,以及如何与服务器进行通信。这对于我们优化性能、调试问题或者自定义功能都有很大的帮助。 总的来说,jQuery异步提交form表单是现代Web...

    PHP+Jquery+AJAX POST,GET提交表单并接收返回

    data: $('form').serialize(), // 序列化表单数据 success: function(response) { // 处理服务器返回的数据 }, error: function(jqXHR, textStatus, errorThrown) { // 错误处理 } }); ``` 对于GET请求,...

    jquery ajax json php

    在Web开发中,JSON常用于服务器向客户端传递数据,因为它可以直接被JavaScript解析为对象,无需额外的序列化或反序列化过程。 **PHP** 是一种广泛应用于服务器端的脚本语言,特别适合处理HTML表单数据、与数据库...

    jquery与ajax调用,有代码 , 有说明,使ajax调用简单

    // 序列化表单数据 $.ajax({ url: this.action, type: this.method, data: formData, success: function(response) { // 处理服务器响应 }, error: function(xhr, status, error) { // 处理错误 } }); }...

    php基于jquery的ajax技术传递json数据简单实例.docx

    点击“提交”按钮时,使用 jQuery 的 serialize() 方法将表单数据序列化,并使用 Ajax 将数据传递给 PHP 页面。 jQuery 代码 在 jQuery 代码中,我们使用点击事件来触发 Ajax 请求。当点击“提交”按钮时,我们...

    jQuery ajax提交Form表单实例(附demo源码)

    2. **序列化表单数据**:使用jQuery的`serializeArray()`方法可以获取表单元素的键值对,并将其转换为一个数组,数组中的每个元素是一个包含name和value的对象。 3. **构造AJAX请求**:使用$.ajax()方法将表单数据...

    jQuery简单可视化表单拖拽实例代码.zip

    为了存储和提交这些自定义表单,可能需要使用JSON格式来序列化表单结构。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。我们可以遍历表单元素,将每...

Global site tag (gtag.js) - Google Analytics