jQuery —— ajaxForm和ajaxSubmit的用法与区别

ajaxSubmit 这个可以理解为ajaxForm了升级版。   那么,为什么ajaxSubmit会自动提交表单呢?

  • ajaxForm 不能主动提交form 就是为提交表单前做准备;
  • ajaxSubmit 会自动提交 form表单  只要调用ajaxSubmit这个方法就是提交表单。
  • 两者配置相同  不加action 属性,那么就会执行配置中得url ;
  • 没有配置url,就会走action属性,两者选其一即可。

ajaxForm和ajaxSubmit都可以接收0或1个参数,该参数可以是一个变量、一个对象或回调函数,这个对象主要有以下参数:

var option= {url:url,      //form提交数据的地址type:type,     //form提交的方式(method:post/get)target:target,  //服务器返回的响应数据显示的元素(Id)号beforeSerialize:function(){} //序列化提交数据之前的回调函数beforeSubmit:function(){},  //提交前执行的回调函数success:function(){},       //提交成功后执行的回调函数error:function(){},             //提交失败执行的函数dataType:null,       //服务器返回数据类型clearForm:true,       //提交成功后是否清空表单中的字段值restForm:true,        //提交成功后是否重置表单中的字段值,即恢复到页面加载时的状态timeout:6000         //设置请求时间,超过该时间后,自动退出请求,单位(毫秒)。  }

html代码:

<form action="" class="myForm" method="post">
<div>姓名:<input name="text1" type="text" class="inputbox"></div>
<div>年龄:<input name="text2" type="text" class="inputbox"></div>
<div>爱好:<input name="text3" type="text" class="inputbox"></div>
<div><input class="submitbtn" type="submit" value="提交"></div>
</form>

JS代码:

ajaxForm 方式

$(function(){$form.ajaxForm(option);
})

ajaxSubmit方式

$(function(){$('.submitbtn').click(function(){$(form).ajaxSubmit(option);})           
})

参数也可以为一个回调函数

$(function(){$('.submitbtn').click(function(){$(form).ajaxSubmit(function(data){alert(data);})})
})

二、再说这两种方法的区别

这两种方法主要的却别是ajaxForm不能主动提交form,函数只是为提交表单做准备需要以submit来触发提交。而ajaxSubmit会主动提交表单,同时可以在点击其他按钮时也可以触发提交,不一定是submit按钮。

 $(form).ajaxForm({  });  

👆👇两个方式等价 

$(".submitbtn").submit(function(){$(form).ajaxSubmit();return false          //想要阻止自动提交,必须return false;
})

总结

ajaxSubmit和ajaxForm的区别主要有:

  • 提交方式:ajaxSubmit能够立即通过AJAX提交表单,适用于各种情况下的提交,且不需要提供submit按钮。而ajaxForm不会直接提交表单,需要加入特定的监听事件才能阻止表单的直接提交,并使用AJAX进行提交。
  • 灵活性:ajaxSubmit更为灵活,依赖于事件机制,只要有事件存在就能使用该方法。只需要指定该form的action属性即可。而ajaxForm在document的ready函数中,使用ajaxForm来为AJAX提交表单进行准备。
  • 阻止表单提交:如果想阻止表单自动提交,ajaxSubmit需要return false。而ajaxForm的扩展方式更为直接。

简单来说,ajaxSubmit更适合在各种情况下进行表单的提交,且更为灵活。而ajaxForm需要加入特定的监听事件才能阻止表单的直接提交,并使用AJAX进行提交。在使用时需要根据具体需求进行选择。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/612709.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2024年了,Layui再战三年有问题不?

v2.9.3 2023-12-31 2023 收官。 form 优化 input 组件圆角时后缀存在方框的问题 #1467 bxjt123优化 select 搜索面板打开逻辑&#xff0c;以适配文字直接粘贴触发搜索的情况 #1498 Sight-wcgtable 修复非常规列设置 field 表头选项时&#xff0c;导出 excel 出现合计行错位的…

Ubuntu系统中指定端口防火墙状态查询与操作

浏览器访问&#xff1a; 如果遇到如山图所示的情况&#xff0c;既有可能是防火墙的问题。具体解决方案参照如下&#xff1a; 1.指定端口的防火墙状态查询 &#xff08;1&#xff09;查询命令 sudo ufw status | grep 8081/tcp #其中8081为要查询的端口号 如果端口是打开的…

TDengine 时序数据库 研究学习以及实战

下载地址&#xff1a;TDengine 发布历史及下载链接 | TDengine 文档 | 涛思数据 下载客户端和服务端 服务端和客户端的安装后 TDengine 客户端连接工具地址&#xff1a;Archive Files | DBeaver Community 添加驱动 新增 》 设置 选择驱动类后 设置里的类名就自动填写了&…

Jetson nano 实时性测试,使用stress-ng 和 cyclictest

系统&#xff1a;ubuntu18.04&#xff0c;Jetpack4.3 打上了实时补丁 安装stress-ng和cyclictest sudo apt-get install stress-ng sudo apt-get install rt-tests 无负载情况的实时性 让两个CPU满载运行60秒 两个CPU满载实时性&#xff1a; 测了一下&#xff0c;4个CPU满载的…

go study oneday

这段代码的详细解释&#xff0c;涵盖了Go 语言变量声明、函数调用、用户输入、类型转换以及结果输出。 package main import "fmt" func main() {var num1 intvar num2 float32var num3 intfmt.Println("请输入数字一&#xff1a;")fmt.Scanln(&num1)f…

评中级职称为何要提前准备业绩材料?

众所周知中高级职称每年评审是只有一批&#xff0c;错过的话就只能再等一年了&#xff1b;而且每年的职称评审的时间也是不一样的&#xff0c;根据各地政策通知每年的评审时间都是会有所调整在时间截止之前还未进行提交操作&#xff0c;就意味着你已经错过了本年度的申报时间&a…

服务端性能测试——性能测试工具JMeter-L1

第一遍没学懂&#xff0c;后续文章会更新~ 目录&#xff1a; 1.JMeter介绍与安装Meter简介JMeter安装2.JMeter的运行JMeter运行、界面功能简介3.使用代理服务器录制请求录制压测脚本&#xff08;一&#xff09;Web端脚本录制方法4.测试计划5.线程组6.控制器7.JMeter采样器/取…

【面试突击】分布式技术面试实战

&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308; 欢迎关注公众号&#xff08;通过文章导读关注&#xff1a;【11来了】&#xff09;&#xff0c;及时收到 AI 前沿项目工具及新技术 的推送 发送 资料 可领取 深入理…

你真的掌握了“C语言分支循环”吗

目录 前言 1. if语句 1.1 if 1.2 else 1.3 分支中包含多条语句 1.4 嵌套if 1.5 悬空else问题 2. 关系操作符 3. 条件操作符 4. 逻辑操作符&#xff1a;&& , || , &#xff01; 4.1 逻辑取反运算符 4.2 与运算符 4.3 或运算符 4.4 练习&#xff1a;闰年的判…

Unity WebView 中文输入支持

使用版本&#xff1a;Vuplex 3D WebView for Windows v4.4&#xff1b; 测试环境&#xff1a;unity editor 2020.3.40f1c1、Windows&#xff1b; 1、打开脚本CanvasWebVie!wPrefab 2、找到_initCanvasPrefab方法&#xff0c;约略在459行附近 3、添加一行代码&#xff1a; …

需求变更如此频繁,还甩锅给测试?

文章目录 项目背景需求变更的频繁的原因&#xff1f;生产问题产品复盘小结 项目背景 有一个数据管理平台系统的项目&#xff0c;需求频繁的变更了15次&#xff0c;每次生产上线后总是能出现一些让人意想不到的bug。开发人员和测试人员对这个项目嗤之以鼻&#xff0c;开项目会的…

python 人脸检测与人脸识别

安装库文件: pip install dlib face_recognition import dlib import face_recognition import cv2 from PIL import Image, ImageDraw# 判断运行环境 cpu or gpu def check_env():print(dlib.DLIB_USE_CUDA)print(dlib.cuda.get_num_devices())# 判断人脸在图片当中的位置 def…

科学和统计分析软件GraphPad Prism mac介绍说明

GraphPad Prism for Mac是一款科学和统计分析软件&#xff0c;旨在帮助研究者、科学家和学生更轻松地处理和可视化数据。 GraphPad Prism for Mac是一款功能强大、易于使用的科学和统计分析软件&#xff0c;适用于各种类型的数据处理和可视化需求。无论您是进行基础研究、临床试…

Vue组件

一&#xff1a;组件化开发基础 1.组件是什么&#xff1f;有什么用&#xff1f; 组件就是&#xff1a;扩展 HTML 元素&#xff0c;封装可重用的代码&#xff0c;目的是复用 例如&#xff1a;有一个轮播图&#xff0c;可以在很多页面中使用&#xff0c;一个轮播有js&#xff0c;…

纸箱回收投标书:可持续发展的生态环保解决方案

1. 项目背景 随着全球环境问题的日益突出&#xff0c;纸箱回收成为了可持续发展的重要一环。在这一大背景下&#xff0c;各地纸箱回收项目的投标书备受瞩目。投标书不仅是企业展示实力的窗口&#xff0c;更是对环保意识和社会责任的彰显。 2. 投标书的重要性 纸箱回收投标书…

如何用GPT来润色论文\生成完整长篇论文?

详情点击链接&#xff1a;如何用GPT来润色论文\生成完整长篇论文&#xff1f; 一OpenAI 1.最新大模型GPT-4 Turbo 2.最新发布的高级数据分析&#xff0c;AI画图&#xff0c;图像识别&#xff0c;文档API 3.GPT Store 4.从0到1创建自己的GPT应用 5. 模型Gemini以及大模型Cl…

基于arcgis的遥感深度学习数据集制作

由于很多时候&#xff0c;我们在研究过程中往往需要根据实际情况使用自己的影像数据来提取目标物&#xff0c;如果没有合适的公开数据集的话&#xff0c;为了满足实际需要&#xff0c;我们就需要制作符合自己要求的数据集。 今天我们就根据实际情况来详细讲解如何利用arcgis&am…

【ASP.NET Core 基础知识】--MVC框架--Views和Razor语法

一、Views和Razor语法基础 1.1 Views概述 在ASP.NET Core的MVC&#xff08;Model-View-Controller&#xff09;框架中&#xff0c;View 扮演着呈现用户界面的角色。View负责展示应用程序的数据给用户&#xff0c;并接收用户的输入。它与Model和Controller协同工作&#xff0c…

Leetcode17-好数对的数目(1512)

1、题目 给你一个整数数组 nums 。 如果一组数字 (i,j) 满足 nums[i] nums[j] 且 i < j &#xff0c;就可以认为这是一组 好数对 。 返回好数对的数目。 示例 1&#xff1a; 输入&#xff1a;nums [1,2,3,1,1,3] 输出&#xff1a;4 解释&#xff1a;有 4 组好数对&am…

文心大模型融入荣耀MagicOS!打造大模型“端云协同”创新样板

2024年1月10日&#xff0c;在荣耀MagicOS 8.0发布会及开发者大会上&#xff0c;荣耀终端有限公司CEO赵明宣布了“百模生态计划”&#xff0c;并与百度集团执行副总裁、百度智能云事业群总裁沈抖共同宣布&#xff0c;百度智能云成为荣耀大模型生态战略合作伙伴。 沈抖在现场演讲…