Jquery 中 ajaxSubmit使用讲解

最近在使用ajaxForm,随便把使用方法记下下来,以便以后回顾。

1 ,引入依赖脚本

<script type="text/javascript" src="/js/jquery/jquery.form.js"></script>   //ajaxForm 依赖脚本

<script type="text/javascript" src="/js/jquery/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="/js/jquery/jquery.easyui.min.js"></script>


2 使用方法

<form name="testForm" id="testForm" >

<input type="button" value="submit"/>

</form>

<script type="text/javascript">

var ajax_option={

url:"login",//默认是form action

success:function(data){

}

$('#testForm').ajaxSubmit(ajax_option);

}

</script>


//注意$("#testForm")  引号中名称必须要和form元素id值要保持一致

3 ajaxSubmit 和ajaxForm区别

ajaxForm不能提交表单。在document的ready函数中,使用ajaxForm来为AJAX提交表单进行准备。提交动作必须由submit开始 

ajaxSubmit 马上由AJAX来提交表单。你可以在任何情况下进行该项提交。 

4

option的参数 
var options = {    
       target:        '#output1',   // target element(s) to be updated with server response    
       beforeSubmit:  showRequest,  // pre-submit callback    
       success:       showResponse  // post-submit callback    
  
       // other available options:    
       //url:       url         // override for form's 'action' attribute    
       //type:      type        // 'get' or 'post', override for form's 'method' attribute    
       //dataType:  null        // 'xml', 'script', or 'json' (expected server response type)    
       //clearForm: true        // clear all form fields after successful submit    
       //resetForm: true        // reset the form after successful submit    
  
       // $.ajax options can be used here too, for example:    
       //timeout:   3000    
   };   




  • 13
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
jQuery表单插件ajaxForm和ajaxSubmit都是用来实现表单提交的,其ajaxForm适用于所有的表单,而ajaxSubmit只适用于表单的input、select等元素,不能包含文件上传域。 ajaxForm的使用方法: 1.引入jQuery库和jquery.form.js插件文件 ``` <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.form.js"></script> ``` 2.使用ajaxForm函数提交表单 ``` $(document).ready(function() { $('#form1').ajaxForm(function(data) { alert(data); }); }); ``` 其,#form1是表单的ID,data是服务器端返回的数据。 ajaxSubmit使用方法: 1.引入jQuery库和jquery.form.js插件文件 ``` <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.form.js"></script> ``` 2.使用ajaxSubmit函数提交表单 ``` $(document).ready(function() { $('#form1').submit(function() { $(this).ajaxSubmit({ success: function(data) { alert(data); } }); return false; }); }); ``` 其,#form1是表单的ID,data是服务器端返回的数据。 ajaxSubmit还可以通过其他参数来设置表单提交的相关信息,如: ``` $(document).ready(function() { $('#form1').submit(function() { $(this).ajaxSubmit({ type: 'post', // 提交方式,get或post,默认为get url: 'submit.php', // 提交的URL地址 data: { // 提交的数据,键值对形式 username: 'admin', password: '123456' }, dataType: 'json', // 服务器返回的数据类型,text、xml、json等 success: function(data) { // 提交成功后的回调函数 alert(data); } }); return false; }); }); ``` 以上就是ajaxForm和ajaxSubmit的详细使用方法。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值