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);
            }
        });
            
    });
相关推荐
雨白3 小时前
Jetpack系列(二):Lifecycle与LiveData结合,打造响应式UI
android·android jetpack
kk爱闹4 小时前
【挑战14天学完python和pytorch】- day01
android·pytorch·python
每次的天空6 小时前
Android-自定义View的实战学习总结
android·学习·kotlin·音视频
恋猫de小郭7 小时前
Flutter Widget Preview 功能已合并到 master,提前在体验毛坯的预览支持
android·flutter·ios
断剑重铸之日8 小时前
Android自定义相机开发(类似OCR扫描相机)
android
随心最为安8 小时前
Android Library Maven 发布完整流程指南
android
岁月玲珑8 小时前
【使用Android Studio调试手机app时候手机老掉线问题】
android·ide·android studio
还鮟12 小时前
CTF Web的数组巧用
android
小蜜蜂嗡嗡13 小时前
Android Studio flutter项目运行、打包时间太长
android·flutter·android studio
aqi0013 小时前
FFmpeg开发笔记(七十一)使用国产的QPlayer2实现双播放器观看视频
android·ffmpeg·音视频·流媒体