使用ajax和codeigniter在引导模式中提交表单,无需更改页面

2023-12-23

我正在尝试使用 ajax 在引导模式中提交表单。而且我的表单提交成功,但是ajax内的success语句没有执行。该页面被重定向到一个空白页面,显示 {"msg":"ok"}。 我正在粘贴控制器和视图中的代码。请帮忙。

控制器

$update_profile_details = $this->userp_m->edit_profile_m($uname,$uemail,$data1,$new_email);

            if($update_profile_details == true)
            {
                $status['msg'] = 'ok';
            }
            else
            {
                $status['msg'] = 'err';
            }

            echo json_encode ($status);

View

    $(document).ready(function()
{   

$("#myForm").submit(function(e) 
{   
    e.preventDefault();
    var reg = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
    var name = $('#inputName').val();
    var email = $('#inputEmail').val();

    if (name.trim() == '') {
        alert('Please enter your name.');
        $('#inputName').focus();
        return false;
    } else if (email.trim() == '') {
        alert('Please enter your email.');
        $('#inputEmail').focus();
        return false;
    } else if (email.trim() != '' && !reg.test(email)) {
        alert('Please enter valid email.');
        $('#inputEmail').focus();
        return false;
    } else {
        var fd = new FormData(this);

        $.ajax({
            type: 'POST',
            url: $('#myForm').attr('action'),
            dataType: "json",
            data: $('#myform').serialize(), fd,
            contentType: false,  
            cache: false,   
            processData:false,
            beforeSend: function() 
            {
                $('.submitBtn').attr("disabled", "disabled");
                $('.modal-body').css('opacity', '.5');
            },
            success: function(status) 
            {
                alert(status);

                if (status.msg == 'ok') {
                    $('#inputName').val('');
                    $('#inputEmail').val('');
                    $('.statusMsg').html('<span style="color:green;">Changes have been saved successfully.</p>');
                } else 
                {
                    $('.statusMsg').html('<span style="color:red;">Some problem occurred, please try again.</span>');
                }

                $('.submitBtn').removeAttr("disabled");
                $('.modal-body').css('opacity', '');
            },
            error: function(status) 
            {
                alert("Some error, please try again");

            }
        });
    }

});

HTML

 <form id="myform" method="post" enctype="multipart/form-data" action="<?php echo site_url('User/user_index_c/edit_profile_c'); ?>">
    <label>Full Name : </label>
    <input class="name_styling" type="text" placeholder="Enter name" id="inputName" name="uname">

    <label>Email Id : </label>
    <input class="email_styling" type="email"  placeholder="Enter email" id="inputEmail" name="new_email">

    <div class="controls">
    <label>Profile Photo : </label>
    <input name="file1" type="file"  id="image_file" />
    <img id="blah" class="logoupload" src="#" alt="your image" />
    <span class="filename"></span>
    </div>

    <center><input class="submitBtn" id="submit" type="submit" value="Save Changes" name="submit" ></center>

</form>

您必须编写如下所示的 jquery 代码,而不是函数。

Remove function submitContactForm(e){}

Add $(document).on('submit', '#myform', function(e) { })

$(document).on('submit', '#myform', function(e) {
    e.preventDefault();
    var reg = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
    var name = $('#inputName').val();
    var email = $('#inputEmail').val();
    if (name.trim() == '') {
        alert('Please enter your name.');
        $('#inputName').focus();
        return false;
    } else if (email.trim() == '') {
        alert('Please enter your email.');
        $('#inputEmail').focus();
        return false;
    } else if (email.trim() != '' && !reg.test(email)) {
        alert('Please enter valid email.');
        $('#inputEmail').focus();
        return false;
    } else {
        $('.submitBtn').prop("disabled", true);
        $('.modal-body').css('opacity', '.5');
        var myFormData = new FormData();
        e.preventDefault();
        var inputs = $('#myForm input[type="file"]');
        $.each(inputs, function(obj, v) {
            var file = v.files[0];
            var filename = $(v).attr("data-filename");
            var name = $(v).attr("name");
            myFormData.append(name, file, filename);
        });
        var inputs = $('#myForm input[type="text"],input[type="email"]');
        $.each(inputs, function(obj, v) {
            var name = $(v).attr("name");
            var value = $(v).val();
            myFormData.append(name, value);
        });
        var xhr = new XMLHttpRequest;
        xhr.open('POST', '<?php echo base_url(); ?>index.php/User/user_index_c/edit_profile_c/', true);
        xhr.send(myFormData);
        xhr.onload = function() {
            if (xhr.readyState === xhr.DONE) {
                if (xhr.status === 200) {
                    $('#inputName').val('');
                    $('#inputEmail').val('');
                    $('.statusMsg').html('<span style="color:green;">Changes have been saved successfully.</p>');
                    $('.submitBtn').removeAttr("disabled");
                    $('.modal-body').css('opacity', '');
                }
            }
        };
    }
});

如果不起作用请告诉我。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用ajax和codeigniter在引导模式中提交表单,无需更改页面 的相关文章

随机推荐

  • cudaFree 不释放内存

    下面的代码计算两个向量 a 和 b 的点积 正确的结果是8192 当我第一次运行它时 结果是正确的 然后 当我第二次运行它时 结果是之前的结果 8192 等等 1st iteration result 8192 2nd iteration
  • 缩写函数模板与带有转发引用参数的函数模板

    两者有什么区别带有转发参考参数的函数模板 template
  • 如何将文件上传请求从 Next.js API 传递到另一个 API?

    我正在尝试在 Next js 应用程序中裁剪图像 将其发送到应用程序中的 API 路由 最后发送到应用程序外部的 API 端点 如果我绕过 API 路由 它可以正常工作 但在通过它时就不行了 图像数据不再正确且无法处理 客户端 Next j
  • Laravel 5.4 中未找到“NumberFormatter”类

    我正在尝试使用 PHP 的 intl 扩展将金额转换为单词 例如 第1450章 一千四百五十 我正在使用 Laravel 5 4 它在 XAMPP 3 2 2 服务器上运行 PHP 5 6 24 正如类似问题中提到的 我已经启用了intl通
  • 在简单的 2d 游戏中实现重力

    我正在制作一个简单的游戏 比如马里奥 角色固定在一个位置 地面向左移动 给人一种角色移动的错觉 地面由左上角和右下角坐标定义的矩形块组成 private int surfaceMatrix 0 100 300 0 block having
  • 使用 Pyspark 时,您会从 Kryo 序列化器中受益吗?

    我读到 Kryo 序列化器在 Apache Spark 中使用时可以提供更快的序列化 不过 我通过 Python 使用 Spark 切换到 Kryo 序列化器后我还能获得显着的好处吗 Kryo不会造成重大影响PySpark因为它只是将数据存
  • Javascript slice 方法是否返回浅拷贝?

    在 Mozilla 开发人员翻译的韩语中 lan g 说 切片方法 返回浅复制的新数组 所以我测试了我的代码 var animals ant bison camel duck elephant var t animals slice 2 4
  • 从 XIB 文件按钮显示 ViewController - Swift

    有没有办法segue from a xib file 自定义 TableViewCell 到另一个视图控制器在 Main storyboard 中 不可能像在主故事板中那样拖动转场 在单元格中我有一个按钮 我想从那里更改视图 我该如何解决
  • 删除注释会提高代码性能吗? JavaScript

    从 JavaScript 代码中删除注释会提高性能吗 我意识到这不是很好的编程实践 因为注释构成了开发的固有部分 我只是想知道它们是否确实在编译过程中增加了一些开销 无论您是编译还是解释 JavaScript 编译器 解释器都需要查看该行
  • 链接器如何找到main函数?

    链接器如何在 x86 64 ELF 格式的可执行文件中找到 main 函数 一个非常通用的概述 链接器将地址分配给由符号标识的代码块main 正如它对目标文件中的所有符号所做的那样 实际上 它并不分配真实地址 而是分配相对于某个基址的地址
  • 以编程方式创建的按钮的 Onclicklistener

    我一直在寻找这个问题的答案 但似乎找不到 我有一个以编程方式创建的按钮 而不是在 xml 文件中 我希望在单击它时发生一些事情 显示警报或移动到另一个屏幕等 按钮代码 Button submitButton new Button this
  • 不带等号的 ASP.NET QueryString

    当我有一个像这样的网址时 http www mysite com MyTest http www mysite com MyTest MyTest 显示为请求对象的查询字符串中的键 如果我删除 符号 例如 http www mysite c
  • FxCop Phoenix 分析引擎出错

    因此 我尝试运行规则集中定义的一堆规则 RuleSet 文件实际上是使用 Sonarqube 生成的 我已经选择了其中的所有规则 包括 FxCop ReSharper 和 StyleCop 规则 我这样启动 FxCop C FxCop Fx
  • 如何防止春季日程重叠?

    Scheduled fixedDelay 5000 public void myJob Thread sleep 12000 如果上一个例程尚未完成 如何阻止此春季作业运行 默认情况下 spring使用单线程Executor 所以两个 Sc
  • C++ 中的 void 指针是什么? [复制]

    这个问题在这里已经有答案了 可能的重复 什么是void指针 什么是空指针 https stackoverflow com questions 4334831 what is a void pointer and what is a null
  • “[本机代码]”是什么意思?

    我尝试研究 jQuery 代码 所以我使用了这个 document write constructor jsfiddle http jsfiddle net WZGWp 我得到这个结果 function Function native co
  • Pytest 和动态夹具模块

    我正在使用 pytest 为可以在本地和云中运行的软件编写功能测试 我想创建 2 个模块 每个模块具有相同的模块 夹具名称 并让 pytest 加载其中之一 具体取决于我是在本地还是在云中运行测试 fixtures fixtures ini
  • React-select isMulti 选择所有过滤选项

    我需要在多选中添加 全选 选项 如果至少有 1 个过滤选项 则应显示它 单击 全选 应该仅添加过滤后的选项 不一定是所有选项 到已选择的选项 Input is empty so all options are filtered 单击 全选
  • 如何在 EF Core 中插入外键影子属性?

    EF Core 允许我们省略外键属性 因为导航属性的存在足以建立两个实体之间的关系 然后 EF Core 将创建所谓的外键影子属性 https learn microsoft com en us ef core modeling shado
  • 使用ajax和codeigniter在引导模式中提交表单,无需更改页面

    我正在尝试使用 ajax 在引导模式中提交表单 而且我的表单提交成功 但是ajax内的success语句没有执行 该页面被重定向到一个空白页面 显示 msg ok 我正在粘贴控制器和视图中的代码 请帮忙 控制器 update profile