JQuery 异步提交表单

1.使用post提交方式 
2.构造表单的数格式 
3.结合form表单的submit调用ajax的回调函数。 
使用 jQuery 异步提交表单代码:

代码如下:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>无标题页</title> 
</head> 
<script src="js/jquery-1.4.2.js"></script> 
<script> 
jQuery(function($) { 
// 使用 jQuery 异步提交表单 
$(‘#f1‘).submit(function() { 
$.ajax({ 
url: ‘ta.aspx‘, 
data: $(‘#f1‘).serialize(), 
type: "post", 
cache : false, 
success: function(data) 
{alert(data);} 
}); 
return false; 
}); 
}); 
</script> 
<body> 
<form id="f1" name="f1"> 
<input name="a1" /> 
<input name="a2" /> 
<input id="File1" type="file" name="File1"/> 
<input id="Submit1" type="submit" value="submit" /> 
</form> 
</body> 
</html>

如何异步跨域提交表单呢? 
1.利用script 的跨域访问特性,结合form表单的数据格式化,所以只能采用get方式提交,为了安全,浏览器是不支持post跨域提交的。 
2.采用JSONP跨域提交表单是比较好的解决方案。 
3.也可以动态程序做一代理。用代理中转跨域请求。 
使用 jQuery 异步跨域提交表单代码:

代码如下:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>无标题页</title> 
</head> 
<script src="js/jquery-1.4.2.js"></script> 
<script> 
jQuery(function($) 

// 使用 jQuery 异步跨域提交表单 
$(‘#f1‘).submit(function() 

$.getJSON("ta.aspx?"+$(‘#f1‘).serialize()+"&jsoncallback=?", 
function(data) 

alert(data); 
}); 
return false; 
}); 
}); 
</script> 
<body> 
<form id="f1" name="f1"> 
<input name="a1" /> 
<input name="a2" /> 
<input id="File1" type="file" name="File1"/> 
<input id="Submit1" type="submit" value="submit" /> 
</form> 
</body> 
</html>

时间: 2024-08-10 19:01:50

JQuery 异步提交表单的相关文章

Jquery异步提交表单到Action

转载请注明出处:jiq?钦's technical Blog 一 需求 出于兴趣最近在做分布式注册中心的管理界面,其中一个模块是左边的树显示所有ZooKeeper节点,使用的ztree实现,点击树节点的时候会查询后台action返回节点数据,显示在右边区域,为了不刷整个页面,所以采用的是Jquery的异步请求Action返回JSON数据,参考我的这篇文章,然后使用Jquery的load函数载入显示节点信息的nodeInfo.jsp,以返回的JSON数据为参数. 效果如下: 现在的需求是:我要在编

Jquery 异步提交表单(post)

方法  $.post(url,params,function(data){}); 表单的action,method属性都没有 button的type不能为submit只能为button 前台代码 <script type="text/javascript"> $(function()         {    //异步提交表单  $("#save").click(function(){      $.post("${ctx}/order/sav

ASP.NET MVC 网站开发总结(五)——Ajax异步提交表单之检查验证码

首先提出一个问题:在做网站开发的时候,用到了验证码来防止恶意提交表单,那么要如何实现当验证码错误时,只是刷新一下验证码,而其它填写的信息不改变? 先说一下为什么有这个需求:以提交注册信息页面为例,一般注册都需要用户填一个验证码信息(防止机器恶意注册),并且这个验证码会提交到后台去进行比对,若是错了则不会检查其他提交信息而直接返回浏览器端提示验证码错误.若是简单地用form表单直接将数据提交到指定的url,当验证码填写错误的信息返回浏览器端的时候,不可避免整个页面都会重新刷新一次,这是用户所不想要

SpringMVC中的异步提交表单

1.前言 近期在做一个项目,前台框架用的是EasyUI+SpringMVC,因为对SpringMVC不太了解,所以刚開始接触的时候有点吃力,在此通过一个EasyUi中的DataGrid表格来总结一下.  2.SpringMVC中的View向控制器传參 在SpringMVC中,View怎样向控制器传參数呢? 尤其是Form表单提交的时候,详细有例如以下几种方式 2.1 HttpServletRequest 能够通过getParameter()方法来获取前台传过来的參数 2.2 Form表单绑定 /

jquery回车提交表单

jquery回车提交表单,比较方便的功能. 三个事件keydown,keypress,keyup,分别是按下,按着没上抬,上抬键盘 ,所以用keyup. $(document).keyup(function(event){ if(event.keyCode ==13){ $("#submit").trigger("click"); }});

JQuery ajax提交表单及表单验证

JQuery ajax提交表单及表单验证 博客分类: jsp/html/javascript/ajax/development Kit 开源项目 注:经过验证,formValidator只适合一个页面不超过一个表单的情况. 本例实现功能:通过ajax提交表单,并在提交表单前对表单的数据进行验证. 主要通过两个插件实现: 第一个: jQuery Form Plugin http://jquery.malsup.com/form 主要功能是ajax提交表单 第二个:jQuery formValida

前端笔记-jquery ajax提交表单

jquery ajax提交表单 最近才发现,jquery ajax提交表单可以这么简单 $.ajax({ url: "udpate", type:"POST", data:$('#formId').serialize(), success: function(data){ alert(data); }, error:function(data){ }}); } 关键在于data:$('#formId').serialize(),这里的formId就是表单的Id. 以

Jquery ajax提交表单几种方法详解

[导读] 在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的方法.$get方式提交表单get() 方法通过远程 HTTP 在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$('#表单ID').serialize();就行了,下面我来介绍两个提交表单数据的方法. $get方式提交表单 get() 方

使用ajax异步提交表单

虽然这篇文章的标题是提交表单,但是主要的难点在于使用ajax提交文本域的内容, 在工作中的经常会需要ajax跨域的问题,通常的需求使用jsonp就可以得到解决,但是当前项目中有一个图片服务器,客户端需要直接上传图片到图片服务器中,这就产生了一个跨域post提交文件的问题,很显然jquery本身jsonp只支持get方式的异步提交肯定是不行 其中也尝试过使用ifrmae的方法来提交数据,在网上有,但是效果不理想,并且也很复杂的样子,最后选择出了jquery.from.js 这个插件,可以实现异步的