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);
            }
        });
            
    });
相关推荐
sunnyday042639 分钟前
Spring Boot 项目中使用 Dynamic Datasource 实现多数据源管理
android·spring boot·后端
幽络源小助理2 小时前
下载安装AndroidStudio配置Gradle运行第一个kotlin程序
android·开发语言·kotlin
inBuilder低代码平台2 小时前
浅谈安卓Webview从初级到高级应用
android·java·webview
豌豆学姐2 小时前
Sora2 短剧视频创作中如何保持人物一致性?角色创建接口教程
android·java·aigc·php·音视频·uniapp
白熊小北极2 小时前
Android Jetpack Compose折叠屏感知与适配
android
HelloBan2 小时前
setHintTextColor不生效
android
洞窝技术5 小时前
从0到30+:智能家居配网协议融合的实战与思考
android
QING6185 小时前
SupervisorJob子协程异常处理机制 —— 新手指南
android·kotlin·android jetpack
毕设源码-朱学姐5 小时前
【开题答辩全过程】以 基于安卓的停车位管理系统与设计为例,包含答辩的问题和答案
android
PWRJOY6 小时前
解决Flutter构建安卓项目卡在Flutter: Running Gradle task ‘assembleDebug‘...:替换国内 Maven 镜像
android·flutter·maven