将.load（jquery）转换为纯javascript [关闭]答案

【问题标题】：Converting .load (jquery) to pure javascript [closed]将.load（jquery）转换为纯javascript [关闭]
【发布时间】：2013-10-22 01:32:18
【问题描述】：

这是我的 jquery 代码：

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

?>

如何在纯 javascript 中创建 .load？我必须将我的所有 jquery 代码转换为纯 javascript 代码，但我不知道用纯 javascript 加载 fetchmember.php?group='+id_group。任何人都可以给我建议吗？

非常感谢

【问题讨论】：

将问题分解成小的离散步骤。定义这个 jQuery 代码在做什么，你可以研究如何在没有 jQuery 的情况下做同样的事情。例如，这段代码是： 1) 将函数分配给元素上的change 事件； 2）设置元素的innerHtml； 3) 发出 AJAX 请求以从服务器获取数据； 4) 将该 AJAX 请求的响应设置为另一个元素的innerHtml。

标签： javascript php jquery converter

【解决方案1】：

翻译不准确，但对你的帮助不大

 //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）。

或者你可以看看 JQuery 中的 load() 方法并尝试将其转换为纯 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>

【讨论】：

那将是最难做到的。您可以使用 iFrame 并将源设置为您的 url，或者制作 XMLHttpRequest，解析 html 并将其添加到 div。可以看一下jquery使用的代码