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);
            }
        });
            
    });
相关推荐
xiangpanf4 小时前
Laravel 10.x重磅升级:五大核心特性解析
android
robotx7 小时前
安卓线程相关
android
消失的旧时光-19438 小时前
Android 面试高频:JSON 文件、大数据存储与断电安全(从原理到工程实践)
android·面试·json
dalancon9 小时前
VSYNC 信号流程分析 (Android 14)
android
dalancon9 小时前
VSYNC 信号完整流程2
android
dalancon9 小时前
SurfaceFlinger 上帧后 releaseBuffer 完整流程分析
android
用户693717500138410 小时前
不卷AI速度,我卷自己的从容——北京程序员手记
android·前端·人工智能
程序员Android10 小时前
Android 刷新一帧流程trace拆解
android
墨狂之逸才11 小时前
解决 Android/Gradle 编译报错:Comparison method violates its general contract!
android
阿明的小蝴蝶12 小时前
记一次Gradle环境的编译问题与解决
android·前端·gradle