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返回您的成功，错误或验证错误消息，而不是加载视图。 注意：这是未经测试的代码

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

1 个答案: