-1

这是我的 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 代码，但我不知道fetchmember.php?group='+id_group用纯 javascript 加载。任何人都可以给我建议吗？

太感谢了

4

1 回答 1

2

不精确的翻译，但对您的帮助不大 

 //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。在这里，您将使用 pureXMLHttpRequest代替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-14T13:13:22.750 回答