jQuery.form.js的使用详解

面临问题：form表单submit之后，后端会返回提示信息。但原生html无法获取后端返回的数据，就造成了这样一种局面：提交之后，页面发生跳转，在一个空白页面上显示了后端返回的json数据，用户体验0分。

解决办法：使用jquery.form.js

步骤

自定义控制提交函数

var submitChange=function () {
    $("form").ajaxSubmit(function (message) {
      alert(message.text);
      window.location.href="/index" rel="external nofollow" ;
    });
    return false;
  }
  //这个函数一是处理了后端返回的数据，二是返回了一个false，阻断了原生submit事件的发生。

改造form表单(添加onsubmit事件，返回自定义处理函数)

<form action="/do" onsubmit="return submitChange();">
</form>

最后

注意要把Js文件引入哦！

比如：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.1/jquery.form.min.js" integrity="sha384-tIwI8+qJdZBtYYCKwRkjxBGQVZS3gGozr3CtI+5JF/oL1JmPEHzCEnIKbDbLTCer" crossorigin="anonymous"></script>

以上所述是小编给大家介绍的jQuery.form.js的使用详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Struts2+jquery.form.js实现图片与文件上传的方法

    本文实例讲述了Struts2+jquery.form.js实现图片与文件上传的方法.分享给大家供大家参考,具体如下: jquery.form.js是jQuery的一个官方用语支持异步上传文件的插件.官方网站:http://plugins.jquery.com/form/ 结合Struts2三步轻松实现文件上传 一般是针对一个页面可能不止一个Form表单,所以在一个面提交表单会影响到另一个表单,为此,图片上传表单就可以使用无刷新提交方式上传,也就是异步上传,这时jquery.from.js就派上用

  • jquery.form.js实现将form提交转为ajax方式提交的方法

    本文实例讲述了jquery.form.js实现将form提交转为ajax方式提交的方法.分享给大家供大家参考.具体分析如下: 这个框架集合form提交.验证.上传的功能. 这个框架必须和jquery完整版结合,否则使用min则无效. 原理:利用js进行对form进行组装成ajax的url和data,原理还是用ajax来提交,其实这完全可以自己写,但是有这个框架可能会更简单. 一.最简单例子: 第一步:引用js <!--这里的min是自己用js压缩工具对完整版进行的压缩 并不是真正的min,所以好

  • jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)

    本文实例讲述了jQuery插件之jQuery.Form.js用法.分享给大家供大家参考,具体如下: 一.jQuery.Form.js 插件的作用是实现Ajax提交表单. 方法: 1.formSerilize()  用于序列化表单中的数据,并将其自动整理成适合AJAX异步请求的URL地址格式. 2.clearForm()   清除表单中所有输入值的内容. 3.restForm    重置表单中所有的字段内容.即将所有表单中的字段恢复到页面加载时的默认值. 疑问:ajaxForm()与ajaxSub

  • 解决3.01版的jquery.form.js中文乱码问题的解决方法

    网上搜了很多方法,可能因为我用的这jquery.form.js是3.01版,也就是今年3月6日才发布的版本(汗...就是前天),所以普遍不太管用.至于低版本的是否管用,这个我没有去考证,但大部分还是不负责任的Copy Copy Copy .还有一些方法是在提交前对所有的值先编码,我觉得这个太麻烦,额外增加了不少的前端代码量,也就没有采取. 好吧,那还是自己来处理吧.首先我们要找到切入点,也就是解决问题的入口.既然我们是要对JS传递的数据进行编码,那么首先肯定要从数据的传递函数开始.我调用的是aj

  • jquery.form.js框架实现文件上传功能案例解析（springmvc）

    jquery.form.js框架实现文件上传功能案例解析（springmvc）

    上一篇 Bootstrap自定义文件上传下载样式(http://www.jb51.net/article/85156.htm)已经有一段时间了,一直在考虑怎么样给大家提交一篇完美的逻辑处理功能.现在我结合自己的实际工作给大家分享一下. 使用的技术有jquery.form.js框架, 以及springmvc框架.主要实现异步文件上传的同时封装对象,以及一些注意事项. 功能本身是很简单的,但是涉及到一些传递参数类型的问题.例如:jquery的ajax方法与jquery.form.js中的ajaxSu

  • 使用jQuery.form.js/springmvc框架实现文件上传功能

    使用jQuery.form.js/springmvc框架实现文件上传功能

    使用的技术有jquery.form.js框架, 以及springmvc框架.主要实现异步文件上传的同时封装对象,以及一些注意事项. 功能本身是很简单的,但是涉及到一些传递参数类型的问题.例如:jquery的ajax方法与jquery.form.js中的ajaxSubmit方法的参数,具体细节将在下一篇博客中分享. 重点: html表格三要素: action="fileUpload/fileUpload" method="post" enctype="mul

  • 使用jquery.form.js实现图片上传的方法

    本文实例讲述了使用jquery.form.js实现图片上传的方法.分享给大家供大家参考,具体如下: testupfile2.php <?php header('Content-type:text/html;charset=utf-8'); include_once 'includes/common.inc.php'; if(!empty($_FILES['upfile'])){ //文件格式 $image=array('image/jpg', 'image/jpeg', 'image/png',

  • 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 * - s

  • 基于jQuery通过jQuery.form.js插件实现异步上传

    本文主要从前台和后台代码分析了jquery.form.js实现异步上传的方法,分享给大家,具体代码如下 前台代码: @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <script src="~/Scripts/jquery-1.7.2.min.j

  • jQuery.form.js的使用详解

    面临问题:form表单submit之后,后端会返回提示信息.但原生html无法获取后端返回的数据,就造成了这样一种局面:提交之后,页面发生跳转,在一个空白页面上显示了后端返回的json数据,用户体验0分. 解决办法:使用jquery.form.js 步骤 自定义控制提交函数 var submitChange=function () { $("form").ajaxSubmit(function (message) { alert(message.text); window.locati

  • 文本溢出插件jquery.dotdotdot.js使用方法详解

    插件下载地址:https://github.com/FrDH/jQuery.dotdotdot 引入jQuery.js和jquery.dotdotdot.js <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.dotdotdot.js"><

  • jquery.cookie.js用法实例详解

    本文实例讲述了jquery.cookie.js用法.分享给大家供大家参考,具体如下: 对cookies的操作在当访问一个网站就无时无刻的都伴随着我们,记录着我们的一举一动,并将不危害用户隐私的信息,将以保存,这样用户就不用去从新再次操作重复的步骤,这样大大方便了客户,也增加了客户对网站的回头率. jquery.cookie.js 提供了jquery中非常简单的操作cookie的方法. $.cookie('the_cookie'); // 获得cookie $.cookie('the_cookie

  • jquery.pager.js分页实现详解

    本文实例为大家分享了jquery.pager.js分页实现代码,供大家参考,具体内容如下 jquery.pager.js /* * jQuery pager plugin * Version 1.0 (12/22/2008) * @requires jQuery v1.2.6 or later * * Example at: http://jonpauldavies.github.com/JQuery/Pager/PagerDemo.html * * Copyright (c) 2008-200

  • jquery.form.js异步提交表单详解

    本文实例为大家分享了jquery.form.js异步提交表单的具体代码,供大家参考,具体内容如下 引入脚本: <script type="text/javascript" src="/js/jquery.form.min.js"></script> <script src="/js/json2.js"></script> //前端代码: <form id="f1">

  • jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解

    jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解

    jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解 1.插件介绍: jquery.json-viewer.js是一款查看json格式数据的jquery插件.它可以将混乱的json数据漂亮的方式展示在页面中,并支持节点的伸展和收缩和语法高亮等功能. 2.代码演示: 1).首先引入jquery和json.viewer.js插件 <script src="http://www.jq22.com/jquery/jquery-1.10.2.js">&l

  • JS、jQuery中select的用法详解

    1.js var obj=document.getElementById(selectid); obj.options.length = 0; //清除所有内容 obj.options[index] = new Option("three",3); //更改对应的值 obj.options[index].selected = true; //保持选中状态 obj.add(new Option("4","4")); "文本",&

  • jQuery fadeOut 异步实例代码详解

    定义和用法 fadeOut() 方法逐渐改变被选元素的不透明度,从可见到隐藏(褪色效果). 注释:隐藏的元素不会被完全显示(不再影响页面的布局). 提示:该方法通常与 fadeIn() 方法一起使用. 语法 $(selector).fadeOut(speed,easing,callback) 1. 概述 jquery实现动画效果的函数使用起来很方便,不过动画执行是异步的,所以要把自定义的操作放在回调函数里. 2. example <html> <body> <table id

  • jquery 遍历数组 each 方法详解

    JQuery拿取对象的方式 $('#id') :通过元素的id $('tagName') : 通过元素的标签名 $('tagName tagName') : 通过元素的标签名,eg: $('ul li') $('tagName#id): 通过元素的id和标签名 $(':checkbox'):拿取input的 type为checkbox'的所有元素: Eg: <input type="checkbox" name="appetizers" value="

  • jQuery操作属性和样式详解

    jQuery操作属性和样式详解

    • 区分 DOM 属性和元素属性 <img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus" class="classA" /> 通常开发人员习惯将id,src,alt等叫做这个元素的"属性".我们将其称为"元素属性".但是在解析成 DOM 对象时,实际浏览器最后会将标签元素解析成"DOM 对象",

随机推荐