如何在jQuery Ajax調用後呈現聰明

Question

我正在使用openinviter從gmail中檢索出效果很好的聯繫人。不過，當我使用jQuery調用Ajax調用來提交表單來檢索聯繫人時，smarty不會呈現。看來smarty只會呈現我不想做的頁面重新加載。所以，我的問題是如何在jQuery Ajax調用之後進行smarty渲染？

jQuery的AJAX調用

$(document).ready(function(){ 
$('input[name="Submit"]').click(function() { 
var query = $('#frmContact').serialize(); 
    $.ajax({type: "POST",url: "google_friends.php",data: query,cache: false,success:function (html) $('#errid').html('<span style="font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#FF0000;">'+html+'</span>').show();}});   
    return false;});}); 
</script> 

    <div> 
    <!--- Smarty code that needs to render after jquery ajax call --> 
    {if count($contacts) == 0 } 
    <span id="errid" >{$msg}</span> 
     <p> 
    <!-- Form that is used by jquery ajax --> 

    <form class="Form StaticForm" id="frmContact" action="" name="frmContact" method="post"> 
    <input type="hidden" name="provider_box" value="gmail" /> 
       <ul> 
        <li> 
         <input type="text" name="email_box" value="email" onBlur="if  (this.value=='') this.value='email';" onFocus="if(this.value=='email') this.value='';" /> 
        </li> 
        <li> 
         <input type="password" name="password_box" value="password" onBlur="if(this.value=='') this.value='password';" onFocus="if(this.value=='password') this.value='';" /> 
        </li> 

        <li class="noBorderTop"><input class="Button WhiteButton Button18 trueB" type="button" value="Submit" name="Submit" /> 
         <label> 
          &nbsp;</label> 
        </li> 
       </ul> 
       </form>  
    </p> 
     <!-- smarty code that needs to render after ajax call --> 
     {else} 
     <span id="errid" ></span> 
      <p> 
     <form class="Form StaticForm2" action="" name="invtfrm" method="post"> 
       <ul> 
        <li style="float:left;margin-left:120px;">       
        <input type="checkbox" name="checkall" onClick="return doCheckAll();" style="vertical-align:0" />&nbsp;Select All 

        </li> 
        <li style="float:left;"><div class="box-dividerCenter1 gradient"></div></li> 
      <!-- smarty code that needs to render after ajax call --> 
      {foreach from=$contacts key=fkey item=fval} 

       <li style="float:left;margin-left:120px;">       
        <input type="checkbox" name="email[]" value="{$fkey}" style="vertical-align:0"/>&nbsp; 
      <!-- smarty code that needs to render after ajax call --> 
       {$fval}&nbsp;&nbsp;&nbsp;&nbsp;{$fkey} 

        </li> 
         <li style="float:left;"><div class="box-dividerCenter1 gradient"></div></li>  
      {/foreach} 
      <li class="noBorderTop"><a class="Button WhiteButton Button18" href="#" id="sbmtbtn" ><strong>Invite</strong><span></span></a></li> 
    {/if} 
    </ul> 
    </form> 

Answer 1

有一個在你的假設一個邏輯上的錯誤。

Smarty的是僅網頁時實際加載（或重新加載的）中使用，但不時與jQuery（或其它的js框架）Ajax請求被應答。基本上變量$contacts只會在頁面加載時被檢查，但不是，因爲您的JavaScript代碼中有一些響應事件。

使用ajax技術的一個主要原因實際上是避免重新加載頁面。

兩個更好的方法：

1. 使用你的JavaScript更改HTML容器的內容。 jquery manual section of .ajaxComplete()有幾個例子 如何做到這一點。只需申報一些空白的div容器，並填寫你想要的數據即可。
2. 您也可以通過ajax（fetch()-method）獲取一個完整的smarty模板並將其返回。這樣你就可以在程序邏輯和佈局之間實現更好的分離。