`

JQuery的表单插件

jQueryAjaxJavaScriptPHP脚本 
阅读更多

Jquery的表单插件

Jquery Form Plugin 是jquery 最重要的插件之一，它利用AJAX技术在不引起页面刷新的情况下POST表单。主要有两个方法：ajaxform 和ajaxsubmit 。它会自动收集表单元素内容，决定如何管理提交进程。这两个方法支持多重选择。我想AJAX方式的表单应用再没有比这个插件更简单易用的了。

先在页面里设置一个普通的表单：

HTML: 
   1.
      <form id="myForm" action="comment.php" method="post">
   2.
      姓名: <input type="text" name="name" id="name"/>
   3.
      评论: <textarea name="comment" id="comment"></textarea>
   4.
      <input type="submit" value="提交评论" />
   5.
      </form>
 

加载jquery库和插件脚本库。然后简单地写一段初始化脚本，这段脚本将在DOM加载完成时执行：

HTML: 
   1.
      <head>
   2.
      <script type="text/javascript" src="jquery.js"></script>  //加载jquery
   3.
      <script type="text/javascript" src="form.js"></script>    //加载插件
   4.
      <script type="text/javascript">
   5.
      // DOM加载完毕后执行
   6.
       $(document).ready(function() {
   7.
      // 绑定'myForm'并定义一个简单的回调函数
   8.
      $('#myForm').ajaxForm(function() {
   9.
      alert("评论提交完成!");
  10.
      });
  11.
      });
  12.
      </script>
  13.
      </head>
 

OK，就是这么简单。当点击“提交评论”按钮后，表单的数据就会POST到comment.php脚本，并且返回“评论提交完成”信息（如果提交成功）。页面并没有刷新，非常AJAX……

让我们来看看这个插件还有什么强大的功能。

ajaxForm

该方法须预先绑定表单，所以它一般在$(document).ready(function() { ...}里定义。它能让表单在不刷新页面的情况下POST到目标。可以为该方法提供一个参数，参数一般是一个回调函数用于返回信息给用户。当然如果不提供 参数也行，只是表单提在无声无息地提交后无法得到确认了。

ajaxSubmit

该方法是以响应事件来通用AJAX方式提交表单。比如点击某个按钮或改变了某个下拉框的值，在触发事件函数里可以设置该方法。如：

JavaScript: 
   1.
      $("#clickme").click(function(){
   2.
      $("#myForm").ajaxSubmit();
   3.
      });
 

或者这样：

HTML:
     
            <select id="mySelect" onchange="$(‘#myForm’).ajaxSubmit();">
 

formSerialize

该方法可以表单域的名称和值连接起来，形成一个字符串，字符串格式为name1=value1&name2=value2...比如：

JavaScript: 
  1. var queryString=$("#myForm").formSerialize();
     

变量queryString的值将为变成name=xxx&comment=xxx。得到这个字符串后，可以用$.post来提交，如：$.post("comment.php",queryString);

fieldSerialize

和formSerialize一样，返回一个字符串，但返回的是表单指定元素或特定元素类型域的字符串。返回字符串格式也是一样的。如：

JavaScript: 
  1.       var queryString = $('#myForm :text').fieldSerialize();//返回myForm表单内所有文本框的字符串值。
     

fieldValue

返回一个数组，记录表单元素的值。如果表单没有值则对应数组值为空。如：

JavaScript: 
var data=$(':text').fieldValue();//返回所有表单中所有文本框类型的值。
 

变量data为['','','']这样的一个数组，数组元素对应表单元素的值。事实上我们可以这样来得到“姓名”文本框里的值：var data=$("#name").val();（这个元素要有ID属性）这样的作法不需要jquery form插件也可以得到值。但使用插件可以更方便地取得单个或多个表单中特定元素域的值。比如取得所有文本框或所有复选框的值。只要加个“:"就可以。这 种方法也可以用到formSerialize或fieldSerialize方法上。

JavaScript: 
  1.       var data=$("#myForm :text").fieldValue();//取得在myForm表单里所有文本框的值。
     

formToArray

同样也返回一个数组，这个数组是对象数组。对象有name和value两个属性，分别记录表单中的元素名称和元素值。如：

JavaScript: 
  1. var data=$("#myForm").formToArray();
     

变量data得到的是一个对象数组。data[0].name保存myForm表单中第一个表单元素的名称属性值，这里是”name"。data[0].value保存myForm表单中第一个表单元素的值，这里就是填了什么值就是什么。

resetForm

该方法很简单啦，恢复表单初始状态。也就恢复到DOM加载完成时的表单状态。类似“重设表单”

clearFields

清除表单域元素。可以清除特定类型的域元素，比如清除所有文本框的，或所有复选框的域。

jquery表单应用

Posted on 10月 10th, 2007 in 我学 | 1 Comment »

有必要获取表单内各input元素的数据，然后用ajax方法以POST方式提交给服务器。如果input元素有ID属性，假设是<input type="text" name="writer" id="writer" />，可以这样获取：

var writervalue=$("#writer").val();

再来一个按扭吧，点击按钮后POST到ok.php去。

<input name="writer" id="writer" type="text" value="writer" />
<input type="submit" name="button" id="button" value="提交" />
 

 

先不考虑用submit提交表单，因为有jquery的 Form插件 可以近乎完美地完成表单的提交。这是个很强大的插件…… 


<script type="text/javascript" src="jquery.js" mce_src="jquery.js"></script>
<script type="text/javascript">

$(document).ready(function(){        //DOM的onload事件处理函数
  $("#button").click(function(){          //当按钮button被点击时的处理函数
    postdata();                                      //button被点击时执行postdata函数
  });
});

function postdata(){                             //提交数据函数
  $.ajax({                                                 //调用jquery的ajax方法
    type: "POST",                                     //设置ajax方法提交数据的形式
    url: "ok.php",                                      //把数据提交到ok.php
    data: "writer="+$("#writer").val(),    //输入框writer中的值作为提交的数据
    success: function(msg){                 //提交成功后的回调，msg变量是ok.php输出的内容。
      alert("数据提交成功");                     //如果有必要，可以把msg变量的值显示到某个DIV元素中
    }
  });
}

</script>
 

大功告成！假如输入框很多，在ajax方法的data参数里可以这样表示：

data:"n1=&n2=&n3=..."

jquery的Form插件 可以轻松而且不引发页面刷新地提交表单，所以这个插件被很多开发人员使用（插件需要在jquery库之后加载）。这个插件提供一个formToArray方法获得表单中所有元素的值的数组，可以这样做：

var data = $("#myForm").formToArray();
$.post( "ok.php", data );

变量data事实上是个数组。变量通过jquery的post方法提交到ok.php。

看上去用post方法要比ajax方法省事。jquery的ajax方法是low-level（底层）处理机制，而post、get、方法则是 higher-level（高层）处理机制，已经被封装好了的，更容易理解和使用。但也有缺点，就是不能返回更详细的信息，比如错误处理……

 

分享到：
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery表单插件下载

    **jQuery表单插件下载** 在网页开发中，表单是不可或缺的一部分，它用于收集用户输入的数据。然而，处理表单验证和美化样式通常需要大量的JavaScript代码，这使得开发过程变得复杂。为了解决这个问题，许多开发者...

    带完成百分比的jQuery表单插件

    在【标题】"带完成百分比的jQuery表单插件"中，提到的完成百分比功能是指一种能够实时显示表单填写进度的技术。这种插件通常会计算用户在表单中已填写的字段数量或必填字段的完成情况，并将其转换为百分比，以视觉...

    jQuery表单插件

    在本主题中，我们将深入探讨jQuery表单插件的核心概念、常用插件以及它们如何提高用户体验。 1. **jQuery Form Plugin** jQuery Form Plugin是一个著名的插件，允许开发者轻松地与服务器进行异步通信（AJAX）处理...

    JqueryMaterialFormPlugin是一款基于Bootstrap的MaterialDesign风格的jQuery表单插件

    Jquery Material Form Plugin是一款基于Bootstrap的Material Design风格的jQuery表单插件。该表单通过自定义样式和jQuery来将Bootstrap的表单修改为扁平风格的表单，并带有浮动标签特效。

    jquery.form.js jquery 表单插件

    jquery 表单插件 可以异步上传表单内容 不用直接构造

    jquery表单验证插件

    ### jQuery表单验证插件详解 #### 一、概述 jQuery表单验证插件是一种用于简化Web表单处理过程的强大工具。它不仅能够帮助开发者轻松地实现表单数据的Ajax提交，还支持文件上传等功能，极大地提升了用户体验并降低...

    jquery 表单插件 formvalidator

    jQuery FormValidator 是一个强大且灵活的验证插件，尤其适用于处理大型、复杂的表单提交场景。这个插件通过丰富的自定义选项和易于使用的API，使得开发者能够轻松地对表单元素进行验证。 ### 1. 插件安装与引入 ...

    Jquery的表单插件

    **jQuery表单插件详解** 在Web开发中，jQuery库以其简洁、强大的API深受开发者喜爱。其中，jQuery的表单插件是实现交互性、增强用户体验的重要工具。本篇文章将深入探讨jQuery的表单插件，特别是针对"jquery.form....

    jquery表单插件

    jquery表单插件，更方便使用ajax方式提交数据

    jQuery表单插件jquery.form.js(示例源码)

    jQuery Form Plugin能够让你简洁的将...插件里面主要的方法, ajaxForm和ajaxSubmit,能够从form组件里采集信息确定如何处理表单的提交过程。 两个方法都支持众多的可选参数，能够让你对表单里数据的提交做到完全的控制。

    自带丰富示例的jQuery验证表单插件

    9. **与其他jQuery插件的兼容性**：由于基于jQuery，这个验证插件能很好地与其它jQuery UI组件或表单增强插件（如Bootstrap Form Validation）协同工作。 在实际应用中，使用jQuery Validate插件通常包括以下步骤：...

    jQuery formalize （jQuery 表单插件）

    4. **增强的表单验证**：虽然jQuery Formalize本身并不包含复杂的表单验证功能，但其对表单元素的控制使得与其他验证插件结合使用变得更加方便。 5. **键盘导航**：通过键盘操作在表单元素间切换，Formalize提供了...

    jQuery常用插件之表单插件form使用笔记

    本文将聚焦于jQuery中的一个特定插件——表单插件`form`，来探讨如何利用它来增强网页表单的功能和用户体验。 表单插件`form`是jQuery的一个扩展，主要用于处理表单数据的提交与验证。它提供了异步提交表单的能力，...

    jquery插件(form表单验证)

    jQuery表单验证插件通常基于以下步骤工作： 1. **事件监听**：插件会监听表单元素上的特定事件，如`submit`、`change`或`focusout`，以便在用户与表单交互时进行验证。 2. **验证规则**：开发者可以定义一系列验证...

    一款jquery 表单插件还日历插件 formValidator3.1

    jQuery FormValidator 3.1 是一个强大的表单验证插件，它提供了丰富的验证规则和自定义设置，使得前端数据验证变得简单高效。同时，该插件还集成了日历组件，方便用户进行日期选择，提升用户体验。下面将详细探讨这...

    jQuery表单验证插件

    **jQuery表单验证插件详解** 在Web开发中，表单验证是不可或缺的一部分，它确保用户输入的数据符合预设的规则，从而提高用户体验并减少服务器端的负担。jQuery，一个轻量级、高性能的JavaScript库，提供了丰富的API...

    RIA应用开发：9-jQuery表单插件.ppt

    另外，jQuery UI中的`validation`插件用于表单验证，它可以轻松地添加验证规则，确保用户输入的数据满足特定条件。通过配置验证规则和错误消息，可以提高用户填写表单的准确性。 综上所述，jQuery和jQuery UI在RIA...

    Java Web Jquery表单验证

    Java Web Jquery表单验证 jQuery是一个流行的JavaScript库，可用于在网页上进行各种操作，包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分：FrontPage.html、write.html、end.html、style.css。 1...

Magicbox
Global site tag (gtag.js) - Google Analytics