`

JQuery对Form的序列化发送AJAX数据

    博客分类:
  • JS
阅读更多
//Form 序列化 


<form action="${base}/demo/1" method="post" id="form_update">
	<div>
	  <select name="single">
	    <option>Single</option>
	    <option>Single2</option>
	  </select>
	 </div>
	 <div>
	  <select name="multiple" multiple="multiple">
	    <option selected="selected">Multiple</option>
	    <option>Multiple2</option>
	    <option selected="selected">Multiple3</option>
	  </select><br/>
	 </div>
	  <input type="checkbox" name="check" value="check1"/> check1
	  <input type="checkbox" name="check" value="check2" checked="checked"/> check2
	  <input type="radio" name="radio" value="radio1" checked="checked"/> radio1
	  <input type="radio" name="radio" value="radio2"/> radio2
	  <input type="button" name="OK" value="OK---" onclick="toUpdate()"/>
		<input type="hidden" name="_method" value="put">
</form>

 

 

JS:

 

function toUpdate(){
	//alert($("#form_update").serialize());
	$.post("${base}/demo/111",$("#form_update").serialize(),function(data){alert(data)});

}


在Action里面可以接收值了。。 

 

 

 

 

 

 

 

分享到:
评论
1 楼 kisbo110 2011-04-06  
我现在表单上有不确定个元素,自己可以无限添加 每次我都给新建元素一个自增长的id,服务器端如何接受序列化后的参数。。。

相关推荐

    jquery.unobtrusive-ajax.rar

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

    jquery表单验证插件jquery.form.js.pdf

    从技术细节上来看,`$.post`, `$.get`, `$.ajax`是jQuery中用于发起AJAX请求的函数,而jquery.form.js插件则提供了一种封装方式,使得表单的AJAX提交和数据处理更加直观和简单。 最后,文档中提到的`fieldSerialize...

    jquery-form

    此插件不仅简化了表单数据的序列化过程,还允许通过 AJAX 方式提交表单,甚至包括文件上传功能。下面我们将详细介绍此插件的主要特性及其使用方法。 #### 二、安装与引入 要使用 jQuery Form 插件,首先确保已正确...

    jquery form

    jQuery Form插件是jQuery库中的一个强大工具,它极大地简化了HTML表单的处理,提供了异步提交(AJAX)功能,使得用户在无需页面刷新的情况下就能发送表单数据,提高了用户体验。这个插件依赖于jQuery核心库,如在本...

    jquery.form中文API

    这些方法和选项使得使用jQuery处理表单数据和提交变得简单和灵活,同时提供了对AJAX提交的精细控制,从而创建更流畅、无刷新的用户体验。通过这些API,开发者能够方便地处理表单的序列化、提交、重置和数据获取等...

    jquery.form.js中文API.pdf

    通过`.ajaxForm()`和`.ajaxSubmit()`方法,表单数据会按照一定的格式被序列化并发送到服务器。序列化表单的方法有两种:`formSerialize()`和`fieldSerialize()`。前者会序列化表单内的所有字段,而后者则可以指定...

    jquery.form提交方式

    如果你的表单只需要简单的异步提交,`$.ajaxForm()`会自动处理表单事件和序列化数据。 ```javascript $('form').ajaxForm({ url: 'your-url', success: function(response) { // 处理响应 } }); ``` 四、表单...

    jquery序列化form表单使用ajax提交后处理返回的json数据

    本篇文章将详细讲解如何使用jQuery序列化form表单,然后通过Ajax提交这些数据,并处理返回的JSON数据。 首先,让我们理解“序列化”这个概念。在Web开发中,序列化是指将表单数据转换为字符串格式,这样可以方便地...

    关于jquery form表单序列化的注意事项详解

    本文将深入探讨jQuery中`form`表单序列化时需要注意的事项,以及如何正确使用这一功能。 首先,我们要明白表单序列化的主要方法是`$.serialize()`和`$.serializeArray()`。`$.serialize()`将表单数据转换为字符串,...

    jquery form ui中文api

    ### jQuery Form UI中文API知识点详解 #### 一、概述 jQuery Form UI插件是一个非常实用且功能强大的jQuery扩展,主要用于简化HTML...以上是对`jquery form ui中文api`的相关知识点的详细介绍,希望对大家有所帮助。

    jquery提交form表单

    data: $(this).serialize(), // 序列化表单数据 success: function(response) { // 处理服务器返回的数据 }, error: function(xhr, status, error) { // 处理错误 } }); }); ``` 二、jQuery Form插件 `...

    jquery中ajax的用法实例

    ### jQuery中Ajax的用法实例...无论是序列化表单数据,还是发送 Ajax 请求获取数据,都只需要简单的几行代码即可实现。这对于提高前端开发效率、优化用户体验都有着重要的意义。希望本文能对您的前端开发工作有所帮助。

    jquery异步提交form表单

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

    jQuery-Form-书本实例.rar

    - `serializeArray`:序列化表单数据为数组格式。 9. **实际应用示例** 下面是一个简单的jQuery Form插件使用示例: ```html &lt;form id="myForm" action="/submit" method="post" enctype="multipart/form-data...

    前端项目-jquery-form-serializer.zip

    《前端项目:jQuery-form-serializer实现表单序列化详解》 在现代Web开发中,前端数据处理是一项不可或缺的任务,尤其在表单提交时,将表单数据转化为JSON对象显得尤为重要。"前端项目-jquery-form-serializer.zip...

    jquery.js+jquery.form.js 插件

    3. **表单序列化**: 提供了`serialize()`和`serializeArray()`方法,将表单数据转换为URL编码字符串或JSON格式,方便发送到服务器。 4. **错误处理**: 可以设定回调函数来处理错误,如`error`和`statusCode`,便于...

    ajax jquery html异步登录

    这个过程涉及到前端与后端的交互,数据的序列化和反序列化,以及错误处理。在实际应用中,还需要考虑安全性问题,例如对用户输入进行验证和过滤,防止SQL注入等攻击,以及使用HTTPS等安全协议来保护用户的敏感信息。...

    jQuery实现form表单序列化转换为json对象功能示例

    jQuery提供了一个方便的方法来序列化表单数据,并将其转换为JSON对象,这在使用Ajax提交表单时特别有用。本文将通过一个示例来讲解如何使用jQuery实现这一功能。 首先,我们需要一个HTML表单,如下所示: ```html ...

    Django之Form表单验证及Ajax验证方式汇总

    data: $(this).serialize(), // 序列化表单数据 success: function(response) { // 处理成功响应,例如显示成功消息 }, error: function(xhr, status, error) { // 处理错误响应,例如显示错误信息 }, }); ...

Global site tag (gtag.js) - Google Analytics