开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

成功ajax表单提交时更改按钮文本永久性

基础概念

AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页应用能够快速地更新内容。

相关优势

提升用户体验：用户无需等待整个页面刷新，即可看到操作结果。
减少服务器负载：只传输必要的数据，而不是整个页面。
提高响应速度：异步通信使得页面响应更快。

类型

GET请求：用于请求数据。
POST请求：用于提交数据。

应用场景

表单提交
数据获取
实时搜索

问题描述

在成功提交AJAX表单后，按钮文本没有永久性更改。

原因

可能是由于JavaScript代码中存在逻辑错误，或者DOM元素没有正确更新。

解决方法

以下是一个简单的示例，展示如何在AJAX成功提交后更改按钮文本：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX Form Submission</title>
</head>
<body>
    <form id="myForm">
        <input type="text" name="data" required>
        <button type="submit" id="submitButton">Submit</button>
    </form>

    <script>
        document.getElementById('myForm').addEventListener('submit', function(event) {
            event.preventDefault(); // 阻止表单默认提交行为

            var xhr = new XMLHttpRequest();
            xhr.open('POST', '/submit-form', true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    // 成功提交后更改按钮文本
                    document.getElementById('submitButton').textContent = 'Submitted';
                }
            };

            var formData = new FormData(this);
            var encodedData = new URLSearchParams(formData).toString();
            xhr.send(encodedData);
        });
    </script>
</body>
</html>

参考链接

总结

在AJAX成功提交表单后，确保在xhr.onreadystatechange回调函数中正确更新按钮文本。通过检查xhr.readyState和xhr.status，可以确保在请求成功完成后进行DOM更新。

相关搜索:ajax成功函数无法更改按钮文本如何在ajax中成功更改按钮文本单击提交按钮时，Ajax表单提交未捕获错误通过更改提交按钮文本更新表单状态 Ajax表单提交、事件侦听器和更改提交按钮类型成功提交表单时重定向成功提交时隐藏登录表单单击提交按钮后关闭Modal (ajax成功)提交按钮在通过Ajax提交表单后冻结单击按钮后，Ajax不会提交表单如何在ajax中成功更改文本在提交表单时使用AJAX AJAX在普通表单提交时不会提交表单提交时禁用按钮使用Google Script更改Google表单的提交按钮文本在成功提交表单时显示Modal ajax提交成功后，我无法清除文本值如何在通过ajax成功提交表单时验证真实性令牌？通过ajax提交表单时启用浏览器自动完成功能使用ajax -提交按钮ID处理多个表单

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

jquery的form表单提交

在上面的表单中，我们有两个输入框用于输入姓名和邮箱，以及一个提交按钮。...在回调函数中，我们阻止了表单的默认提交行为，通过serialize()方法获取表单数据，并使用$.ajax()方法向服务器发送POST请求提交表单数据。...通过serialize()方法获取表单数据，并使用$.ajax()方法向服务器发送POST请求。当提交成功时，通过success回调函数来显示“注册成功”信息，并重置表单。...当提交失败时，通过error回调函数来显示“注册失败”提示信息。Form表单是HTML中用于收集用户输入信息并将其提交给服务器处理的重要元素。...Form表单由包含在和标签之间的多个表单元素组成。用户可以在表单中输入文本、选择选项、上传文件等，然后通过表单提交按钮将这些数据发送给服务器。

1361 0

ThinkPHP5.1表单令牌Token失效问题的解决

前言 ThinkPHP出于安全的考虑增加了表单令牌Token，由于通过Ajax异步更新数据仅仅部分页面刷新数据，就导致了令牌Token不能得到更新，紧接着的第二次新建或更新数据（提交表单时）失败——不能通过令牌的验证...在网上搜寻了很多，有好几种方法；看完觉得有一个最好： Ajax异步动态请求创建新令牌并更新到本地主要思路：在每次发送表单结束后（不管成功与否）通过Ajax异步请求一个新的表单令牌并保存到表单隐藏域中...举例，下面的示例代码在提交后不管成功与否都申请了新的令牌。...表单按钮对象 * @param {文本} Modal 模块 * @param {文本} Controller 控制器 * @param {文本} Action 方法 * @param {...文本} Location Ajax加载页面的位置id * 使用方法：表单对象不用提交的任何设置，提交假按钮<a 设置onclick即可 * 注意： * 1.

2K4 1

表单脚本

虽然现流行的大部分提交方式是通过ajax，但了解表单，对于ajax方式也是有重大帮助的！所以，大家不要看轻表单。...提交表单（1）提交按钮提交方式1：通用提交按钮方式2：自定义提交按钮 <button type="submit...（textarea除外，在<em>文本</em>区中回车会换行）。如果<em>表单</em>没有<em>提交</em><em>按钮</em>，安回车键不会<em>提交</em><em>表单</em>。注意，通过上述方式<em>提交</em><em>表单</em>，浏览器会在将请求发送给服务器之前触发submit事件。...（2）利用onsubmit事件处理程序取消后续的<em>表单</em><em>提交</em>方式。我们项目中，请求通过<em>ajax</em><em>提交</em>，防重复<em>提交</em>的方式大致类似于上述第（2）种。...拦截<em>ajax</em>发送前、发送<em>成功</em>，发送完成过程，使用状态机标识当前处于哪种状态（loading、resubmit、success、error）。

4.8K4 1

form表单提交的几种方式

：使用ajax提交 html页面代码： <!...html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。 script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。...经过排查，发现是因为后台返回时用了@ResponseBody注解（SpringMVC返回json格式的注解），但前台ajax提交没有定义dataType属性（定义服务器返回的数据类型）...提示：如需引用一个以上的表单，请使用空格分隔的表单 id 列表。 formaction 属性规定当提交表单时处理该输入控件的文件的 URL。...将会直接导致表单校验不通过，然后支付失败的问题。所以在在通常网站开发中不提倡使用type=image作为表单的提交按钮。

6.4K2 0

JqueryForm的使用方式

想把现有的表单的提交方式变成异步提交的方式异步上传文件上面的第一种情况也可以用jquery ajax来实现但是一旦表单中有文件上传就必须用jqueryform了下载地址官方文档使用说明常用方法...form直接变成ajax形式即点击点击提交按钮时就会异步提交比如一下的两种形式就是相同的效果 ajaxForm $('#usergroup_add_form').ajaxForm({ "url":...null success 表单成功提交后调用的回调函数。...该方法将所有的文本（text）输入字段、密码（password）输入字段和文本区域（textarea）字段置空，清除任何select元素中的选定，以及将所有的单选（radio）按钮和多选（checkbox...）按钮重置为非选定状态。

2.3K2 0

Ajax(二)

注意：每个表单域必须包含 name 属性，否则用户填写的信息无法被采集到表单按钮当表单数据填写完毕后，用户点击表单按钮，会触发表单的提交操作，从而把采集到的数据提交给服务器。...提交表单数据在提交数据时，页面会自动跳转，导致用户体验感差。因为表单身兼数职：负责采集数据负责把数据提交到服务器表单的默认提交行为会导致页面的跳转。 1....multipart/form-data 适合用于上传文件 ajax2.0提供的FormData来实现 text/plain 纯文本（不经常使用）在标签上，通过 action 属性指定提交的 URL...-- 提交按钮 --> 提交使用Ajax解决页面跳转问题通过 Ajax 提交表单采集到的数据，可以防止表单默认提交行为导致的页面跳转问题...步骤给form注册submit事件 ==> 该事件会在表单提交的时候会触发阻止表单的默认跳转行为 ==> 事件对象e.preventDefault() 收集表单中数据发送ajax请求提交给服务器

1.6K2 0

Jquery 常见案例

ajaxForm 预处理将要使用AJAX方式提交的表单，将所有需要用到的事件监听器添加到其中。它不是提交这个表单。...在页面的ready函数里使用ajaxForm来给你页面上的表单做这些AJAX提交的准备工作。 ajaxForm 需要零个或一个参数。这唯一的一个参数可以是一个回调函数或者是一个可选参数对象。...例子: $('#myFormId').ajaxForm(); ajaxSubmit 立即通过AJAX方式提交表单。最常见的用法是对用户提交表单的动作进行响应时调用它。...缺省值： false resetForm 布尔值，指示表单提交成功后是否需要重置。缺省值： null clearForm 布尔值，指示表单提交成功后是否需要清空。...缺省值： null iframe 布尔值，用来指示表单是否需要提交到一个iframe里。这个用在表单里有file域要上传文件时。更多信息请参考代码示例页面里的File Uploads 文档。

6.7K1 0

EasyNVR前端防止提交成功后多余操作提交

回到具体问题上来，有用户反应EasyNVR前端对于表单提交这一块用户体验不是很好。主要问题是表单在提交成功以后，提交按钮依然可以触发。居然有用户提出来，我们就要尽最大可能满足用户需求。...整体的流程无非这两种： 1.点击提交按钮->触发ajax提交数据->提交成功->屏蔽提交按钮防止再次提交; 2.点击提交按钮->触发ajax提交数据->提交失败->保持提交按钮状态供再次提交；...；请求成功后在success中将提交按钮屏蔽起来，如果请求失败，提示出错误原因，保持提交按钮的可以提交的状态。...当赋予该属性时该元素将变得不可交互。可以用这个属性来屏蔽提交按钮。...下一篇将介绍如何实现当表单内容出现变化后可以提交，表单内容不变的情况下依然屏蔽提交按钮。

8251 0

前端基础-Ajax简介

；在我们之前学习代码中，向服务器提交数据典型的应用是就是 form 表单，其中的 action 就是我们提交数据的服务器端地址；完成一个 form 表单；当我们点击提交按钮时，页面就会跳转到服务器页面...；但是，我本不想让页面跳转，数据也能被发送到服务器端，同时，还可以接受服务器返回的数据；当我注册一个网站的账号时，填写完用户名并没有点击提交，但是，用户名如果有重复，文本框的傍边便会提示我更换用户名...技术，允许客户端脚本发送HTTP请求，并随后集成在IE4.0中应用（XMLHTTP），到2005年，谷歌（Google）把Ajax成功应用于自家的多款Web系统中（Gmail邮箱、Google Map、...= document.getElementsByTagName('input'); //绑定点击事件 inp[1].onclick = function(){ //获取文本值...require('http'); var server = http.createServer(); server.listen(8080,function(){ console.log('服务器启动成功

5072 0

一篇文学会商用可编辑问卷表单制作【iVX 十二】

，进行手机注册动作，传入手机号码、短信验证码即可：之后为了判断注册动作是否成功，我们为这个这动作添加两个回调，一个为成功时响应、一个为失败时响应。...：接着为动态添加页面的保存按钮设置事件，点击按钮后选择刚刚所创建的提交服务，设置好我们已有的数据内容进行提交：此时我们预览界面，设置好内容后提交成功将会出现提示：此时查看数据库，则会发现其中已有数据记录...，此时我们与动态表单生成时操作一致，当元素内容改变时进行数组内的数据更改，由于从动态添加表单页复制到当前界面，此功能已存在并不需要改动，我们直接为提交按钮添加事件即可。...1：最后给提交按钮添加提交事件：预览页面进行内容提交后将会在已填写表单数据库中看到具体内容：最后在前台页面下创建一个变量用于记录点击的父表内容：当我们点击填写按钮时，将会设置该变量的值为当前点击表单的...与提交用户一致的情况下更改删除字段为 1：最后返回是否成功即可： 5.4 结束表单页的功能编写我们再创建一个已结束表单页，该页可以下载表单统计数据：该页面与自己的表单页的区别在于功能按钮的不同

6.7K3 0

JavaScript基础学习--02属性操作

一、思路 1、模拟手机聊天思路： a.静态页面html+css，包括双发短信发送成功后的基本样式。 b.获取头像、输入框、发送按钮和聊天内容显示界面等需要操作的对象。 ...三、其他要点： 1、表单提交按钮input和button、a的差异和选择。 ...其次，如果不用表单直接提交的方式（action），而是选择异步或者其他方式提交，则选择a标签。...（3）在按钮有一些交互效果的时候，a标签更容易实现，hover效果便可（有些浏览器只支持a标签的hover的css效果(IE6不支持button等其他hover)）注意：a标签表单不会自动提交...但是例如延时执行、ajax异步加载看起来像是“多线程”，其实是“回调”，类似于操作系统中的“中断和响应”，比如ajax异步加载，代码执行到ajax部分时，代码中断并开始往下执行，当ajax请求数据返回时

1.8K9 0

php学习之html属性-表单（五）

：提交：图片提交：普通按钮：没有任何意义的按钮...> form标记：是表单域的现实，需要用form标记把表单内容括起来，这时候才可以提交，原因是form中的属性中有：提交方式（get和post）、提交地址（具体提交页面）、上传文件的设置（如果不设置无法上传...在AJAX里不写有可能会报错，但是在HTML的form表单里是可以不写 enctype=”application/x-www-form-urlencoded”的，因为默认HTML表单就是这种传输编码类型...multipart/form-data是用来指定传输数据的特殊类型的，主要是我们上传的非文本的内容人，比如图片或者mp3视频等 text/plain是纯文本传输的意思，在发送邮件时要设置这种编码类型的，...--多行文本框--> <input type="image" src=".

2K2 1

C# HTTP系列10 form表单的enctype属性

" /> 6 7 此点击【提交】按钮，Form提交请求数据，Fiddler抓包时看到的请求如下（无关的请求头在本文中都省略掉了）： ?...很多时候，用 Ajax 提交数据时，也是使用这种方式。...此点击【提交】按钮，Form提交请求数据，Fiddler抓包时看到的请求如下（无关的请求头在本文中都省略掉了）： ? ?...此点击【提交】按钮，Form提交请求数据，Fiddler抓包时看到的请求如下（无关的请求头在本文中都省略掉了）： ? （1）boundary：用于分割不同的字段，为了避免与正文内容重复。..."/> 此点击【提交】按钮，Form提交请求数据，Fiddler抓包时看到的请求如下（无关的请求头在本文中都省略掉了）： ?

1.1K4 0

python爬虫从入门到放弃（二）之爬虫的原理

其中一个原因是GET可能会被网络蜘蛛等随意访问 POST:向指定资源提交数据，请求服务器进行处理（例如提交表单或者上传文件）。数据被包含在请求本文中。...请求体请求是携带的数据，如提交表单数据时候的表单数据（POST） Response中包含了什么所有HTTP响应的第一行都是状态行，依次是当前HTTP版本号，3位数字组成的状态代码，以及描述状态的短语...响应状态有多种响应状态，如：200代表成功，301跳转，404找不到页面，502服务器错误 1xx消息——请求已被服务器接收，继续处理 2xx成功——请求已成功被服务器接收、理解、并接受 3xx重定向...——需要后续操作才能完成这一请求 4xx请求错误——请求含有词法错误或者无法被执行 5xx服务器错误——服务器在处理某个正确请求时发生错误常见代码： 200 OK 请求成功 400 Bad Request...分析ajax Selenium/webdriver Splash PyV8,Ghost.py 怎样保存数据文本：纯文本，Json,Xml等关系型数据库：如mysql,oracle,sql server

1.5K9 0

jQuery基础(五)一Ajax应用与常用插件-imooc

参数url为加载服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数例如，点击“加载”按钮时，向服务器请求加载一个指定页面的内容，加载成功后，将数据内容显示在...为服务器返回的数据类型，success为请求成功的执行的回调函数，type为发送数据请求的方式，默认为get 例如，点击页面中的“加载”按钮，调用ajax()方法向服务器请求加载一个txt文件，当请求成功时调用...({options}) 其中form参数表示表单元素名称，options参数表示调用方法时的配置对象，所有的验证规则和异常信息显示的位置都在该对象中进行设置例如，当点击表单中的“提交”按钮时，调用validate...插件验证用户名输入是否符合规则，并将异常信息显示在页面中，如下图所示：表单插件——form 通过表单form插件，调用ajaxForm()方法，实现ajax方式向服务器提交表单数据，并通过方法中的options...例如，当点击“提交”按钮时，如果文本框中的内容为空，则通过dialog插件弹出提示框，提示输入内容不能为空，如下图所示：在浏览器中显示的效果： 3-7菜单工具插件——menu 菜单工具插件可以通过

16.5K2 0

什么是AJAX？

提交表单分为两种： 1、无返回结果的，就是把表单数据直接提交给后台，让后台直接处理；最简单的就是$(“#formid”).submit();直接将form表单提交到后台。...submit",{ success :function(data){ //对结果处理 } }); 因为在当前界面上弹出对话框，然后在对话框上的按钮触发对话框中表单提交...实例：保存数据到服务器，成功时显示信息。...相比于复杂的$.ajax而言，GET请求功能则显得更加简单，请求成功时可调用回调函数。当然如果需要在出错时执行函数，那么还请使用$.ajax。...POST请求功能也相对比较简单，请求成功时可调用回调函数。如果需要在出错时执行函数，那么请使用 $.ajax请求。

1.7K2 0

前端和后端交互的方式

1.前端开发与后台交互的方式（1）form提交同步请求（2）Ajax提交异步请求发送json对象一、Ajax：异步的javascript和XML 主要优点： 1.异步请求，不妨碍用户浏览页面或者其他操作...$.ajax({ cache: true, type: "POST", url:‘表单提交的url地址’,...function(data) { console.log(data);//data为服务器处理后返回的数据 alert("请求成功... form表单提交为同步请求，submit按钮会刷新整个页面注意在使用ajax提交form表单时，提交按钮应为type=“button”，然后为其绑定点击事件...，而不应该为type=“submit”，因为submit按钮会刷新整个页面，从而导致ajax请求被拦截。

3K2 0

通过ajaxreturn jquery json提交form

想要将表单数据提交到后台，需要先从表单获取数据/数据集 serialize和serializeArray的区别是serialize()获取到序列化的表单值字符串，serializeArray()以数组形式输出序列化表单值...是独立于语言之外的存储和交换文本信息的语法。 2.2.2 json和ajax的关系？...整个过程是： 1.在php中编写页面中的表单、提交按钮等； 2.在js中对php中的按钮事件添加校验和触发函数，在js函数内，如果js对象的格式和内容正确就向控制器url（php中初始化）发起ajax请求...； 3.控制器中的相应操作响应ajax请求，并判断数据后做数据库读写操作，然后对数据库操作结果做出判断，ajaxReturn返回js需要的数组； 4.当ajax成功返回时，js中ajax的success...这样就完成了ajax异步局部刷新。提交表单的时候，不建议用$.submit函数，导致重复提交或jquery失效！具体原因我也没弄明白。

5K3 0

easy的jsp的增删改查在一个jsp页面上

,text文本，buttons按钮有个 handler处理方法大致分为 Ⅰ：进行表单验证 Ⅱ：根据customer表单id获取到customer表单 Ⅲ：创建一个新的表单数据 Ⅳ：使用ajax方法调用后台接口...Content-Type 陆：processData 默认为true，当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data 柒：success 成功和失败的回调方法...④给添加的对话框添加width宽度，height高度，modal遮罩层，title标题，shadow阴影，buttons按钮,text文本，buttons按钮有个 handler处理方法大致分为 Ⅰ：...修改之前先提示用户确定修改吗 Ⅱ：根据editCustomer表单id获取到editCustomer表单 Ⅲ：创建一个新的表单数据 Ⅳ：修改的时候需要把id set进去 Ⅴ：使用ajax方法调用后台接口的大致分为...提交的时候不会序列化 data，而是直接使用data 柒：success 成功和失败的回调方法成功要关闭对话框，重载表格并给出消息提示 /* 修改弹出框

4.6K2 0

Ajax等待返回结果时,弹出一个友好的等待提示

function(){ // Handle the complete event } // ...... }); 防止重复数据在实际项目开发中，提交表单时常常由于网络或者其原因...，用户点击提交按钮误认为自己没有操作成功，进而会重复提交按钮操作次数，如果页面前端代码没有做一些相应的处理，通常会导致多条同样的数据插入数据库，导致脏数据的增加。...要避免这种现象，在$.ajax请求中的beforeSend方法中把提交按钮禁用掉，等到Ajax请求执行完毕，在恢复按钮的可用状态。...// 提交表单数据到后台处理 $.ajax({ type: "post", data: studentInfo, contentType: "application...ajaxSend 全局事件请求开始前触发的全局事件 success 局部事件请求成功时触发。即服务器没有返回错误，返回的数据也没有错误。

3.9K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭