提交 CI 表单而不重新加载页面

Question

所以我在 CI 中有一个控制器来更新 Shoutcast 服务器的标题。

我希望能够在不重新加载页面的情况下运行表单。

适用的控制器/视图如下；

控制器

                function update_title()
            {
                $this->form_validation->set_rules('song', 'Song', 'trim|required|xss_clean');
                $this->form_validation->set_error_delimiters(
                    '<div class="alert alert-danger alert-dismissible" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>', '</div>'
                );

                if ($this->form_validation->run() == FALSE)
                {
                    /* $this->load->view('header');
                    $this->load->view('radio/panel'); // Failed validation
                    $this->load->view('footer'); */
                    $this->broadcast();
                }
                else
                {
                $data   =  $this->data;
                $ip     =  $data[1]; // Server Address 
                $port   =  $data[2]; // Server Port
                $pass   =  $data[4]; // Admin Password
        //  -------------------------------------------------
                $song = $this->input->post('song');     
                $song = urlencode($song); 
                $song = str_replace("+", "%20", $song);
                $fp = @fsockopen($ip,$port,$errno,$errstr,4);
                if (!$fp) {
                    print "Error: cant get server, please check that server is online";
                } else {
                    fputs($fp, "GET /admin.cgi?pass=" . $pass . "&mode=updinfo&song=" . $song . " HTTP/1.0\r\n");
                    fputs($fp, "User-Agent: Mozilla\r\n\r\n");
                    fclose($fp);
                    $song = str_replace("%20", "+", $song);
                    $song = urldecode($song);
                }
                    $this->load->view('header');
                    $this->load->view('radio/title_updated');
                    $this->load->view('footer');
                }
            }

查看

<?php
            $input_title = array(
                'name'  => 'song',
                'id'    => 'song',
                'size'  => 30,
                'class' => 'form-control',
                'placeholder' => 'Artist(s) - Show Name'
            );

            $input_submit = array(
                'name'  => 'submit',
                'class' => 'btn btn-primary',
                'type'  => 'submit'
            );

            ?>

            <div class="container">
                <div class="col-lg-10">
                <div class="row well">
                <?php echo validation_errors(); ?>
                <div class="col-xs-12 col-sm-12 col-md-10">
                <?php
                echo form_open('radio/update_title');
                echo '<div class="input-group">';
                echo form_input($input_title);
                echo '<span class="input-group-btn">';
                echo form_button($input_submit, '<i class="fa fa-refresh fa-1x"></i>');
                //echo form_submit('submit', 'Update Show Title', "class='btn btn-primary'");
                echo '</span></div>';
                echo form_close();
                ?>
                </div>


                </div>

                </div>

            </div> <!-- /container -->

这一切都很完美，但是正如我所说的页面令人耳目一新。我已经尝试遵循一些指南，但是无论我尝试什么，页面都会重新加载。

有人可以提供一些建议吗？

提前谢谢你！

Answer 1

听起来您的问题目前主要是客户端。如果您正确调用 AJAX 函数，则永远不会看到页面刷新。即使它出错，它也会默默地死掉（或在 javascript 控制台中显示错误）。因此，让我们为您的函数调用一次。

在您的 PHP 中，您必须在表单中添加一个 ID。当我们围绕 AJAX 调用构建 jQuery 时，这一点很重要

echo form_open('radio/update_title', array('id' => 'update-title'));

现在我们可以开始构建 javascript。 jQuery 有一些非常好的调用 ajax 的特性，我们将充分利用它们。

$('#update-title').on('submit', function(event){ // make sure you pass the event param

    // get the form values and serialize them
    var values = $(this).serializeArray();

    // lets make our call to the server
    $.ajax({
        url: this.action,
        type: 'POST',
        data: $.param(values), // get it in the right format
        error: function(data, status, error) {
            // handle your errors here
        },
        success: function(data, status) {
            // show your validation or display success message
        },
        complete: function(data, status) {
            // other post-process stuff regardless of success
        }
    });

    // here's the important part to prevent the page load
    event.preventDefault();
});

由于update_title 中的$this->load->view 调用，我强烈建议您检测AJAX 或使用update_title 以外的其他方法来处理您的AJAX 请求。无论您回显什么内容，您都需要在客户端进行处理，如果您回显出一个完整的 HTML 文档，那将是一团糟。我建议验证服务器端，然后使用 JSON 返回您的成功、错误或验证错误消息，而不是加载视图。 注意：这是未经测试的代码