Jquery 中 ajaxSubmit 、ajaxForm使用讲解

article/2025/9/23 8:51:02

最近在使用ajaxForm,随便把使用方法记下下来,以便以后回顾。

1 ,引入依赖脚本

<script type="text/JavaScript" src="/js/jQuery/jquery.form.js"></script>   //ajaxForm 依赖脚本

<script type="text/javascript" src="/js/jquery/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="/js/jquery/jquery.easyui.min.js"></script>


2 使用方法

<form name="testForm" id="testForm" >

<input type="button" value="submit"/>

</form>

<script type="text/javascript">

var ajax_option={

url:"login",//默认是form action

success:function(data){

}

$('#testForm').ajaxSubmit(ajax_option);

}

</script>


//注意$("#testForm")  引号中名称必须要和form元素id值要保持一致

3 ajaxSubmit 和ajaxForm区别

ajaxForm不能提交表单。在document的ready函数中,使用ajaxForm来为AJAX提交表单进行准备。提交动作必须由submit开始 

ajaxSubmit 马上由AJAX来提交表单。你可以在任何情况下进行该项提交。 

4

option的参数 
var options = {    
       target:        '#output1',   // target element(s) to be updated with server response    
       beforeSubmit:  showRequest,  // pre-submit callback    
       success:       showResponse  // post-submit callback    
  
       // other available options:    
       //url:       url         // override for form's 'action' attribute    
       //type:      type        // 'get' or 'post', override for form's 'method' attribute    
       //dataType:  null        // 'xml', 'script', or 'json' (expected server response type)    
       //clearForm: true        // clear all form fields after successful submit    
       //resetForm: true        // reset the form after successful submit    
  
       // $.ajax options can be used here too, for example:    
       //timeout:   3000    

   };   

转自:http://blog.csdn.net/h70614959/article/details/8810270

====================================================================================


前几天在学习form表单提交时看到这两种方法,这两种方法都是实现form的ajax提交的方法,看了很多资料还是不太明白其用法和区别,最后直接自己写demo,很快就理解,所以说实操是学习的最快捷直接的途径。好了,下面回到正题:

在使用这两种方法之前,首先需要安装form.js的插件,下载就不放了,网上一搜就有;

<script src="/Tool/HtmlPage/S45/js/jquery-form.js"></script>

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

var object= {
                     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="" id="persondetail" 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 id="submitbtn" type="submit" value="提交"></div>
</form>

JS代码:

ajaxForm

$(function(){$("form").ajaxForm(object);})

ajaxSubmit

        $(function(){
$('#submitbtn').click(function(){$("form").ajaxSubmit(object);
})})

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

复制代码
$(function(){
$('#submitbtn').click(function(){$("form").ajaxSubmit(function(data){alert(data);})
})})
复制代码

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

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

ajaxForm执行的时候其实相当于

 $("form").submit(function(){
            $(this).ajaxSubmit();

            return false;        //此句解释了为什么ajaxSubmit会自动提交表单,想要阻止自动提交,必须return false;
        })

转自:http://www.cnblogs.com/xiaosama/p/4747848.html

http://chatgpt.dhexx.cn/article/gKap63mR.shtml

相关文章

ajaxForm 与ajaxSubmit

ajaxSubmit 和ajaxForm区别 ajaxForm ajaxForm()不能提交表单。在document的ready函数中&#xff0c;使用ajaxForm来为AJAX提交表单进行准备。提交动作必须由submit开始 ajaxForm()适用于以表单提交方式处理ajax技术&#xff08;需要提供表单的action、id、 method&#xff0…

前后端交互之使用ajax方法实现form表单的提交

转载于&#xff1a;使用ajax方法实现form表单的提交 - 程序员十三 - 博客园 (cnblogs.com) οnsubmit“reutrn false”&#xff1a;表示禁止表单提交。 data: $(#addTaskform).serialize(),序列化提交表单数据。 不要忘记引用js文件 <script type"text/javascript&…

一文必懂-Ajax与form

Restful与Ajax Ajax示例1:查询所有学生数据示例2&#xff1a;查找部分学生数据中文传参 表单标签抓包数据 Post与GetRestful示例Restful附带URL参数 Ajax与form标签 Ajax 一种在网页上调用后台接口的方式 jquery提供了相应的用法 即 $.ajax({内容});先添加jQuery包。 内容部分…

手把手教你开发一款属于自己的Arduino开发板

【前言】 相信很多小伙伴们手里都一块或者几块开发板吧&#xff0c;没有没想过自己也开发一款开发板呢&#xff1f;接下来就教你开发一款属于自己的开发板吧(●◡●)。 【软件版本】 AD17 【正文】 1. 硬件选型 1.1 主控芯片&#xff1a;用ATMEGA32P吧&#xff0c;用LQFP封…

Arduino IDE 离线添加开发板

目录 问题背景配置环境配置方法在线方法&#xff08;失败&#xff09;离线方法&#xff08;成功&#xff09; 其他开发板参考资料 问题背景 想要使用ESP32-S2开发板&#xff0c;搭建一个小项目&#xff0c;目前比较主流的编程方法有三种&#xff0c;一种是IDF&#xff08;应该…

Arduino nano开发板选购

介绍两块Arduino nano开发板&#xff0c;串口芯片都是ch340g&#xff0c;黑色的采用Atmega168p&#xff0c;粉色的采用Atmega328p。板子挺厚的而且都是type c接口&#xff0c;有黑色和粉色可选。 除了主控芯片不同&#xff0c;其他都一样&#xff0c;只需要在Arduino程序中将处…

配置esp8266开发板的Arduino开发环境

1.esp8266开发板硬件&#xff1a; 基于esp8266的nodemuc开发板&#xff08;pdd上有卖不超过15块&#xff09;&#xff1b;microUSB数据线&#xff08;这里一定要是数据线&#xff0c;具备数据传输和充电功能&#xff0c;不能仅充电&#xff09;。 esp8266开发环境有许多例如&a…

Arduino手动安装esp8266开发板

Arduino手动安装esp8266开发板可以用离线安装包&#xff0c;确定就是离线安装包网上不好找&#xff0c;版本也不齐全&#xff0c;无法找到某个特定版本的离线安装包&#xff0c;好处是直接双击运行&#xff0c;傻瓜式安装就好了&#xff0c;下载地址 https://cloud.codess-nas…

几个常用的arduino附加开发板管理网址

摘要&#xff1a;本文介绍arduino变成环境下几个常用的开发板的网址&#xff0c;设置方法是“首选项”--”附加开发板管理器网址“填入对应的字符串即可&#xff0c;本文介绍的有mtstack开发板。 m5stack开发板 例如下图这种 还有下图这种&#xff0c;它们都是基于esp32核心的。…

如何用Arduino IDE开发9.9元的合宙LuatOS ESP32C3开发板?

如何用Arduino IDE开发9.9元的合宙LuatOS ESP32C3开发板&#xff1f; 合宙LuatOS ESP32C3-CORE开发板 简介硬件准备软件准备1、安装串口驱动&#xff08;CH343&#xff09;2、安装Arduino IDE3、添加ESP32C3开发板 烧录测试程序1、编译程序2、连接 & 上传 合宙LuatOS ESP32…

认识 Arduino 开发板

Arduino 是源自意大利的一个开放源代码的硬件项目平台&#xff0c;该平台包括一块具备简单 I/O 功能的电路板以及一套程序开发环境软件。 Arduino 真正腾飞的原因是其能够实现将模拟输入转换为数字输入&#xff0c;换言之&#xff0c;您可以将光线&#xff0c;温度&#xf…

彻底分析Arduino库安装和开发板库安装路径和方式

参考&#xff1a;https://blog.csdn.net/weixin_43794311/article/details/128631564&#xff0c;https://blog.csdn.net/t01051/article/details/103766886 一个最简单的安装esp8266和esp32的方法 在网址&#xff1a;https://arduino.me/download&#xff0c;下载对应的开发…

Arduino开发教程

Arduino开发教程 1 前言1.1 大道之悟1.2 Arduino 硬件1.3 Arduino 软件 2.基础篇2.1 点灯操作2.2 电机驱动2.3 机器通讯 3. 提高篇3.1 联合实验3.2 物联开发 4. 进阶篇4.1 实物开发4.2 友人优作 5. 优质工具5.1 串口工具5.2 开发工具5.3 3D打印机 6. 小结 &#x1f38f;&#x…

自制Arduino 风格开发板 - HK32F030MF4P6 紧凑开发板

模仿Arduino Nano 做一个HK32F030M 的紧凑开发板&#xff0c;排针间距和Arduino Nano 相同&#xff0c;整体尺寸略小&#xff0c;适合插在面包板上。兼容HK32F030MF4P6 和0301M&#xff0c;板载CH340N 串口和DS1307 时钟模块。开源工程地址&#xff1a;HK32F030MF4P6 紧凑开发板…

Arduino添加ESP32开发板

【2023年3月4日】 最近要在新电脑上安装Arduino&#xff0c;需要进行一些配置&#xff0c;正好记录一下&#xff01; Arduino2.0.1 下的开发板添加操作。 ESP32开发板GitHub链接&#xff1a; GitHub - espressif/arduino-esp32: Arduino core for the ESP32Arduino core for…

Arduino上手动添加开发板

最近一个在一个项目上想在树莓派3B上使用9dof-razor-imu传感器&#xff0c;&#xff0c;搭建开发环境的时候根据其官网说明选了Arduino。然而在添加他的第三方SparkFun开发板时出了问题&#xff0c;因为他的开发板环境包在GitHub上&#xff0c;所以Arduino的开发板管理器在下载…

Arduino安装与配置ESP8266开发板(超简单,亲测有效)

文章目录 前言一、下载Arduino二、 ESP8266环境配置(超简单&#xff0c;亲测有效)三、下载验证总结 前言 由于要上数字信号处理课程&#xff0c;需要安装Arduino&#xff0c;并在Arduino中配置ESP8266环境&#xff0c;然而发现在首选项中附加开发板管理器网址这种方法&#xf…

基于Arduino Uno开发板制作音乐播放器

基于Arduino Uno开发板制作音乐播放器 本文将基于Arduino开发板实现一个音乐播放器。 利用Arduino Uno读取sd卡模块中内存卡的音乐&#xff0c;传输信号到扬声器进行播放。一、项目软硬件简介&准备 1.Arduino开发板 Arduino Uno 是一款基于 Microchip ATmega328P 微控制…

二、初识arduino uno开发板

开发板参数表 什么是arduino? Arduino是一款便捷灵活、方便上手的开源电子原型平台。包含硬件&#xff08;各种型号的Arduino板&#xff09;和软件&#xff08;ArduinoIDE&#xff09;。构建于开放原始码simple I/O介面版&#xff0c;并且具有使用类似Java、C语言的Process…

Arduino基础入门篇(认识开发板和面包板)

Arduino开发板 Arduino是一款简单易学且功能丰富的开源平台&#xff0c;包含硬件部分&#xff08;各种型号的Arduino开发板&#xff09;和软件部分&#xff08;Arduino IDE) Arduino硬件部分可以独立工作&#xff0c;也可以与外部硬件设备协同工作。比如利用Arduino配合各种传…