jQuery.Form.js 的用法

jQuery.Form.js 插件的作用是实现Ajax提交表单。

  方法:

  1.formSerilize()  用于序列化表单中的数据,并将其自动整理成适合AJAX异步请求的URL地址格式。

  2.clearForm()   清除表单中所有输入值的内容。

  3.restForm    重置表单中所有的字段内容。即将所有表单中的字段恢复到页面加载时的默认值。

  疑问:ajaxForm()与ajaxSubmit()的区别:

  答案:$("#form1").ajaxForm();  相当于以下两行:

     $("#form1".submit)(function(){

         $("#form1").ajaxSubmit();

       return false;

       })  //也就是说ajaxFrom()会自动阻止表单提交。而ajaxSubmit()不会自动阻止表单提交,想阻止表单提交,要自己return false;

  技巧1:如果希望表单提交完成后不跳转,那么一行简单的代码就能够实现,几乎与不使用表单提交是一样的:

  $("#frm1").ajaxSubmit(function(message) {
    alert("表单提交已成功!");
  });

     注意:ajaxForm()与ajaxForm()都可以没有参数或者接受1个参数。该参数既可以是一个回调函数,也可以是一个options对象。该对象功能非常强大,说明如下:

     var options={

        url:url,      //form提交数据的地址

        type:type,     //form提交的方式(method:post/get)

        target:target,  //服务器返回的响应数据显示在元素(Id)号确定

        beforeSubmit:function(),  //提交前执行的回调函数

        success:function(),       //提交成功后执行的回调函数

        dataType:null,       //服务器返回数据类型

        clearForm:true,       //提交成功后是否清空表单中的字段值

        restForm:true,        //提交成功后是否重置表单中的字段值,即恢复到页面加载时的状态

        timeout:6000         //设置请求时间,超过该时间后,自动退出请求,单位(毫秒)。      

     }

  例子:

    页面js代码:

<script src="jQuery.1.10.1.js" type="text/javascript"></script>
    <script src="jQuery.Form.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $(":submit").click(function () {
                var options = {
                    url: "indexAjax.aspx",
                    type:"post",
                    success: function () {
                        alert("成功啦");
                    }
                };
                $("#frm1").ajaxForm(options);
            })
        })
    </script>

页面HTML代码:

     <div id="div1">
        <form id="form1" action="#">
            <p>我的名字:<input type="text" name="name" value="请输入内容" /></p>
            <p>我的爱好:<input type="radio" name="Idol" value="玩游戏" />玩游戏   
                       <input type="radio" name="Idol" value="写代码" />写代码</p>
            <p>我的擅长:<input type="checkbox" name="musictype" value="1.java">java  
                       <input type="checkbox" name="musictype" value="2.c#">c#  
                       <input type="checkbox" name="musictype" value="3.ios">ios</p>
            <p><input type="submit" value="确认" /></p>
        </form>
    </div>
    <div id="div2">
    </div>

后台:indexAjax.aspx.cs代码

       protected void Page_Load(object sender, EventArgs e)
        {
            string strName = Request["name"];
            string strIdol = Request["Idol"];
            string strMusicType = Request["musictype"];
            Response.Clear();
            Response.Write("我的名字是:" + strName + ";   我的爱好是:" + strIdol + ";   我的擅长:" + strMusicType);
            Response.End();
        }
时间: 2024-10-08 05:26:21

jQuery.Form.js 的用法的相关文章

看看该死的jquery.form.js的用法,不是个东西

$("#btnReg").click(function () { var options = { //target: '#output', // 把服务器返回的内容放入id为output的元素中 beforeSubmit: showRequest, // 提交前的回调函数 success: showResponse, // 提交后的回调函数 url: config.handles.form, //默认是form的action,如果申明,则会覆盖 type: "post&quo

jquery.form.js用法之清空form的方法

本段代码摘取自jquery.form.js中,由于觉得该方法的使用性非常强,同时也可独立拿出来使用.该段代码言简意赅可以很好的作为学习参考. /** * Clears the form data. Takes the following actions on the form's input fields: * - input text fields will have their 'value' property set to the empty string * - select eleme

jQuery表单插件jquery.form.js

概述 jQuery Form Plugin能够让你简洁的将以HTML形式提交的表单升级成采用AJAX技术提交的表单. 插件里面主要的方法, ajaxForm和ajaxSubmit,能够从form组件里采集信息确定如何处理表单的提交过程. 两个方法都支持众多的可选参数,能够让你对表单里数据的提交做到完全的控制. 入门指导 一.在你的页面里写一个表单.一个普通的表单,不需要任何特殊的标记: <form id="myForm" action="login.action&quo

jQuery.form.js jQuery ajax异步提交form

jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传. 官网下载地址:http://plugins.jquery.com/form/ API ajaxForm 增加所有需要的事件监听器,为ajax提交表单做准备.ajaxForm并不能提交表单.在document的ready函数中,使用ajaxForm来为ajax提交表单进行准备. 接受0个或1个参数.参数可以是一个回调函数,也可以是一个Options对象. $("#formid").ajaxForm(

jQuery.form.js使用

jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传. 下载地址 百度云:http://pan.baidu.com/s/1eQoYE46 360云:http://yunpan.cn/Qi7B5wdiewUMP  访问密码 06b6 微云:http://url.cn/QMQ79w 1 <!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta name="viewport" conte

jQuery插件 -- Form表单插件jquery.form.js

jquery.form.js官网 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmit(), 它们集合了从控制表单元素到决定如何管理提交进程的功能.另外,插件还包括其他的一些方法: formToArray().formSerialize().fieldSerialize().fieldValue().clearForm(). clearFields

jquery.form.js 实现异步上传

前台: <form id="formSeacrh" action="/ResumeInfo/uploadFile" method="post" enctype="multipart/form-data"> <div class="form-horizontal"> <div class="form-group" style="height:100p

jquery.form.js实现异步上传

前台页面 1 @{ 2 Layout = null; 3 } 4 <!DOCTYPE html> 5 <html> 6 <head> 7 <meta name="viewport" content="width=device-width" /> 8 <script src="~/Scripts/jquery-1.7.2.min.js"></script> 9 <scri

jquery.cycle.js简单用法实例

样式: a{text-decoration: none;} *{margin:0; padding:0;} /*容器设置*/ .player { width:216px; height:248px; background:url(http://i2.itc.cn/20120117/2cc0_da8f6c82_c8da_693d_7714_9533a013006a_3.jpg) no-repeat; background-color:#ede1d1; position:relative; padd