How to load content using Ajax

问题:

I want to load my database content using ajax and jquery. I already write a javascript and it works correctly but I can't write correctly for ajax jquery. Anyone please give me some example?

my javascript code:

<script language="javascript">
    function getfilter(str){

    document.getElementById("result").innerHTML="<div class='sparea'><i class='fa fa-spinner fa-spin sparea' ></i><div></script";

    if (str==""){
        document.getElementById("result").innerHTML="";
        return;
    }
    xmlhttp=new XMLHttpRequest();
    xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
            document.getElementById("result").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","Views/pfolioresult.php?q="+str,true);
    xmlhttp.send();
}
</script> 

<div class="sprocket-mosaic-header">
    <div class="sprocket-mosaic-filter">
        <ul>
            <li class="all active" data-mosaic-filterby="all" onclick="getfilter(this.id)" id="all" >All</li>
            <li class="android" data-mosaic-filterby="android" onclick="getfilter(this.id)" id="android" >Android</li>
            <li class="iOS" data-mosaic-filterby="iOS" onclick="getfilter(this.id)" id="ios" >IOS</li>
        </ul>
    </div>
    <div class="clear"></div>
</div>


<div id="result">
    ok
</div>

回答1:

Do this

function getfilter(str){

    document.getElementById("result").innerHTML="<div class='sparea'><i class='fa fa-spinner fa-spin sparea' ></i><div></script";

    if (str==""){
        document.getElementById("result").innerHTML="";
        return;
    }

    $.ajax({
        url: "Views/pfolioresult.php",
        type: "GET",
        data: { q : str },
        success: function ( responseText ) {
            $("#result").html( responseText );
        }
    });
}

Learn it from here: https://api.jquery.com/jQuery.ajax/

回答2:

You can simply use Ajax and Jquery for data load. You can use

function getfilter(str){
  $.ajax({
     type: "POST",
        //path to  php page to get  data
    url:"pathto/getdata.php",
    data: "id="+str,
    success:function(result){

      //here is your success action
      //get data on div  
        $("#result").html(result);
    });
 }

We can do this by calling a function onclick as illustrated above or you can use JQuery's onclick event.

Now Get Id in you getdata.php page using $_POST['id'] and return your database data to ajax success and do whatever you want to do.

回答3:

Since you're using jQuery, the easiest would be to use .load()

http://api.jquery.com/load/

回答4:

Try this

<script language="javascript">
        function getfilter(str){

            document.getElementById("result").innerHTML="<div class='sparea'><i class='fa fa-spinner fa-spin sparea' ></i><div></script";

            if (str == ""){
              $( "#result" ).html( "" )
              return;
              } 

            var request = $.ajax({
               type: "POST",
               url: "Views/pfolioresult.php",
               data: { id: str }
            });

            request.done(function( msg ) {
               $( "#result" ).html( msg );
            });

           request.fail(function( jqXHR, textStatus ) {
               alert( "Request failed: " + textStatus );
           });
  }

回答5:

<script>
function getfilter(str){



    if (str==""){
        document.getElementById("result").innerHTML="";
        return;
    }

    $.ajax({
        url: "Views/pfolioresult.php?q="+str,
        type: "GET",
    //  data: serializedData,
        success: function ( responseText ) {
$("#result").html(responseText); 
        }
    });
}
</script>

This code works correctly but suppose i have 10,000 data in database .This code show all data at once after load but how it possible that data show one by one depent on load time that means when one item load then it show and other continuously show