ajax嵌套ajax实现不刷新表单并向指定页面二次提交数据

利用jq定位表单位置后执行阻止表单提交代码。event.preventDefault();当获取到表单数据后进行向指定页面提交操作。提交成功后将表单置空且再次利用ajax提交该表单完成二次提交。

javascript 复制代码
$('#myForm').on('submit', function(event) {
           
        event.preventDefault(); 
        var formData = $(this).serialize(); // 序列化表单数据
        $.ajax({
            url: 'chatbox.php', // 处理表单数据的PHP文件路径
            type: 'POST', // 提交方式
            data: formData, // 要发送的数据
            success: function(response) {
                $('#rightcontent').html(response);
                 var emptyFormData = {};
                $('#myForm :input').each(function() {
                    emptyFormData[this.name] = ''; // 设置所有字段为空字符串
                });

                
                             $.ajax({
                        url: 'chatbox.php', // 处理表单数据的PHP文件路径
                        type: 'POST', // 提交方式
                        data: emptyFormData, // 要发送的数据
                        success: function(response) {
                            $('#rightcontent').html(response);
                           

                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            console.log('Error: ' + textStatus + ' ' + errorThrown);
                        }
                    });
                 
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log('Error: ' + textStatus + ' ' + errorThrown);
            }
        });
            
    });
相关推荐
COSMOS_*1 小时前
2025最新版 Android Studio安装及组件配置(SDK、JDK、Gradle)
android·ide·jdk·gitee·android studio
jian110582 小时前
android studio Profiler性能优化,查看内存泄漏
android·性能优化·android studio
建群新人小猿4 小时前
陀螺匠企业助手——组织框架图
android·java·大数据·开发语言·容器
TheNextByte15 小时前
如何将文件从Android无线传输到 iPad
android·ios·ipad
赫萝的红苹果5 小时前
实验探究并验证MySQL innoDB中的各种锁机制及作用范围
android·数据库·mysql
叶落无痕525 小时前
Android Studio 2024.3.1 连接夜神模拟器
android·ide·android studio
玲子的猫6 小时前
安卓原生开发实现图片双指放大预览功能
android
2501_915106327 小时前
如何在iPad上高效管理本地文件的完整指南
android·ios·小程序·uni-app·iphone·webview·ipad
似霰7 小时前
AIDL Hal 开发笔记5----实现AIDL HAL
android·framework·hal
2501_915106328 小时前
iOS 成品包加固,在只有 IPA 的情况下,能做那些操作
android·ios·小程序·https·uni-app·iphone·webview