2014-02-13 33 views
0

我想使用ajax和jquery加载我的数据库内容。我已经写了一个JavaScript,它工作正常,但我不能正确写入AJAX jQuery。任何人请给我一些例子?如何使用Ajax加载内容

我的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> 
+2

以http://api.jquery.com/jQuery.ajax/ –

回答

0

做这个

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

了解它 fr OM这里:https://api.jquery.com/jQuery.ajax/

+1

开头$(“#result”)。html(responseText); – Prashobh

+0

btw'$(“#result”)。innerHTML ='test''也可以工作。 – zzlalani

0

试试这个

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

你可以简单地使用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成功并执行任何您想要的操作。

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

此代码工作正常,但假设我有数据库。这个代码显示10000个数据在加载后一次,但它是如何可能的数据显示,所有数据通过一个负载时一个depent这意味着,当一个项目的负载则它显示和其他连续显示