如何在tpl（template）文件OpenCart 2.3版中调用Ajax

Question

如何在tpl模板opencart 2.3版中调用ajax调用 我有带有数据的api控制器，需要将该数据发布到template（tpl）文件中。模板文件是tpl扩展名，我需要打开脚本标签，但是我不知道如何在tpl文件中使用它，以及如何使用功能定位端点？我提供我的代码。在控制器中，我有api文件夹和文件reifenmontage和功能get_marka_data（）...我如何在tpl文件中定位此数据？我知道tpl仅用于显示数据，但我必须这样做：/

public function get_marka_data() {

    $query = $this->db->query("
        SELECT mo.marka
        FROM " . DB_PREFIX . "model mo
        GROUP BY mo.marka
    ")->rows;

    $data = array_map(function($row){
        return array('value'=>$row['marka'],'label'=>$row['marka']);
    }, $query);

    if (isset($this->request->server['HTTP_ORIGIN'])) {
        $this->response->addHeader('Access-Control-Allow-Origin: ' . $this->request->server['HTTP_ORIGIN']);
        $this->response->addHeader('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
        $this->response->addHeader('Access-Control-Max-Age: 1000');
        $this->response->addHeader('Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With');
    }

    $this->response->addHeader('Content-Type: application/json');
    $this->response->setOutput(json_encode($data));
    var_dump($data);
}

Answer 1

   
<script type="text/javascript"><!--
$('#button-getdata').on('click', function() {
	$.ajax({
		url: 'index.php?route=extension/module/reifenmontage/get_marka_data',
		type: 'post',
		data: $('#reifenmontage-input select, #reifenmontage-input input'),
		dataType: 'json',
        beforeSend: function() {
            $('#reifenmontage-input').after('<div class="attention"><img src="catalog/view/theme/default/image/loading.gif" alt="" /> <?php echo $text_wait; ?></div>');
        },
		success: function(json) {
			$('.success, .warning, .attention, information, .error').remove();
			
			if (json['success']) {
				html = "<!-- Retrieved data -->\n";
				for (i in json['success']) {
				var element = json['success'][i];
 					console.log(element);
					html += "\t<tr><td>" + element['label'] + "</td><td align=\"right\">" + element['value'] + "</td></tr>\n";
				}
				$('#reifenmontage-output').html(html);				
			}	
		}
	});
});
//--></script>  

  <?php if($heading_title) { ?>
    <h2><?php echo $heading_title; ?></h2>
  <?php } ?>

  	<h2><?php echo $description_title; ?></h2>
	<?php echo $description; ?>

	<div id="reifenmontage-input" class="reifenmontage-input">
	  <form id="reifenmontage-input" method="post" enctype="multipart/form-data" class="form-horizontal">
	    <fieldset>
            <div class="form-group">
              <label class="control-label" for="datum"><?php echo $entry_begin_period; ?></label>
              <div class="input-group date">
                <input type="text" name="datum" value="<?php echo $current_day . '-' . $current_month . '-' . $current_year; ?>" data-date-format="DD-MM-YYYY" id="datum" class="form-control" />
                <span class="input-group-btn">
                <button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button>
                </span></div>
            </div>		
            <div class="form-group">
              <label class="control-label" for="entry-cyclus"><?php echo $entry_cyclus; ?></label>
              <select name="cyclus" id="entry-cyclus" class="form-control">
                <option value=""><?php echo $text_select; ?></option>
			    <?php 
				  for ($i=20;$i<43;$i++) {
					if ($i == 28) {
			    ?>
					<option value="<?php echo $i; ?>" selected="selected"><?php echo $i; ?></option>
			    <?php
					} else {
			    ?>
					<option value="<?php echo $i; ?>"><?php echo $i; ?></option>
			    <?php					
					}
				  }
			    ?>	
			    </select>
			 </div>	
		     <div class="buttons">
      		  <div class="pull-right">
				<input type="button" value="<?php echo $button_create; ?>" id="button-getdata" class="btn btn-default" />
			  </div>
		    </div>
	    </fieldset>
	  </form>
	</div>
		
	<div id="reifenmontage-output"></div>

对于php函数，将最后一部分更改为：

$json = array();

if ($data) {
    $json['succes'] = $data;
} else {
    $json['error'] = 'Sorry, no data !';
}

$this->response->addHeader('Content-Type: application/json');
$this->response->setOutput(json_encode($json));

用于从扩展程序/模块中的控制器检索数据的表单，输出ID和脚本的示例

Answer 2

在controller / api / reifenmontage.php中：

<?php
    class ControllerApiReifenmontage extends Controller {
        private $error = array();

        public function get_marka_data() {

        $json = array();

        if (isset($this->request->post['marka'])) {
            $marka_data_query = $this->db->query("SELECT mo.model FROM " . DB_PREFIX . "model mo WHERE mo.marka='" . $this->request->post['marka'] . "'");
            $marka_data = $marka_data_query->rows;
            $json['succes'] = $marka_data;
        } else {
            $json['error'] = 'Sorry, no data !';
        }

        $this->response->addHeader('Content-Type: application/json');
        $this->response->setOutput(json_encode($json));
        }
    }

带脚本的表格：

    <div id="reifenmontage-input" class="reifenmontage-input">
  <form id="reifenmontage-input" method="post" enctype="multipart/form-data" class="form-horizontal">
    <fieldset>
      <div class="form-group required">
        <label class="col-sm-4 control-label" for="input-marka">Marka</label>
        <div class="input-group col-sm-8">
            <select name="marka" id="input-marka" class="form-control">
              <option value="0">Select ...</option>
              <option value="AJP">AJP</option>
              <option value="APOLO">APOLO</option>
              <option value="APRILIA">APRILIA</option>
              <!-- All stored marka's -->
            </select>
        </div>
      </div>
    </fieldset>
    <div class="buttons">
      <div class="pull-right">
        <button type="button" class="btn btn-primary" id="button-getdata" data-loading-text="Loading ...">Get Data</button>
      </div>
    </div>

  </form>
</div>

<div class="col-xs-12 col-sm-3" style="margin-right:30px;"> 
  <div class="row"> 
    <select class="form-control" id="result"> 
    </select> 
  </div> 
</div>

<script type="text/javascript"><!--
$('#button-getdata').on('click', function() {
    $.ajax({
        url: 'index.php?route=api/reifenmontage/get_marka_data',
        type: 'post',
        data: $('#reifenmontage-input select'),
        dataType: 'json',
        beforeSend: function() {
            $('.success, .warning, .attention, information, .error').remove();
            $('#result').after('<div class="attention"><img src="catalog/view/theme/default/image/loading.gif" alt="" />Please wait ...</div>');
        },
        success: function(json) {
            if (json['error']) {
            $('#result').after('<div class="attention"><img src="catalog/view/theme/default/image/loading.gif" alt="" />' + json['error'] + '</div>');
            }
            if (json['success']) {
                for (i in json['success']) {
                var element = json['success'][i];
                    //console.log(element);
                    html = "\t<option value=\""+ element['model'] + "\">" + element['model'] + "</option>\n";
                    $('#result').append(html);  
                }

            }   
        }
    });
});
//--></script>  

Answer 3

新控制器/api/reifenmontage.php

<?php
class ControllerApiReifenmontage extends Controller {
    private $error = array();

    public function get_markas() {

    $json = array();

    $markas_query = $this->db->query("SELECT marka FROM " . DB_PREFIX . "model GROUP BY marka");
    $markas_data = $markas_query->rows;
    if ($markas_data) {
        $json['success'] = $markas_data;
    } else {
        $json['error'] = 'Sorry, no data !';
    }

    $this->response->addHeader('Content-Type: application/json');
    $this->response->setOutput(json_encode($json));
    }

    public function get_marka_data() {

    $json = array();

    if (isset($this->request->post['marka'])) {
        $marka_data_query = $this->db->query("SELECT mo.model FROM " . DB_PREFIX . "model mo WHERE mo.marka='" . $this->request->post['marka'] . "'");
        $marka_data = $marka_data_query->rows;
        $json['success'] = $marka_data;
    } else {
        $json['error'] = 'Sorry, no data !';
    }

    $this->response->addHeader('Content-Type: application/json');
    $this->response->setOutput(json_encode($json));
    }
}

以及模板/表单上的新脚本：

    <script type="text/javascript"><!--
function getMarkaData() {
    $.ajax({
        url: 'index.php?route=api/reifenmontage/get_marka_data',
        type: 'post',
        data: $('#reifenmontage-input select'),
        dataType: 'json',
        beforeSend: function() {
            $('.success, .warning, .attention, information, .error').remove();
        },
        success: function(json) {
            if (json['error']) {
            $('#result').after('<div class="attention"><img src="catalog/view/theme/default/image/loading.gif" alt="" />' + json['error'] + '</div>');
            }

            if (json['success']) {
                $('#result2').html('');
                for (i in json['success']) {
                var element = json['success'][i];
                    //console.log(element);
                    html = "\t<option value=\""+ element['model'] + "\">" + element['model'] + "</option>\n";
                    $('#result2').append(html); 
                }

            }   
        }
    });
}

function getMarkas() {
    $.ajax({
        url: 'index.php?route=api/reifenmontage/get_markas',
        dataType: 'json',
        type: 'post',
        beforeSend: function() {
            $('.success, .warning, .attention, information, .error').remove();
        },
        success: function(json) { 
            if (json['success']) {
                for (i in json['success']) {
                var element = json['success'][i]; 
                    html = "\t<option value=\""+ element['marka'] + "\">" + element['marka'] + "</option>\n";
                    $('#result').append(html);   
                }
            getMarkaData();
            }    
        }
    });         
}

//--></script>  

<script type="text/javascript">
   let selectItem = document.getElementById('pneu');
   let additionalRow = document.getElementById('additionalRow');
   function checkSelected() {
      if (selectItem.selectedIndex == "1") {
         additionalRow.style.display = 'none';
      } else {
         additionalRow.style.display = 'flex';
         getMarkas();
      }
   }

$('#result').on('change', function() {
    getMarkaData();
});

if ($('#pneu').val() != '1') {
    getMarkas();    
}
 </script>