如何在从AJAX接收到的智能模板中分配和显示数据？

Question

我无法在智能模板中分配和显示数据。我从AJAX接收数据。另外，在页面数据完全加载之前，我无法显示加载程序图像。有人能帮我吗？PHP代码：(match_question.php)

<?php 
  require_once("../../includes/application-header.php");

 $objQuestionMatch  = new QuestionMatch();
 $op          = $request['op'];

 if($request['subject_id']!="") 
    $subject_id = $request['subject_id'];
 if($request['topic_id']!="") 
    $topic_id = $request['topic_id'];

 switch($op) { 
    case "get_match_questions":

      if($subject_id !='' && $topic_id !='') { 
        $all_match_questions = $objQuestionMatch->GetSimilarQuestionsBySubjectIdTopicId($subject_id, $topic_id);//Here I'm getting the array containing data to be assigned to the smarty template
}
      $smarty->assign('all_match_questions', $all_match_questions);
      $smarty->assign('subject_id', $subject_id);
      $smarty->assign('topic_id', $topic_id);
      $smarty->display("match-question.tpl");
      die();

}


?>

匹配代码-质询.file(模板文件)：

<div class="breadcrumb-wrap">

{include file='resources-sub-menu.tpl'}

  <ul class="page-flow">
    <li><a href="#">Home</a><span>></span></li>
    <li>Questions</li>
  </ul>
</div>
<h1 class="c-heading"> Match Questions </h1>
<div class="c-grad-box fnShowData">
  <div class="form-wrapper">
    <form id="view_questions_form" name="view_questions_form" action="{$control_url}modules/questions/match_question.php">
      <input type="hidden" name="page" id="page" value="1" >
      <div class="w50">              
        <ul>
          <li>
            <label>Subjects</label>
            <div class="form-element">
              <select name="subject_id" id="subject_id" onchange="get_topics_by_subject(this.value, 'get_topics_by_subject_for_filter', '#topic_id'); return false;">
                <option value="">All</option> 
                {foreach from=$all_subjects item=subjects key=key} 
                <option value="{$subjects.subject_id}" {if $subject_id == $subjects.subject_id} selected="selected"{/if}>{$subjects.subject_name}</option>
                {/foreach}
              </select>
            </div>
          </li>
        </ul>
      </div>
      <div class="w50">              
        <ul>
          <li>
            <label>Topics</label>
            <div class="form-element">
              <select name="topic_id" id="topic_id">
                <option value="">All</option> 
                {foreach from=$all_topics item=topics key=key} 
                <option value="{$topics.topic_id}" {if $topic_id==$topics.topic_id} selected="selected"{/if}>{$topics.topic_name}</option>
                {/foreach}
              </select>
            </div>
          </li>
          <li>
            <div class="find-que-ans">
              <p class="custom-form"><label></label></p>
              <input type="button" class="c-btn submit_form" name="btn_submit" id="btn_submit" value="Match Questions" />
            </div>
          </li>                           
        </ul>
      </div>        
    </form>
  </div>
</div>
{if "" != $info_msg} <div class="c-msg-seccess"> {$info_msg} <a class="c-close fnClose" href="#"></a> </div>{/if}
<br/><br/>

<table width="100%" class="base-table tbl-practice" cellspacing="0" cellpadding="0" border="0" id="test">
  <tr class="evenRow">
    <th width="33%" style="text-align:center;" class="question-id">Que ID</th>
    <th width="33%" style="text-align:center;" class="question-id">Matching Que IDs</th>
    <th width="33%" style="text-align:center;" class="question-id">Percentage(%)</th>
  </tr>
{if $all_match_questions}
  {foreach from=$all_match_questions item=qstn key=key}   
    {if $qstn.similar_questions_ids_and_percentage}
      {assign var=counter value=1}
  <tr class="oddRow">
    <td class="question-id" align="center" valign="top">
      <a href="{$qstn.return_url}" title="View question" class="inline_view_question_detail">QUE{$qstn.question_id}</a>{if $qstn.question_appeared_count gt 0}-Appeared({$qstn.question_appeared_count}){/if}
    </td>
      {foreach from=$qstn.similar_questions_ids_and_percentage item=question key=q_no}
        {if $counter gt 1}
    <tr class="oddRow"><td class="question-id" align="center" valign="top"></td>
        {/if}
    <td class="question" align="center" valign="top">

        {if $question.question_id!=''}
      <a href="{$qstn.return_url}" title="View question" class="inline_view_question_detail">QUE{$question.question_id}</a>{if $question.question_appeared_count gt 0}-Appeared({$question.question_appeared_count}){/if}
        {if $question.question_appeared_count eq 0}
      <a id ="{$question.question_id}" href="#" class="c-icn c-remove delete_question"  title="Delete question"> Delete</a>{/if}
        {/if}

    </td>

    <td class="question" align="center" valign="top">
        {if $question.percentage!=''}{$question.percentage}{/if}
        {assign var=counter value=$counter+1}
    </td>
  </tr>
      {/foreach}               
    {/if}
  {/foreach}
{else}
  <tr>
    <td colspan="2" align="center"><b>No Questions Available</b></td>
  </tr>
{/if}
</table>

{literal}
<script language="javascript" type="text/javascript">
$(document).ready(function(){
  $(".inline_view_question_detail").colorbox({href:$(this).attr('href'),width:'auto', height:'auto'});


  $("#btn_submit").click(function() {

      var subject_id = $('#subject_id').val();                
      var topic_id = $('#topic_id').val();

      $.ajax({    //create an ajax request to load_page.php
        type: "POST",
        data: {
                'request_type': 'ajax',
                'op': 'get_match_questions',
                'subject_id' : subject_id,
                'topic_id': topic_id
            },
        url: "match_question.php",             
        dataType: "html",   //expect html to be returned                
        success: function(response){                   
            //$("#test").html(response); 
            //alert(response);
        }

    });
});
});    
</script>
{/literal}

Answer 1

对于图像加载，请使用以下代码：

您需要在ajax调用中定义beforeSend处理程序。这个处理程序将被调用，直到您收到来自服务器的响应.因此，不需要添加额外的js文件。

如下所示替换ajax代码：

$.ajax({    //create an ajax request to load_page.php
        type: "POST",
        data: {
                'request_type': 'ajax',
                'op': 'get_match_questions',
                'subject_id' : subject_id,
                'topic_id': topic_id
            },
        url: "match_question.php",             
        dataType: "html",   //expect html to be returned
        beforSend: function(){
            $("#image_loading_div").show();    
        }                
        success: function(response){
            $("image_loading_div").hide();                     
            //$("#test").html(response); 
            //alert(response);
        }

    });  

注意：使用id "#image_loading_div“创建div，并将图像加载到其中，默认情况下设置display:none。

Answer 2

用于使用PHP进行无麻烦的ajaxian样式页面更新，我建议使用基于PHP的框架沙贾克斯。为什么？

• 自动地将已注册的函数或方法公开为客户端的JavaScript方法
• 对现有代码的最小更改

使用$objResponse = new xajaxResponse();，可以使用许多方法来操作客户端，例如：

在客户端执行代码：

$objResponse->script("xajax_updateWall();");

在客户端清除元素：

$objResponse->clear("words","value");

在客户端显示警告：

$objResponse->alert($sErrMsg);

查看Xajax示例

在文件夹示例内部，找到一些简单的用法示例，例如示例乘法

为客户端AJAX请求注册一个函数或方法，如下所示：

require_once ("../../xajax_core/xajax.inc.php");

$xajax = new xajax("multiply.server.php");
$xajax->configure('javascript URI','../../');
$xajax->configure('debug', true);
$xajax->register(XAJAX_FUNCTION,"multiply");

在HTML页面中，调用注册的函数如下所示：

... onclick="xajax_multiply(document.getElementById('x').value, document.getElementById('y').value);return false;"...

下面是处理请求的方法：

function multiply($x, $y)
{
    $objResponse = new xajaxResponse();
    $objResponse->assign("z", "value", $x*$y);
    return $objResponse;
}

require("multiply.common.php");
$xajax->processRequest();