Converting .load (jquery) to pure javascript [clos

2019-06-14 16:35发布

站内问答 / JavaScript
1076 1 4

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

?>

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?

Thank you so much

1条回答
迷人小祖宗
2楼-- · 2019-06-14 16:44

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

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

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

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>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)