jquery表单应用

有必要获取表单内各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(高层)处理机制,已经被封装好了的,更容易理解和使用。但也有缺点,就是不能返回更详细的信息,比如错误处理……

时间: 2024-09-22 08:21:53

jquery表单应用的相关文章

jQuery表单获取和失去焦点输入框提示效果的实例代码

这篇文章介绍了jQuery表单获取和失去焦点输入框提示效果的实例代码,有需要的朋友可以参考一下   复制代码 代码如下:   $("#focus .input_txt").each(function(){   var thisVal=$(this).val();   //判断文本框的值是否为空,有值的情况就隐藏提示语,没有值就显示   if(thisVal!=""){   $(this).siblings("span").hide();   }e

一款比较实用齐全的jQuery表单验证插件

一款比较实用,并且验证类型齐全的jQuery表单验证插件.英文版原作者@Vanadium,由我做中文整理.E文水平有限,如果翻译的有问题的,请大家指出,在此感谢~ 可以验证哪些? 文字,日期,邮箱,网址,数字,AJAX用户名验证以及自定义的正则等等几乎所有我们要用到的验证. 不多说,看DEMO吧:点些下载 如何使用? 第一步,当然是和使用其他jQuery插件一样,引入插件文件vanadium.js;第二步,根据你表单要使用的验证方法,在你的表单中加入对应的验证挂钩.比如你想使下面的表单为必填项:

jQuery表单获取和失去焦点输入框提示效果

<!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> <meta http-equiv="Content-

jquery表单验证插件(jquery.validate.js)的3种使用方式

这篇文章主要介绍了jquery表单验证插件(jquery.validate.js)的3种使用方式,本文用详细的代码实例讲解jquery表单验证插件的使用,需要的朋友可以参考下     jquery 验证非常简单,下面总结常用的三种方式: 第一种方式:也是比较标准的方式: 首先引入jquery 插件和 jquery 验证插件: 第一步:引入插件 代码如下: <script type="text/javascript" src="js/jquery-1.6.1.min.js

jQuery表单域选择器用法分析

 这篇文章主要介绍了jQuery表单域选择器用法,实例分析了常见的表单元素选择器的使用技巧,并给出了一个完整的实例总结,需要的朋友可以参考下     本文实例分析了jQuery表单域选择器用法.分享给大家供大家参考.具体如下: 表单域是指网页中的input,textarea, select和button元素. 1. :input选择器 代码如下: $(":input")   2. :text选择器 代码如下: $(":text")   3. :password选择器

jQuery表单域属性过滤器用法分析

 这篇文章主要介绍了jQuery表单域属性过滤器用法,实例分析了:checked.:enabled.:disabled:.selected等常用表单域属性过滤器使用技巧,需要的朋友可以参考下     本文实例讲述了jQuery表单域属性过滤器用法.分享给大家供大家参考.具体分析如下: 表单内包含各种各样的表单域,使用表单域属性选择器可以很好的获取已被选中的单选按钮,复选框以及列表项,也可以根据是否可用从文档中查找表单域. 1. :checked选择器 用于选择所有被选中的表单域.格式: 代码如下

JQuery表单验证插件EasyValidator用法分析_jquery

本文实例讲述了JQuery表单验证插件EasyValidator用法.分享给大家供大家参考.具体如下: 本插件的宗旨是:用户无需写一行JS验证代码,只需在要验证的表单中加入相应的验证属性即可,让验证功能易维护,可扩展,更容易上手. DEMO中已经包含了常用的正则表达式,可以直接复用,为了考虑扩展性,所以针对不同用户特殊需求,自行写正则吧. EasyValidator实现的功能: 1.提示功能(在表单或者其他标签中加入tip="想提示的文字") 如: 复制代码 代码如下: <inp

jquery插件-求大神看看关于jquery表单提交的问题

问题描述 求大神看看关于jquery表单提交的问题 我刚刚做了一个登陆页面 但是一点击提交以后就变成了这样,而且地址栏也没有任何变化 想请教一下各位大神是为什么没有提交出去 代码如下 解决方案 表单提交Jqueryjquery-mobile表单提交问题JQuery 异步提交表单 解决方案二: 可以用fiddler,或firebug/httpwatch看看你提交的到底是不是正确的东西 解决方案三: 页面显示是由你的样式表决定的,你可以右键查看一下提交前后两个生成的html代码有何不同.

jQuery表单美化插件jqTransform使用详解_jquery

jQuery Form表单美化插件jqTransform,非常实用的jQuery插件,自动把你整个Form表单进行美化处理,包括SELECT下拉框.文本框.单选.复选框.按钮等,当然不支持input file文件选择框,这个可以参照我们之前的input file选择框美化教程进行改造,在浏览器兼容方面,兼容 ie 6+, safari 2+, firefox 2+,插件还是很不错的,使用起来也很简单,推荐学习和使用. 使用方法: 1.加载jQuery和插件 <script type="te

jquery表单验证插件(jquery.validate.js)的3种使用方式_jquery

jquery  验证非常简单,下面总结常用的三种方式: 第一种方式:也是比较标准的方式: 首先引入jquery  插件和 jquery 验证插件: 第一步:引入插件 复制代码 代码如下: <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="js/jq