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);
            }
        });
            
    });
相关推荐
摘星编程2 小时前
React Native for OpenHarmony 实战:DatePickerAndroid 日期选择器详解
android·react native·react.js
花卷HJ3 小时前
Android 沉浸式全屏实践:主题 + 状态栏文字颜色完整方案
android
花卷HJ5 小时前
Android 项目中 BaseActivity 封装实践(支持 ViewBinding、PermissionUtils动态权限、加载弹窗和跳转动画)
android
m0_748254665 小时前
AJAX 基础实例
前端·ajax·okhttp
消失的旧时光-19436 小时前
Android 接入 Flutter(Add-to-App)最小闭环:10 分钟跑起第一个混合页面
android·flutter
城东米粉儿6 小时前
android StrictMode 笔记
android
Zender Han7 小时前
Flutter Android 启动页 & App 图标替换(不使用任何插件的完整实践)
android·flutter·ios
童无极7 小时前
Android 弹幕君APP开发实战01
android
赛恩斯7 小时前
kotlin 为什么可以在没有kotlin 环境的安卓系统上运行的
android·开发语言·kotlin
于山巅相见7 小时前
【3588】Android动态隐藏导航栏
android·导航栏·状态栏·android11