Question

我想使用ajax和jquery加载我的数据库内容。我已经写了一个javascript，它工作正常，但我无法正确编写ajax jquery。有人请给我一些例子吗？

我的javascript代码：

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

Answer 1

您可以简单地使用Ajax和Jquery进行数据加载。你可以使用

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

我们可以通过调用如上所示的onclick函数来完成此操作，或者您可以使用JQuery的onclick事件。

现在使用$ _POST ['id']在getdata.php页面中获取Id，并将您的数据库数据返回到ajax成功并执行您想做的任何事情。

Answer 2

由于您使用的是jQuery，最简单的方法是使用.load()

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

Answer 3

这样做

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

从这里

了解：https://api.jquery.com/jQuery.ajax/

Answer 4

试试这个

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

Answer 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>

此代码正常工作，但假设我在数据库中有10,000个数据。此代码在加载后立即显示所有数据，但数据如何逐个显示依赖于加载时间，这意味着当一个项目加载然后显示和其他不断展示

如何使用Ajax加载内容

5 个答案: