jquery.form.js中文API

合集下载

JQuery提交表单 Form.js官方插件介绍

JQuery提交表单 Form.js官方插件介绍

JQuery提交表单Form.js官方插件介绍Form插件,支持Ajax,支持Ajax文件上传,功能强大,基本满足日常应用。

1、JQuery框架下载/2、Form插件下载/jquery/form/#download3、Form插件的简单入门第二步:jquery.js和form.js文件的包含表单插件API提供了几个方法,让你轻松管理表单数据和进行表单提交。

ajaxForm增加所有需要的事件监听器,为AJAX提交表单做好准备。

ajaxForm不能提交表单。

在document的ready函数中,使用ajaxForm来为AJAX提交表单进行准备。

ajaxForm接受0个或1个参数。

这个单个的参数既可以是一个回调函数,也可以是一个Options对象。

可链接(Chainable):可以。

实例:$('#myFormId').ajaxForm();ajaxSubmit马上由AJAX来提交表单。

大多数情况下,都是调用ajaxSubmit来对用户提交表单进行响应。

ajaxSubmit接受0个或1个参数。

这个单个的参数既可以是一个回调函数,也可以是一个Options对象。

可链接(Chainable):可以。

实例:// 绑定表单提交事件处理器$('#myFormId').submit(function() {// 提交表单$(this).ajaxSubmit();// 为了防止普通浏览器进行表单提交和产生页面导航(防止页面刷新?)返回falsereturn false;});formSerialize将表单串行化(或序列化)成一个查询字符串。

这个方法将返回以下格式的字符串:name1=value1&name2=value2。

可链接(Chainable):不能,这个方法返回一个字符串。

实例:var queryString = $('#myFormId').formSerialize();// 现在可以使用$.get、$.post、$.ajax等来提交数据$.post('myscript.php', queryString);fieldSerialize将表单的字段元素串行化(或序列化)成一个查询字符串。

jQuery1.7.1_API中文手册

jQuery1.7.1_API中文手册

jQuery1.7.1API手册本文基于jQuery1.7.1版本,是对官方API的整理和总结,完整的官方API见/browser/0、总述jQuery框架提供了很多方法,但大致上可以分为3大类:获取jQuery对象的方法、在jQuery 对象间跳转的方法,以及获取jQuery对象后调用的方法其中第一步是怎样获取jQuery对象。

大致来说,是通过最核心的$()方法,将页面上的元素(或者在页面上不存在的html片段)包装成jQuery对象。

$()方法里面支持的语法又包括3大类,分别是表达式(包括类表达式.,id表达式#,元素表达式等)、符号(包括后代符号space,next符号+等)、过滤器(包括:过滤器和[]过滤器)。

通过以上3种的组合,“查询”得到想要操作的元素或者元素集合,作为$()的参数,得到jQuery 对象(或者jQuery对象的集合)第二步是在jQuery对象间的跳转。

也就是说,已经得到了一个jQuery对象,但是并不是想要的,那么可以通过一系列的跳转方法,比如parent()、next()、children()、find()等,或者过滤筛选的方法,比如eq()、filter()、not()等,来得到最终想要操作的jQuery对象。

用跳转和过滤方式得到的jQuery结果,往往通过比较复杂的表达式组合,可以达到同样的目的。

比如说$("div").eq(3),也可以用$("div:eq(3)")达到同样的目的。

又比如说$("div").find("span"),可以用$("div span")取到同样的元素。

方法是很灵活的,要根据具体的情况来选择。

一般来说,HTML页面写得越规范,使用jQuery 就越简单还有一种情况,在得到了jQuery()对象之后,想要判断其是否满足条件,那么可以调用is()、hasClass()等方法,返回一个boolean值,进行后续的判断。

用jquery获取form表单值的方法总结

用jquery获取form表单值的方法总结

用jquery获取form表单值的方法总结用jquery获取form表单值的方法总结: jquery获取radio单选按钮的值$(input[name='items']:checked).val(); jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关获取一组radio被选中项的值 var item = $('input[name=items][checked]').val(); 获取select被选中项的文本 var item = $(select[name用jquery获取form表单值的方法总结:jquery获取radio单选按钮的值$("input[name='items']:checked").val();jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关获取一组radio被选中项的值var item = $('input[name=items][checked]').val();获取select被选中项的文本var item = $("select[name=items] option[selected]").text();select下拉框的第二个元素为当前选中值$('#select_id')[0].selectedIndex = 1;radio单选组的第二个元素为当前选中值$('input[name=items]').get(1).checked = true;获取值:文本框,文本区域:$("#txt").attr("value");多选框checkbox:$("#checkbox_id").attr("value");单选组radio: $("input[type=radio][checked]").val();下拉框select: $('#sel').val();控制表单元素:文本框,文本区域:$("#txt").attr("value",'');//清空内容$("#txt").attr("value",'11');//填充内容多选框checkbox: $("#chk1").attr("checked",'');//不打勾$("#chk2").attr("checked",true);//打勾if($("#chk1").attr('checked')==undefined) //判断是否已经打勾单选组radio: $("input[type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项下拉框select: $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项$("<option value='1'>1111</option><optionvalue='2'>2222</option>").appendTo("#sel")//添加下拉框的option $("#sel").empty();//清空下拉框刚开始接触jquery,很多东西不熟悉在用$("#id")来获得页面的input元素的时候,发现$("#id").value不能取到值后来终于在伟大的百度帮助下,找到了问题的原因:$("")是一个jquery对象,而不是一个dom elementvalue是dom element的属性jquery与之对应的是valval() :获得第一个匹配元素的当前值。

jquery的ajax获取form表单数据、提交表单form

jquery的ajax获取form表单数据、提交表单form

jquery的ajax获取form表单数据、提交表单formjq是对dom进⾏的再次封装。

是⼀个js库,极⼤简化了js使⽤。

jquery库在js⽂件中,包含了所有jquery函数,引⽤:<script src="jquery-1.11.1.min.js"></script>。

这⾥主要介绍jquery获取页⾯form数据使⽤的过程,html页⾯代码如下,有⼀个form表单,id是login_value.填写内容后请求接⼝。

<form id="login_value"><div><label>⽤户名:</label><input id="username" type="text" name="username" placeholder="请输⼊⽤户名" value="admin"></div><div><label>密码:</label><input id="passwd" type="password" name="passwd" placeholder="请输⼊密码" value="123456"></div><div><input type="button" value="登陆" onclick="login()"><input type="reset" value="重置"></div></form>ajax使⽤:ajax只能传⽂本,不能传⽂件。

jquery点击提交。将form表单的值提交到另一个页面并显示出来。不使用ajax。

jquery点击提交。将form表单的值提交到另一个页面并显示出来。不使用ajax。

jquery点击提交。

将form表单的值提交到另一个页面并显示出来。

不使用ajax。

jquery 点击提交。

将form表单的值提交到另一个页面并显示出来。

不使用ajax。

$("formid").sumbit();不过要提前将form的action写好提交form表单:$('form').submit();具体提交到哪里取决于你的form标签的action属性。

要在另一个页面显示提交的数据那实现的方式就多了。

如何动态构建FORM表单提交到另一个页面实现思路:先通过java代码获取到jsp中相应的参数值(可以多次获取到不同的值)举例:form中定义:<input type=text value="zhangsan1" name ="username"/> <input type=text value="23" name ="userage"/>java中定义:String age = request.getParameter (“userage”);获取到jsp 中的值String username= request.getParameter (“username”);获取到jsp中的值备注:form中标签字段必须有name属性,否则获取不到。

用一个页面设计一个表单,使其能够提交内容到另并显示一页面并显示提交的内容,不使用数据库reg.jsp<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+":"+request.getServerName()+":"+request .getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-W3CDTD HTML 4.01 TransitionalEN"><><head><base href="<%=basePath%>"><title>My JSP 'reg.jsp' starting page</title></head><body><form action="login.jsp"><table><tr><td>Email</td><td><input type=text name=email></td></tr><tr><td>昵称</td><td><input type=text name=nickname></td></tr></table></form></body></>login.jsp<%= request.getParameter("email") %><%= request.getParameter("nickname")%>使用ajax提交form表单form表单的action属性怎么设置<!DOCTYPE ><><head><meta charset=UTF-8><title>Insert title here</title><script type=text/javascript src=../script/jquery-1.10.2.js></script></head><script type=text/javascript>$(function(){var check = 1;$("#myForm").submit(function(e){取消默认提交事件e.preventDefault();if(check == 1){console.log("验证通过,提交数据");$(this).ajaxSubmit({type: 'post', 提交方式 get/posturl: '/servlet/query', 需要提交的 urldata: {'attr1': "白日依山尽",'attr2': "宝塔镇河妖"},suess: function(data) { data 保存提交后返回的数据,一般为json 数据此处可对 data 作相关处理alert('提交成功!');}});$(this).resetForm(); 提交后重置表单return false; 阻止表单自动提交事件});});</script><body><form action="/servlet/query" method="post" id="myForm"><input type=text name=userName id="userName"/><input type=submit id="btnSubmit" value="提交"/></form></body></>试下用这个可否解决你的问题,另外jquery-form.js是可用实现form提交回调的;表单提交内容怎么显示到另一个页面参考一下这个<script>function query_get(){var querystr = window.location.href.split("?")return querystr[1];}var gets = query_get();var gets_array = gets.split("&");for (var i=0; i<gets_array.length;i++){var getvar = gets_array[i].split('=');var output = getvar[0] + " 的值是" + "\"" + getvar[1] + "\"<br>";document.write(output);</script>ajax(或者jquery)怎么提交整个form表单$("button").click(function(){$.post("你的服务器文件",{表单里的内容name:"Donald Duck",city:"Duckburg"},function(data,status){alert("数据:" + data + "\n状态:" + status);});});如何用语言将提交按钮提交的表单内容显示出来如果可以用jsp的话就很简单了,仅仅用和js我只知道一个方法,把表单内容放到一个隐藏域里面,按钮传值即可。

jQueryform插件之formDdata参数校验表单及验证后提交

jQueryform插件之formDdata参数校验表单及验证后提交

jQueryform插件之formDdata参数校验表单及验证后提交Form Plugin API ⾥提供了很多有⽤的⽅法可以让你轻松的处理表单⾥的数据和表单的提交过程。

测试环境:部署到Tomcat中的web项⽬。

⼀、引⼊依赖js<script src="jquery-1.3.1.js" type="text/javascript"></script><script src="jquery.form.js" type="text/javascript"></script>⼆、初始化回调函数。

⾸先,我们初始化这个表单,给它⼀个 beforeSubmit 回调函数 - 这是⼀个⽤来校验的函数。

$(document).ready(function() {$('#myForm').ajaxForm({target:'#output1', // ⽤服务器返回的数据更新 id为output1的内容.beforeSubmit: validate // 提交前,验证});});三、校验规则function validate(formData, jqForm, options) {// formdata是数组对象,每个对象拥有名称和值.// 数据如下⾯的格式:// [// { name: username , value: usernameValue },// { name: password , value: passwordValue }// ]for (var i=0; i < formData.length; i++) {if (!formData[i].value) {alert('⽤户名,地址和⾃我介绍都不能为空!');return false;}}var queryString = $.param(formData); //组装数据//alert(queryString); //类似: name=1&add=2return true;}四、详细代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>jQuery form插件的使⽤--⽤ formData 参数校验表单</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><script src="jquery-1.3.1.js" type="text/javascript"></script><script src="jquery.form.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function() {$('#myForm').ajaxForm({target: '#output1', // ⽤服务器返回的数据更新 id为output1的内容.beforeSubmit: validate // 提交前,验证});});function validate(formData, jqForm, options) {// formdata是数组对象,每个对象拥有名称和值.// 数据如下⾯的格式:// [// { name: username , value: usernameValue },// { name: password , value: passwordValue }// ]for (var i=0; i < formData.length; i++) {if (!formData[i].value) {alert('⽤户名,地址和⾃我介绍都不能为空!');return false;}}var queryString = $.param(formData); //组装数据//alert(queryString); //类似: name=1&add=2return true;}</script></head><body><h3> Demo 5 :jQuery form插件的使⽤--⽤ formData 参数校验表单,验证后提交(简单验证). </h3><form id="myForm" action="ajax2.jsp" method="post">名称: <input type="text" name="name" id="name" /> <br/>地址: <input type="text" name="address" id="address"/><br/>⾃我介绍: <textarea name="comment" id="comment" ></textarea> <br/><input type="submit" id="test" value="提交" /> <br/><div id="output1" ></div></form></body></html>以上所述是⼩编给⼤家分享的jQuery form插件之formDdata参数校验表单及验证后提交的全部内容,希望对⼤家有所帮助。

jq调用iframe中的某个方法

jq调用iframe中的某个方法

jq调用iframe中的某个方法在使用jQuery (jq)调用iframe中的方法时,可以采取以下步骤:步骤1:获取到iframe元素首先,通过jQuery选择器获取到你想要调用方法的iframe元素。

可以使用id、class或其他属性选择器来定位到iframe。

```javascriptvar iframeElement = $('#myIframe');```步骤2:获取到iframe的内容通过获取iframe的内容,可以访问到其内部的JavaScript方法。

使用contentWindow属性来获取iframe的window对象,然后使用该对象的contentDocument属性来获取iframe中的文档对象。

```javascriptvar iframeContent = iframeElement[0].contentWindow.contentDocument;```步骤3:调用iframe中的方法一旦你获取了iframe的文档对象,就可以通过普通的JavaScript语法来调用其中的方法。

```javascriptiframeContent.getElementById('myButton').click(); // 假设调用了按钮的点击事件```在上面的例子中,我们假设iframe中包含一个id为"myButton"的按钮,并使用click()方法来模拟用户点击该按钮。

需要注意的是,由于同源策略的限制,当iframe和主页面不在同一个域名下时,将无法直接调用iframe中的方法。

如果存在跨域问题,你需要在iframe和主页面之间通过postMessage方法进行通信。

完成以上步骤后,你就成功地使用jQuery调用了iframe中的特定方法。

记得根据你的实际情况修改选择器和方法名,以适应你的项目需求。

JS组件系列——Form表单验证神器:BootstrapValidator

JS组件系列——Form表单验证神器:BootstrapValidator

JS组件系列——Form表单验证神器:BootstrapValidator前⾔:做Web开发的我们,表单验证是再常见不过的需求了。

友好的错误提⽰能增加⽤户体验。

博主搜索bootstrap表单验证,搜到的结果⼤部分都是⽂中的主题:bootstrapvalidator。

今天就来看看它如何使⽤吧。

⼀、源码及API地址介绍它之前,还是给出它的源码以及API的地址吧。

bootstrapvalidator源码:boostrapvalidator api:⼆、代码以及效果展⽰1、初级⽤法来看bootstrapvalidator的描述:A jQuery form validator for Bootstrap 3。

从描述中我们就可以知道它⾄少需要jQuery、bootstrap的⽀持。

我们⾸先引⼊需要的js组件 <script src="~/Scripts/jquery-1.10.2.js"></script><script src="~/Content/bootstrap/js/bootstrap.min.js"></script><link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet"/><script src="~/Content/bootstrapValidator/js/bootstrapValidator.min.js"></script><link href="~/Content/bootstrapValidator/css/bootstrapValidator.min.css" rel="stylesheet"/>我们知道,既然是表单验证,那么我们在cshtml页⾯就必须要有⼀个Form,并且我们知道Form⾥⾯取元素都是通过name属性去取值的,所以,表单⾥⾯的元素都要有⼀个name的属性值。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

jquery.form.js中文API关键字: jquery.form.js英文原文:/jquery/form/#api表单插件API提供了几个方法,让你轻松管理表单数据和进行表单提交。

ajaxForm增加所有需要的事件监听器,为AJAX提交表单做好准备。

ajaxForm不能提交表单。

在document的ready函数中,使用ajaxForm来为AJAX提交表单进行准备。

ajaxForm接受0个或1个参数。

这个单个的参数既可以是一个回调函数,也可以是一个Options对象。

可链接(Chainable):可以。

实例:Java代码1$('#myFormId').ajaxForm();ajaxSubmit马上由AJAX来提交表单。

大多数情况下,都是调用ajaxSubmit来对用户提交表单进行响应。

ajaxSubmit接受0个或1个参数。

这个单个的参数既可以是一个回调函数,也可以是一个Options对象。

可链接(Chainable):可以。

实例:Java代码2// 绑定表单提交事件处理器3$('#myFormId').submit(function() {4 // 提交表单5 $(this).ajaxSubmit();6 // 为了防止普通浏览器进行表单提交和产生页面导航(防止页面刷新?)返回false7return false;8});formSerialize将表单串行化(或序列化)成一个查询字符串。

这个方法将返回以下格式的字符串:name1=value1&name2=value2。

可链接(Chainable):不能,这个方法返回一个字符串。

实例:Java代码9var queryString = $('#myFormId').formSerialize();1011// 现在可以使用$.get、$.post、$.ajax等来提交数据12$.post('myscript.php', queryString);fieldSerialize将表单的字段元素串行化(或序列化)成一个查询字符串。

当只有部分表单字段需要进行串行化(或序列化)时,这个就方便了。

这个方法将返回以下格式的字符串:name1=value1&name2=value2。

可链接(Chainable):不能,这个方法返回一个字符串。

实例:Java代码13var queryString = $('#myFormId .specialFields').fieldSerialize();fieldV alue返回匹配插入数组中的表单元素值。

从0.91版起,该方法将总是以数组的形式返回数据。

如果元素值被判定可能无效,则数组为空,否则它将包含一个或多于一个的元素值。

可链接(Chainable):不能,该方法返回数组。

实例:Java代码14// 取得密码输入值15var value = $('#myFormId :password').fieldValue();16alert('The password is: ' + value[0]);resetForm通过调用表单元素原有的DOM方法,将表单恢复到初始状态。

可链接(Chainable):可以。

实例:Java代码17$('#myFormId').resetForm();clearForm清除表单元素。

该方法将所有的文本(text)输入字段、密码(password)输入字段和文本区域(textarea)字段置空,清除任何select元素中的选定,以及将所有的单选(radio)按钮和多选(checkbox)按钮重置为非选定状态。

可链接(Chainable):可以。

Java代码18$('#myFormId').clearForm();clearFields清除字段元素。

只有部分表单元素需要清除时才方便使用。

可链接(Chainable):可以。

Java代码19$('#myFormId .specialFields').clearFields();Options对象ajaxForm和ajaxSubmit都支持众多的选项参数,这些选项参数可以使用一个Options对象来提供。

Options只是一个JavaScript对象,它包含了如下一些属性与值的集合:target指明页面中由服务器响应进行更新的元素。

元素的值可能被指定为一个jQuery选择器字符串,一个jQuery对象,或者一个DOM元素。

默认值:null。

url指定提交表单数据的URL。

默认值:表单的action属性值type指定提交表单数据的方法(method):“GET”或“POST”。

默认值:表单的method属性值(如果没有找到默认为“GET”)。

beforeSubmit表单提交前被调用的回调函数。

“beforeSubmit”回调函数作为一个钩子(hook),被提供来运行预提交逻辑或者校验表单数据。

如果“beforeSubmit”回调函数返回false,那么表单将不被提交。

“beforeSubmit”回调函数带三个调用参数:数组形式的表单数据,jQuery表单对象,以及传入ajaxForm/ajaxSubmit中的Options对象。

表单数组接受以下方式的数据:Java代码[ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]默认值:nullsuccess表单成功提交后调用的回调函数。

如果提供“success”回调函数,当从服务器返回响应后它被调用。

然后由dataType选项值决定传回responseText还是responseXML的值。

默认值:nulldataType期望返回的数据类型。

null、“xml”、“script”或者“json”其中之一。

dataType提供一种方法,它规定了怎样处理服务器的响应。

这个被直接地反映到jQuery.httpData方法中去。

下面的值被支持:'xml':如果dataType == 'xml',将把服务器响应作为XML来对待。

同时,如果“success”回调方法被指定,将传回responseXML值。

'json':如果dataType == 'json',服务器响应将被求值,并传递到“success”回调方法,如果它被指定的话。

'script':如果dataType == 'script',服务器响应将求值成纯文本。

默认值:null(服务器返回responseText值)semanticBoolean flag indicating whether data must be submitted in strict semantic order (slower). Note that the normal form serialization is done in semantic order with the exception of input elements of type="image". Y ou should only set the semantic option to true if your server has strict semantic requirements and your form contains an input element of type="image".布尔标志,表示数据是否必须严格按照语义顺序(slower?)来进行提交。

注意:一般来说,表单已经按照语义顺序来进行了串行化(或序列化),除了type="image"的input元素。

如果你的服务器有严格的语义要求,以及表单中包含有一个type="image"的input元素,就应该将semantic设置为true。

(译注:这一段由于无法理解,翻译出来可能语不达意,但请达人指正。

)默认值:falseresetForm布尔标志,表示如果表单提交成功是否进行重置。

Default value: nullclearForm布尔标志,表示如果表单提交成功是否清除表单数据。

默认值:null实例:Java代码21// 准备好Options对象22var options = {23 target: '#divToUpdate',24 url: 'comment.php',25 success: function() {26 alert('Thanks for your comment!');27 } };2829 // 将options传给ajaxForm30$('#myForm').ajaxForm(options);注意:Options对象还可以用来将值传递给jQuery的$.ajax方法。

如果你熟悉$.ajax所支持的options,你可以利用它们来将Options对象传递给ajaxForm和ajaxSubmit。

相关文档
最新文档