将.load（jquery）转换为纯javascript [英] Converting .load (jquery) to pure javascript

问题描述

以下是我的jquery代码：

Here is my code with 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 。有人可以给我建议吗？

How to create .load in pure javascript? I have to convert all of my jquery code to pure javascript code, but I have no idea to load fetchmember.php?group='+id_group with pure javascript. Anyone could give me advice?

非常感谢

推荐答案

不接受transalation但很少帮助让你前进

Not extact transalation but little help to get you going

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

For jquery load(), I think you can use an iframe and set it's source(the easy way, if fetchmember.php returns HTML).

或者你可以在JQuery中查看load（）方法并尝试将其转换为纯js。在这里，您将使用纯 XMLHttpRequest 而不是 Jquery.Ajax（）

Or you can look at the load() method in JQuery and try converting it in to pure js. Here you will use pure XMLHttpRequest instead of 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;
};

对于 $（文件）.ready（），在你的身体末端写一个自我执行的功能。这样的东西

For $(document).ready(), write a self executing function at the end of your body. Something like this

<body>
 Custom HTML HERE

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

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

这篇关于将.load（jquery）转换为纯javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！