javascript - 使用 CodeIgniter 的 Ajax 驱动内容

Question

我正在制作一个单页网站，通过 CodeIgniter 中的 Ajax 与服务器进行交互。一般编码有以下几种:

Controller (user.php):

public function get_user_content() {
    $id = $this->input->post('id');
    $hits = $this->user_model->user_data($id);
    $s = '';    
    foreach ($hits as $hit) {
       $s .= $hit->name;
       $s .= $hit->age;
    }
    echo $s;
}

模型(user_model.php):

function user_data($id) {
   //do sql operation
   return $query->result();
}

查看:

...
...
<a href="#" id="23" class="user-data">Click here for user details</a>
...
...

JavaScript:

('.user-data').click(get_user_data);
....
....
function get_user_data(response) {
    return $.ajax({
        type: "POST",
        url:  "<?php echo base_url();?>index.php/user/get_user_content",
        data: { id: this.id },
        success: function(response) {
            $("#somediv").append(response);
            $(".someclass").click(another_function);
        },
        error: function(error) {
            alert("Error");
        }
    });
}

所以，看看上面的 javascript，所有向服务器发送一些数据的操作都有单独的函数，并且特定的 html 内容通过 Ajax 更新。

我有以下问题(我是新手):

1. Is there any better way of doing ajax in javascript than my implementation.
2. I'm not using the concept of views in CodeIgniter. I just `echo` results through my controller functions that gets embedded in javascript. This is because I want dynamic update in my app. It is a single page and there is no concept of new-page/new-tab. Is there any better way? 

我不知道有任何开源项目可以使它更容易/更优化。

Answer 1

为了使代码更简化、更易读并具有出色的编码标准答案将是是，以改进您的 javascript 代码以及您从 Ajax 调用获得响应的方式。

1. 改进 Javascript :如果不创建并包含一个，您可能在标题部分中包含一个常见的 js。这个通用 jar 仅包含整个应用程序的通用功能。创建一个函数，名称可能类似于 common.js 中的 sendAjaxRequest()。此函数将有一些参数，如 divId(刷新 div id)、url(发布 url)、options(选项数组)和函数将看起来像这样:

   function sendAjaxRequest(strDivId, strRequestUrl, options) {
        options = options || {};
        var defaultOptions = {url: strRequestUrl, type: 'POST', beforeSend: function(request,options){showLoadingImage(strDivId);}, success: function(html){$('#'+strDivId).html(html); removeLoadingImage(strDivId); }};
        options = $.extend({},defaultOptions,options);
        $.ajax(options);
   }
   

   从应用程序需要的地方调用此函数。喜欢

   ('.user-data').click( function() { sendAjaxRequest('somediv', url,{data: { id: this.id }}) });

   好处:当您希望在 ajax 调用上也保留 google 分析或希望跟踪您的 ajax 调用时，此方法在将来非常有用。有共同的功能总是好的。

2. ajax 调用的响应:您也可以在 Controller->function 中加载 View 以防 ajax 调用，无需为此进行任何更改或配置。使用这种方式始终是保持代码的标准性和可读性的好习惯。

注意:在这种情况下，您可能担心在加载第一个 Ajax 调用时使用第二个操作，因为这种标准方法是在加载特定 Ajax 调用 View 的 View 时编写第二个操作(在仅限该特定 View )
喜欢

('.someclass').click( function() { sendAjaxRequest('someOtherDiv', otherUrl,{data: { id: this.id }}) });

简而言之，根据最终用户分而治之规则(将 html 页面分成 block 并创建大页面)来创建良好的应用程序。这真是太棒了，因为我在整个编码中都使用这种方式。