CodeIgniter：提交表单后避免刷新？答案

【问题标题】：CodeIgniter: Avoiding Refresh after Submitting Form?CodeIgniter：提交表单后避免刷新？
【发布时间】：2016-03-06 04:51:56
【问题描述】：

我基本上是在向我的控制器提交表单值，并且我正在使用 CodeIgniter 框架。但是，当我将值发送到控制器的函数时，页面会更改为控制器并离开 index.php（当前页面）

index.php:

<form action="<?php echo base_url();?>index.php/LoginController/loginuser" method="post">
            <input id="login_emailbox" name="login_emailbox" type="text" class="form-control welcome-login-email" placeholder="Email" required="">
            <input id="login_passbox" name="login_passbox" type="password" class="form-control welcome-login-password" placeholder="Password" required="">
            <button id="loginbtn" type="submit" class="btn btn-info" style="margin-left: 30px">Login</button>
</form>

LoginController.php：

class LoginController extends CI_Controller {

    public function __construct()
    {
        parent::__construct();
    }

    function index()
    {
        $this->load->helper('html');
        $this->load->helper('url');
        $this->load->view('header');
        $this->load->view('footer');

        $this->load->view('index.php');
    }


    public function loginuser(){
        echo $_POST['login_emailbox'];
        echo $_POST['login_passbox'];
    }

}

我在运行时采取的步骤：

1) 我通过 => http://localhost/codeig/index.php/LoginController/index 浏览到 index.php

2) 填写表格并点击提交。值提交给函数：loginuser

3) 页面被重定向到“登录用户”功能

我怎样才能避免这种情况并基本上将值发送到控制器中的 loginuser 函数而不刷新当前页面？

【问题讨论】：

在不重新加载页面的情况下提交表单需要 ajax。这是一个简单的原型：stackoverflow.com/questions/28977449/…
问题是，我需要编写代码参考CodeIgniter的URL映射是如何工作的。我需要在 URL 中指定控制器名称、函数（问题中的示例）。您链接的 SO 问题没有解决 CodeIgniter @VladimirRamik
它应该可以正常工作 - 您只需要一个 ajax 调用即可： index.php/LoginController/loginuser 并让该控制器处理表单跨度>
你用 ajax 调用 ..

标签： php forms codeigniter

【解决方案1】：

<form action="" method="post" id="myForm">
            <input id="login_emailbox" name="login_emailbox" type="text" class="form-control welcome-login-email" placeholder="Email" required="">
            <input id="login_passbox" name="login_passbox" type="password" class="form-control welcome-login-password" placeholder="Password" required="">
            <button id="loginbtn" type="submit" class="btn btn-info" style="margin-left: 30px">Login</button>
</form>

你的 Jquery

 $('#loginbtn').on('click',function(e){
e.preventDefault();
    var data = $('#myForm').serialize();
    var base_url='<?php echo base_url(); ?>'
    $.ajax({
    url:base_url+'index.php/LoginController/loginuser',
    type:'POST',
    data:data,
    success:function(data){

    alert(data); // here what you want to do with response
    }
    }); 
return false;


   });

【讨论】：

我认为我应该将按钮的类型设置为“按钮”而不是提交？
没关系..点击loginbtn时触发事件
嗯，很奇怪。如果我添加提交作为类型，它会刷新
对不起兄弟，它还在刷新：/
哦，快，我认为我的 jquery 相关代码都不起作用。我将 CDN 链接引用为：

【解决方案2】：

    <form>
                    <input id="login_emailbox" name="login_emailbox" type="text" class="form-control welcome-login-email" placeholder="Email" required="">
                    <input id="login_passbox" name="login_passbox" type="password" class="form-control welcome-login-password" placeholder="Password" required="">
                    <button id="loginbtn" type="submit" class="btn btn-info" style="margin-left: 30px">Login</button>
    </form>

<script>
$(document).ready(function(){
              $('#loginbtn').click(function(){
                    var login_emailbox = document.getElementById('login_emailbox').value;

                    $.ajax({
                        url:'<?=base_url()?>index.php/Controller/function',
                        method: 'post',
                        data: {login_emailbox: login_emailbox},
                        dataType: 'json',
                        success: function(response){
alert('data updated'); 
                        }
                    });
                }); 
});
</script>

【讨论】：