jquery - 在 Codeigniter 上使用 jQuery AJAX 在 jQuery 选项卡中加载一段 html

Question

我在这里是因为我无法使用 JQuery AJAX 在 JQuery 选项卡中加载一段 html 代码(包含客户端数据的表单)。 我尝试使用 JQuery .load()、.append() .html()，但无法在 JQuery 选项卡中加载简单的 html 表单。 我使用codeigniter，在 Controller 中有一些功能: 其中一个名为 findClient 创建一个 CI 分页，其中有一个包含 radio 输入的表。

class Management extends CI_Controller {

function __construct(){
    parent::__construct();  
    $this->load->library('myclients');
    session_start();
}


function index($clientsFound=0){
      ...
  ...       
}


public function findCliente(){
    // generate a pagination, in a table. each row have a radio, 
    // and hads a rispective id of that record
}

当我单击选项卡 1 中的提交按钮时...... 我调用 JQuery AJAX

$('#fm_submit_report').click(function(event){
            event.preventDefault();
            var form_data = {
                id_client: $('input:checked').val(),
                ci_csrf_token: $.cookie("ci_csrf_token")
            };
            var form = $(this);
            $.ajax({
                url: 'management/createReport',
                type: 'POST',
                async : false,
                data: form_data,
                dataType: 'html',
                success: function(dati, stato){
                    $('#tabs').tabs('select',4);
                    alert('Creation of a Report');
                    console.log('stato: '+stato+'   received data: '+dati);
                    $('#create_report').load(dati);
                    alert('end of load');
                },
                error: function(xhr) {

                var message = 'Errore nell\'invio del form: ';
                var status = xhr.status;
                var text = xhr.statusText;

                message += status + ': ' + text;

                $('<div class="error"/>').text(message).
                appendTo(form);

                }
            });
            return false;

这个ajax，将cient id传递给方法createReport()。正如您所看到的，此方法使用 myclients 库获取客户端信息，并在传递此信息后，在“一段 html 代码”中创建一个带有以下内容的表单:里面的客户数据

public function createReport(){
    $client=$this->myclients->findClientById($this->input->post('id_cliente'));
    $data['client'] = $client;
 // this is a client information to pass in the view to generate the form, that will load in a tab

   $hthmlcode=$this->load->view('create_report', $data);
   // create_view is the html form 

 echo $htmlcode;
}

}/* End of function createReport */

在 JQuery 选项卡中加载的 html 代码是这样的

<table>
<tr>
    <td>                                                         
        <table style="margin-top:0" cellpadding="0" cellspacing="0" border="0">
            <?php echo form_open('management/storeReport') ?>
            <tr>
                <td class="report_left"><h2>Visit Date</h2></td>
                <td class="report_dx"><?php echo form_input('data_visita', '', 'class="data", id="datepickervisita"'); ?></td>
            </tr>
            [ ...cut ...]
            </tr>
        </table>
        <?php echo form_input($btnInviaReport); ?>

        <?php echo form_close(); ?>
        <div class="error_report"></div>
    </td>  
</tr>    
</table>
</div>

但不幸的是，html 中的代码没有加载到第 5 个选项卡中...并且该帖子返回整个页面(而不是我的 html 表单)!!!

我注意到，在firebug控制台中，我在ajax的url中设置的 Controller /方法的路径是错误的，在fatc中我设置了

url: 'management/createReport'

但在控制台中我看到该帖子已发送到以下地址:

http://_local_ip_/management/management/createReport

但是，显然，如果我不设置 Controller (只设置 url:'createReport')，返回变量“dati”将为空，因为我调用了未定义 Controller 的方法

success: function(dati, stato)

我怀疑我的.htaccess文件是造成这个问题的原因(为什么当调用ajax时 Controller 的名称重复两次？？？)

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /

    #Removes access to the system folder by users.
    #Additionally this will allow you to create a System.php controller,
    #previously this would not have been possible.
    #'system' can be replaced if you have renamed your system folder.
    RewriteCond %{REQUEST_URI} ^system.*
    RewriteRule ^(.*)$ /index.php?/$1 [L]

    RewriteCond %{ENV:REDIRECT_STATUS} 200
    RewriteRule .* - [L]

    RewriteRule ^(system|application) - [F,L]

    #When your application folder isn't in the system folder
    #This snippet prevents user access to the application folder
    #Submitted by: Fabdrol
    #Rename 'application' to your applications folder name.
    RewriteCond %{REQUEST_URI} ^public.*
    RewriteRule ^(.*)$ /index.php?/$1 [L]

    #Checks to see if the user is attempting to access a valid file,
    #such as an image or css document, if this isn't true it sends the
    #request to index.php
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ index.php?/$1 [L]
</IfModule>

<IfModule !mod_rewrite.c>
    # If we don't have mod_rewrite installed, all 404's
    # can be sent to index.php, and everything works as normal.

    ErrorDocument 404 /index.php
</IfModule> 

public是我的项目的文件夹，它在系统目录之外......

Answer 1

我解决了这个问题。 问题出在 JQuery AJAX 函数中的 url 条目，实际上而不是

 url: 'management/createReport',

我在库中创建了一个函数 Myjavascript/getSubmitRadio()，它接受传递给 Controller ​​的字符串，并返回整个 JQuery 函数。 JQuery 函数是我传递给标题 View 的字符串

 // -=[ Get the javascript code to insert in the header, to esecute a JQuery Submit on a specified form ]=-    
   $submitReportForm = $this->myjavascript->getSubmitRadio('fm_submit_report', 'input:checked', site_url('management/createReport'));

在我有一个完整的自定义 jquery 脚本加载到 View 中之后，以便具有:

$('#fm_submit_report').click(function(event){
            event.preventDefault();
            var form_data = {
                id_cliente: $('input:checked').val(),
                ci_csrf_token: $.cookie("ci_csrf_token")
            };
            $.ajax({
                url: 'http://10.0.0.135/management/createReport.html ',
                type: 'POST',
                async : false,
                data: form_data,
                dataType: 'html',
                success: function(dati, stato){
                    $('#tabs').tabs('select',4);
                    alert('Creazione report per il cliente scelto');
                    console.log('stato: '+stato+'   dati ricevuti: '+dati);
                    $('#create_report').html(dati);
                    alert('Fine caricamento');
                },
                error: function(xhr) {

                var message = 'Errore nell\'invio del form: ';
                var status = xhr.status;
                var text = xhr.statusText;

                message += status + ': ' + text;

                $('<div class="error"/>').text(message).
                appendTo(form);

                }
            });
            return false;

    });