表单插件——form

通过表单form插件，调用ajaxForm()方法，实现ajax方式向服务器提交表单数据，并通过方法中的options对象获取服务器返回数据，调用格式如下：

$(form). ajaxForm ({options})

其中form参数表示表单元素名称；options是一个配置对象，用于在发送ajax请求过程，设置发送时的数据和参数。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

     <head>

         <title>表单插件</title>

         <script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>

         <script type="text/javascript" src="http://www.imooc.com/data/jquery.form.js"></script>

         <style>

             #divtest

             {

                 width: 282px;

             }

             #divtest .title

             {

                 padding: 8px;

                 background-color: Blue;

                 color: #fff;

                 height: 23px;

                 line-height: 23px;

                 font-size: 15px;

                 font-weight: bold;

             }

             #divtest .content

             {

                 padding: 8px 0px;

                 background-color: #fff;

                 font-size: 13px;

             }

             #divtest .content .tip

             {

                 text-align:center;

                 border:solid 1px #ccc;

                 background-color:#eee;

                 margin:20px 0px;

                 padding:8px;

             }

             .fl

             {

                 float: left;

             }

             .fr

             {

                 float: right;

             }

         </style>

     </head>

     <body>

         <form id="frmV" method="post" action="#">

             <div id="divtest">

                 <div class="title">

                     <span class="fl">个人信息页</span>

                     <span class="fr">

                         <input id="btnSubmit" type="submit" value="提交" />

                     </span>

                 </div>

                 <div class="content">

                     <span class="fl">用户名：</span><br />

                     <input id="user" name="user" type="text" /><br />

                     <span class="fl">昵称：</span><br />

                     <input id="nick" name="nick" type="text" />

                     <div class="tip"></div>

                 </div>

             </div>

         </form>

         <script type="text/javascript">

             $(function () {

                 var options = {

                     url: "9-2.php",

                     target: ".tip"

                 }

                 $("#frmV").ajaxForm(options);

             });

         </script>

     </body>

 </html>
 <?php

 $user = $_POST['user'];

 $nick = $_POST['nick'];

 echo "用户名：".$user."昵称:".$nick;

表单插件——form的更多相关文章

  1. 【jQuery基础学习】07 jQuery表单插件-Form

    作用:jQuery Form插件的作用是为了让我们可以很方便地用ajax的方式提交表单,从而使我们提交表单的时候页面不用进行刷新. 它的核心方法是ajaxForm()和ajaxSubmit() 升级表 ...

  2. （转）jQuery插件 -- Form表单插件jquery.form.js

    beforeSubmit: validate function validate(formData, jqForm, options) { //在这里对表单进行验证,如果不符合规则,将返回false来 ...

  3. jquery.form.js表单插件的使用

    jquery.form.js官网:http://malsup.com/jquery/form API文档:http://malsup.com/jquery/form/#api 下载地址:http:// ...

  4. jQuery插件 -- Form表单插件jquery.form.js<转>

    jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmi ...

  5. Form表单插件

    jQuery Form是一个优秀的表单插件,它可以非常容易地,无侵入地升级HTML表单以支持Ajax jQuery Form表单插件的下载地址为 http://jquery.malsup.com/fo ...

  6. 如何利用WordPress创建自定义注册表单插件

    来源:http://www.ido321.com/1031.html 原文:Creating a Custom WordPress Registration Form Plugin 译文:创建一个定制 ...

  7. Django使用普通表单、Form、以及modelForm操作数据库方式总结

    Django使用普通表单.Form.以及modelForm操作数据库主要应用于增删该查的情景下,流程通用如下,只是实现方式不一样: 进入填写表单页面: 在表单页面填写信息,并提交: 表单数据验证 验证 ...

  8. 第一百八十六节，jQuery，验证表单插件，Ajax 表单插件，验证和提交表单

    jQuery,验证表单插件,Ajax 表单插件,验证和提交表单 HTML <form id="reg" method="post" action=&quo ...

  9. 第一百八十五节，jQuery，Ajax 表单插件

    jQuery,Ajax 表单插件 学习要点: 1.核心方法 2.option 参数 3.工具方法 传统的表单提交,需要多次跳转页面,极大的消耗资源也缺乏良好的用户体验.而这款 form.js 表单的 ...

随机推荐

  1. C# 条码标签打印程序，RDLC报表动态显示多条码标签的方法

    初学c#,因最近公司客户要求原出货标签需实现条码化,练手的机会来了,遂动手做这个程序,开始都是一些增删改查操作一直很顺利,但到RDLC报表将条码显示到报表上犯难了,因为初学未接触过报表,上网查资料均一 ...

  2. laravel框架少见方法详解

    1.whereDate() 方法 $q->where('created_at', '>=', date('Y-m-d').' 00:00:00')); 以前查数据时,直接用where条件来 ...

  3. fis3简单教程

    #进入工作目录初始化fis3目录(此步非必须,如果当前目录已有fis-conf.js文件,可以不用初始化)fis3 init#部署(<path>为部署目录,如果想部署到当前output目录 ...

  4. Translation002—Package Index(Android包索引)

    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 看本翻译前请您注意: 本人初学android,可能有的翻译不是非常准确,但本人尽最大努力,不清楚处会做标记,并附 ...

  5. （转载）delphi文件流

    delphi文件流 [复制链接] 在Delphi中,所有流对象的基类为TStream类,其中定义了所有流的共同属性和方法. TStream类中定义的属性介绍如下: 1.Size: 此属性以字节返回流中 ...

  6. oracle中的存储过程例子

    用了两年Oracle还没写过存储过程,真是十分惭愧,从今天开始学习Oracle存储过程,完全零起点,争取每日一篇学习笔记,可能开始认识的不全面甚至有错误,但坚持下来一定会有收获. . 建立一个存储过程 ...

  7. Hive内表和外表的区别

    本文以例子的形式介绍一下Hive内表和外表的区别.例子共有4个:不带分区的内表.带分区的内表.不带分区的外表.带分区的外表. 1 不带分区的内表 #创建表 create table innerTabl ...

  8. iOS/Objective-C开发 字典NSDictionary的深复制（使用category)

    目标:把NSDictionary对象转换成NSMutableDictionary对象,对象内容是字符串数组,需要实现完全复制(深复制). 如果调用NSDictionary的mutableCopy方法, ...

  9. 多路选择器（multiplexer）简介

    1.多路器简介 简称:多路器 功能:多输入  单输出   组合逻辑电路 2.verilog代码实现: module Mux_8(addr,in1,in2,in3,in4,in5,in6,in7,in8 ...

  10. 标签跳转break和continue

    标签是后面跟有冒号的标识符,例如  label1: 在java中,标签起作用的唯一的地方刚好是在迭代语句之前. “刚好之前”的意思表明,在标签和迭代之间置入热和语句都不好. 而在迭代之前设置标签的唯一 ...