Преобразование .load (JQuery) в чистом JavaScript

-1

Вот мой код с JQuery:Преобразование .load (JQuery) в чистом JavaScript

<tr> 
    <td> 
    <form name="group" id="form1" method="post"> 
     <select name="group" id="group"> 
     <option value="" disabled selected>Choose your group..</option> 
     <?php foreach ($userGroups['data'] as $groups) { 
      echo "<option value=\"".$groups['id']."\">".$groups['name']."</option>"; 
     }?> 
     </select> 

    </form> 
    </td> 
</tr> 
<tr> 
    <td id="fetchmember"> 
    <script type="text/javascript"> 
     $('#group').on('change',function(){ 
     var id_group = this.value; 
     $('#fetchmember').html('<center><img src="ajax-loader.gif"></center>'); 
     $('#fetchmember').load('fetchmember.php?group='+id_group); 
     }); 
    </script> 
    </td> 
</tr>

fetchmember.php:

<?php 
include 'facebookauth.php'; 
    $groupId = $_GET['group']; 
    $groupmember = $facebook->api('/'.$groupId.'/members'); 
    $membergroup = $groupmember['data']; 

    foreach ($membergroup as $membergroups) { 
     echo "<li>".$membergroups['name']."</li>";  
    } 

?>

Как создать .load в чистом JavaScript? Мне нужно преобразовать весь код jquery в чистый код javascript, но я не имею понятия загрузить fetchmember.php?group='+id_group с чистым javascript. Кто-нибудь может дать мне совет?

Спасибо большое

источник

2013-10-14 King Goeks

Разбейте проблему на небольшие дискретные шаги. Определите, что делает этот код jQuery, и вы можете исследовать, как делать те же самые вещи без jQuery. Например, этот код: 1) Назначение функции событию 'change' для элемента; 2) Установка 'innerHtml' элемента; 3) Выполнение запроса AJAX для извлечения данных с сервера; 4) Настройка ответа этого запроса AJAX на 'innerHtml' другого элемента. – David

Не extact transalation но немного помочь, чтобы вы собираетесь

//selector , use document.getElementById  
    $('#group') => document.getElementById('group'); 

//to set the html 
    $('#fetchmember').html => document.getElementById("fetchmember").innerHTML="'<center><img src="ajax-loader.gif"></center>'"; 


//to bind the click 
    document.getElementById('group').addEventListener('click', function() { 
     console.log('bind click'); 
    });

Для JQuery load(), я думаю, что вы можете использовать IFRAME и установить его источник (легкий путь, если fetchmember.php возвращает HTML).

Или вы можете посмотреть метод load() в JQuery и попробовать преобразовать его в чистый js. Здесь вы будете использовать чистый XMLHttpRequest вместо Jquery.Ajax()

jQuery.fn.load = function(url, params, callback) { 
    if (typeof url !== "string" && _load) { 
     return _load.apply(this, arguments); 
    } 

    var selector, response, type, 
     self = this, 
     off = url.indexOf(" "); 

    if (off >= 0) { 
     selector = url.slice(off, url.length); 
     url = url.slice(0, off); 
    } 

    // If it's a function 
    if (jQuery.isFunction(params)) { 

     // We assume that it's the callback 
     callback = params; 
     params = undefined; 

    // Otherwise, build a param string 
    } else if (params && typeof params === "object") { 
     type = "POST"; 
    } 

    // If we have elements to modify, make the request 
    if (self.length > 0) { 
     jQuery.ajax({ 
      url: url, 

      // if "type" variable is undefined, then "GET" method will be used 
      type: type, 
      dataType: "html", 
      data: params 
     }).done(function(responseText) { 

      // Save response for use in complete callback 
      response = arguments; 

      self.html(selector ? 

       // If a selector was specified, locate the right elements in a dummy div 
       // Exclude scripts to avoid IE 'Permission Denied' errors 
       jQuery("<div>").append(jQuery.parseHTML(responseText)).find(selector) : 

       // Otherwise use the full result 
       responseText); 

     }).complete(callback && function(jqXHR, status) { 
      self.each(callback, response || [ jqXHR.responseText, status, jqXHR ]); 
     }); 
    } 

    return this; 
};

Для $(document).ready(), написать самостоятельно выполняет функцию в конце вашего тела. Что-то вроде этого

<body> 
Custom HTML HERE 

<script> 
// self executing function 
(function() { 
    // write all your js here 

})(); 
</script> 
</body>

источник

2013-10-14 13:13:22 Anand

Это было бы сложнее. Вы можете использовать iFrame и установить источник в качестве своего url, или make и XMLHttpRequest, проанализировать html и добавить его в div. Вы можете посмотреть код, который использует jquery – Anand

Преобразование .load (JQuery) в чистом JavaScript

ответ

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