2013-12-18 2 views
7

Я создаю веб-сайт, который представляет собой сайт на одной странице, взаимодействующий с сервером через Ajax в CodeIgniter. Общее кодирование следующего типа:Содержимое, управляемое Ajax с использованием CodeIgniter

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; 
} 

model(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? 

Я не в курсе каких-либо открытым исходным кодом проектов, которые могли бы сделать его более легким/более оптимизировано.

+0

Ответ на первый вопрос заключается в том, что запрос ajax в порядке, и это стандартный способ в jQuery –

+0

Вы попробовали ответ, предложенный ниже? Это дало вам какую-либо ошибку? –

+0

Проверьте, как я упомянул, если вы нашли какой-либо запрос, вы можете связаться со мной по адресу [email protected] .--> Спасибо –

ответ

0

Первый Ответ:

Аякса запрос кажется нормально, вы можете добавить опцию DATATYPE также ожидать определенного типа ответа, Как вы используете почту вы можете использовать jquery.post в качестве альтернативного

Пример

Вы также можете использовать сделать обратный вызов вместо успеха

Второй ответ:

Контроллер

public function get_user_content() { 
    $id = $this->input->post('id'); 
    $hits = $this->user_model->user_data($id); 
    $user_array = array(); 
    foreach ($hits as $hit) { 
     $temp_array = array(); 
     $temp_array = array('name' => $hit->name); 
     $temp_array = array('age' => $hit->age); 
     $user_array = array($temp_array); 

    } 
    $this->load->view('user', $user_array); 
} 

Модальные

остается тот же

Посмотреть (User.php)

пример сказать пользователь.PHP

<?php 
echo "<div class='somediv'>"; 
if (sizeof($user_array)) { 
    for ($row = 0; $row < sizeof($user_array); $row++) { 
    echo "User Details: Name - " . $user_array[$row]['name'] . ", Age - " . $user_array[$row]['age']; 
    echo "<br/>"; 
    }  
} else { 
    <a href="#" id="23" class="user-data">Click here for user details</a> 
} 
echo "</div>"; 
?> 

Javascript

$('.user-data').on('click' function() { // better to use event delegation as content is loaded dynamically 
    get_user_data(); 
}); 

function get_user_data() { 
    $.post("<?php echo base_url();?>index.php/user/get_user_content", function(data) { 
     alert("success"); 
     $("#somediv").append(data); 
     $(".someclass").click(another_function); 
    }, 'html') // here specify the datatype 
    .fail(function() { 
     alert("error"); 
    }); 
} 

Ссылка

stackoverflow.com/questions/18471627/codeigniter-load-a-view-using-post-and-ajax

0

1- Существует и другие способы сделать AJAX вызовы, которые лучше или не основано на ваших потребностях , This post очищает эту точку

2 Ваш путь хороший, все же вы можете использовать некоторые улучшения для своих функций, чтобы быть полноценными веб-сервисами, такими же, как и ошибки обработки - в случае - и возвращать выходные данные как json, позволяя вам управлять им с вашего Функция JavaScript для лучшей обработки &.

3 из того, что я понял, что вы получаете данные для одного пользователя каждый раз, в этом случае с использованием $query->row() было бы проще избавиться от данных, чем с использованием $query->result(), но в случае, если вы получаете несколько записей, это с вашей функцией JavaScript.

вот другой подход к вашему примеру с небольшими улучшениями, которые могут быть полезны:

controller (user.php):

public function get_user_content($id) { 
    $output -> hit = $this -> user_model -> user_data($id); 
    if (!$output -> hit) { 
     $output -> msg = "NORECORDS"; 
    } else { 
     $output -> msg = "SUCCESS"; 
    } 
    echo json_encode($output); 
} 

model(user_model.php):

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

JavaScript:

 function get_user_data(response) { 
    $.get("<?php echo base_url();?>index.php/user/get_user_content/" + this.id, function(data) { 
     if (data.msg != 'SUCCESS') { 
      alert(data.msg); 
      return; 
     } 
     var hit = data.hit; 
     $("#somediv").append("Name: " + hit.name + "Age: " + hit.age); 
     $(".someclass").click(another_function); 
    }, "json"); 
} 
1

Для упрощения кода читаемый & с отличным стандартным ответом на кодирование будет yes как для улучшения кода javascript & способ получения ответа от вызова Ajax.

  1. Улучшение Javascript: Вы можете иметь один общий JS включен в заголовок вы часть, если не создавать & включать один. Эта общая банка содержит только общие функции во всем приложении. Создать одну функцию с именем может быть как sendAjaxRequest() в том, что common.js. Эта функция будет иметь некоторые параметры, такие как DIVID (обновить DIV ID), URL (пост URL) опции (массив опций) & функция будет выглядеть следующим образом:

    Вызов этой функции из где это требуется по заявке. как

    ('.user-данные ') нажмите (функция() {sendAjaxRequest (' somediv', URL {данных:. {ID: это.Я бы }}) });

    Benefit: Этот метод является очень полезным в будущем, когда вы хотите сохранить Google Analytics на Ajax вызова также или хотите отслеживать АЯКС вызовы. Всегда хорошо иметь общие функции.

  2. Resposnse от АЯКС вызова: Вы можете загрузить виды в функции контроллер-> в случае вызова Ajax также, ничего не нужно изменить или настроить для этого. Использование этого метода всегда является хорошей практикой для поддержания стандартности & readablity в коде.

Примечание: Здесь, в этом случае вы можете беспокоиться об использовании второго действия при загрузке вашего первого вызова Ajax, для этого стандартного способа, чтобы написать второе действие на нагрузку зрения этого точки зрения частности Ajax вызова (Написать второй код нажмите в этой конкретной точки зрения только)
как

('.someclass ') нажмите (функция (.) {sendAjaxRequest (' someOtherDiv', otherUrl, {данные: {ID: this.id} })});


Короче у конечного пользователя разделяй & захвата правила (Разделить HTML-страницу на блоки & создать огромную страницу) для создания хороших приложений. Это действительно фантастический способ, поскольку я использую этот способ в моих кодировках в целом.

Смежные вопросы