`

form提交

 
阅读更多

form提交和 纯粹的ajax的提交是有区别的

普通的form提交可在表单元素上加上name="obj.list[0].name" 即可提交到后台

但是$.ajax 提交方式不同了

例如

	$.ajax({   
		   type: "post",  
		   async:false,  
		   url:'http://localhost', 
		   data:{
			   id:8813,
			   name:'9990000',
			   aList: 
			    [
			          	{
			          	  name:'sdf'
			          	},
			         	{
	          	 			name:'sdf2'
	          			},
	          		 	{
	          	 			name:'sdf3'
	          			}
			    ]
		   } ,  
		   success: function(data){  
		       // dosomething
		   }  
})

 在network里看看有这样一个信息

Form Data

  1. id:
    8813
  2. name:
    9990000
  3. aList[0][name]:
    sdf
  4. aList[1][name]:
    sdf2
  5. aList[2][name]:
    sdf3
  6. aList[0][name]这是JS可以识别的,提交到后台java 会直接报错,因为java无法识别像javascript这样不严谨的语法。
  7. 如果是alist[0].name 就没问题了。

解决这个方法需要从jquery 解决,这应该算是jquery封装ajax的一个bug

解决方法1 扩展jquery的方法,在$.param的基础上修改一句话即可

代码如下:

(function($) { // copy from jquery.jsvar r20 = /%20/g, rbracket = /\[\]$/; $.extend({ customParam: function( a ) { var s = [], add = function( key, value ) { // If value is a function, invoke it and return its value value = jQuery.isFunction( value ) ? value() : value; s[ s.length ] = encodeURIComponent( key ) + "=" + encodeURIComponent( value ); }; // If an array was passed in, assume that it is an array of form elements.if ( jQuery.isArray( a ) || ( a.jquery && !jQuery.isPlainObject( a ) ) ) { // Serialize the form elements jQuery.each( a, function() { add( this.name, this.value ); }); } else { for ( var prefix in a ) { buildParams( prefix, a[ prefix ], add ); } } // Return the resulting serializationreturn s.join( "&" ).replace( r20, "+" ); } }); /* private method*/function buildParams( prefix, obj, add ) { if ( jQuery.isArray( obj ) ) { // Serialize array item. jQuery.each( obj, function( i, v ) { if (rbracket.test( prefix ) ) { // Treat each array item as a scalar. add( prefix, v ); } else { buildParams( prefix + "[" + ( typeof v === "object" || jQuery.isArray(v) ? i : "" ) + "]", v, add ); } }); } elseif (obj != null && typeof obj === "object" ) { // Serialize object item.for ( var name in obj ) { buildParams( prefix + "." + name, obj[ name ], add ); } } else { // Serialize scalar item. add( prefix, obj ); } }; })(jQuery);

 

分享到:
评论

相关推荐

    使用JQuery实现从JSON对象转换为form提交数据

    本篇文章将深入探讨如何利用jQuery从JSON对象转换为form提交数据。 首先,JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它基于JavaScript的一个子集,易于人阅读和编写,同时也易于机器解析和...

    jquery.form提交方式

    《jQuery Form 提交方式详解》 在Web开发中,jQuery库极大地简化了JavaScript操作,特别是在处理表单提交方面。本文将深入探讨jQuery中处理表单提交的多种方式,结合源码解析,帮助开发者更好地理解和应用。 一、...

    asp.net Form提交的图片批量上传

    ASP.NET Form提交的图片批量上传是一项常见的Web开发任务,它涉及到客户端与服务器之间的数据交互,以及文件处理技术。在这个过程中,用户可以选择多张图片并一次性发送到服务器进行存储或处理。下面将详细介绍这个...

    form提交时传递额外的参数几种常见方法

    本文将详细介绍在form提交时传递额外参数的几种常见方法,并分析各自的优缺点,供开发者根据实际需求进行选择。 1. 在表单里使用隐藏的input元素 这是最简单也是最直接的方法。可以在表单HTML代码中直接添加一个...

    jxl以及jquery的form提交

    `jxl`是一个Java库,用于读写Excel电子表格文件,而`jQuery.form`是jQuery的一个插件,提供了方便的表单提交和异步上传功能。接下来,我们将深入探讨这两个技术及其应用。 首先,让我们来了解`jxl`。`jxl`库允许...

    EasyUI 另一种form提交方式

    由于EasyUI自带的Form提交方式会自动去除掉readonly和disabled的值,或者多层form时,不能正确获取到form表单中的数据,由此,产生了这个专门针对EasyUI form的提交工具。

    不用form提交表单,用ajax上传文件

    "不用form提交表单,用ajax上传文件"是这种需求的一个典型场景。这种方式可以让用户在上传文件时无需等待页面刷新,而是通过Ajax(Asynchronous JavaScript and XML)技术实现实时反馈,提升交互体验。 在JDK 8版本...

    ajax form 提交 动态显示

    "Ajax Form提交 动态显示"这一主题涉及到如何利用AJAX处理表单提交,并实时更新页面内容。 1. **AJAX基础**: - AJAX的核心是XMLHttpRequest对象,它负责在后台与服务器通信。 - AJAX的工作流程包括创建...

    用form提交打开新页面,类似于支付时候的效果

    在网页开发中,"用form提交打开新页面,类似于支付时候的效果"是一种常见的用户体验设计,特别是在处理支付或重要操作时,以确保用户明确他们的决定并提供一个清晰的反馈流程。以下是一些关于这个主题的关键知识点:...

    java反射-在form提交的一些应用

    以上就是关于“java反射-在form提交的一些应用”的主要知识点,包括如何利用反射处理表单数据、源码分析以及工具的使用。通过深入理解这些内容,开发者可以更加灵活地处理Web应用中的表单数据,提高代码的可维护性和...

    防止Layui form表单重复提交的实现方法

    通过form.on("submit(formConfig)",function(data){...})的调用,开发者可以指定当具有特定lay-filter属性的表单触发提交事件时,执行相应的函数。在这个函数内部,返回false可以阻止表单的提交,即阻止表单数据被...

    JS提交form表单实例分析

    本文实例讲述了JS提交form表单。分享给大家供大家参考,具体如下: 一、javascript 页面加裁时自动提交表单: Form表单: <form method="post" id="myform" action="a.php"> <input type="submit" value=...

    C# post方式提交Form表单

    本篇文章将深入探讨如何在C#中通过POST方式提交Form表单,包括其原理、步骤和实际代码示例。 一、POST提交表单的基本原理 POST是HTTP协议中的一个方法,用于向服务器发送数据,特别是当数据量较大或者包含敏感信息...

    form提交的集中方式

    在Web开发中,表单(Form)提交是用户与服务器交互的重要手段,特别是在Java后端处理用户请求时。本文档将详细介绍三种常见的JavaScript库jQuery中处理表单提交的方法,包括$.post()、$.ajax()以及使用jquery.form....

    jquery.form.js实现将form提交转为ajax方式提交的方法

    使用jquery.form.js库可以将标准的表单提交转换为Ajax形式提交,从而避免页面的重新加载,同时还能带来许多其他好处,例如提升页面加载速度、提供更加流畅的用户体验。 jquery.form.js是一个强大的jQuery插件,可以...

    Submit-the-form.rar_form 提交_提交表单

    本压缩包“Submit-the-form.rar”包含了一份关于ASP提交表单的源码示例,这对于我们理解如何在ASP环境下处理用户输入数据极其有价值。 首先,我们来看"index.htm",这是一个HTML文件,通常作为用户交互的前端界面。...

    jqueryformjs实现将form提交转为ajax方式提交的方法.docx

    ### 使用jQuery Form插件将表单提交转换为Ajax提交 #### 概述 本文档将详细介绍如何使用jQuery Form插件将HTML表单的提交过程转换为Ajax方式提交,从而实现无需刷新页面即可提交数据到服务器的功能。这种方法可以...

    form表单的异步回调方法

    默认情况下,表单提交会引发页面重定向,使用`<form>`的`action`属性指定处理表单数据的URL,`method`属性定义请求类型(GET或POST)。 2. **阻止默认行为(Preventing Default Behavior)**:为了阻止表单提交导致...

    form中相同name的checkbox提交问题

    然而,当这些复选框具有相同的`name`属性时,提交表单时可能会出现一些特定的问题。这篇博客将探讨这个问题,并提供解决方案。 **一、表单提交与checkbox** 在HTML表单中,`<input type="checkbox">`用于创建复选...

Global site tag (gtag.js) - Google Analytics