我对 codeigniter 和 Ajax 还很陌生。
我需要在从下拉选项中选择后显示数据，而不需要重新加载页面/提交按钮。它在选择选项后显示，因为我能够正确显示选项的数据，现在我只需要在两个单独的字段上显示基于该选项的数据。
例如：
包：包1
描述：它是某物
jadwal：即将宣布
选项是产品，我需要在其单独字段中显示的选项是
descriptionjadwal这是我的视图代码：
//this is the code for the options
<div class="form-group">
<label for="paket">Pilih Paket</label>
<select class="form-control form-control-sm" name="paket" id="paket">
<option value="">Pilih Paket</option>
<?php
foreach ($datatour as $dttour)
{
if ($id==$dttour->id)
{
$s='selected';
}
else
{
$s='';
}
?>
<option <?php echo $s ?> value="<?php echo $dttour->id;?>"><?php echo $dttour->paket;?></option>
<?php
}
?>
</select>
</div>
<div class="row">
<div class="col-md-8" align="left">
<label for="jadwal">Jadwal</label>
<div style="border:1px solid #ccc;text-align:left;background-color:white;">
// this is where i display the jadwal data
</div>
</div>
</div>
<div class="kolom" style="border:1px solid #ccc;background-color:white;overflow:auto;" align="center">
<div class="row">
<h3>Detail Paket</h3> <br>
// this is where i display the description data
<p></p>
</div>
</div>
我还没有为模型和控制器编写任何代码，任何对过程的帮助和解释（如果这没什么可问的）将非常感激，谢谢。
将您的视图分成两个视图：
第一个视图：在文件夹sandbox_v中命名为sand_main.php
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="form-group">
<label for="paket">Pilih Paket</label>
<select class="form-control form-control-sm" name="paket" id="paket">
<option selected value="">Pilih Paket</option>
<option value="123">123</option>
<option value="324">566</option>
<option value="555">333</option>
<!-- I've used my own code, for checking the result, you should use your:
<option value="">Pilih Paket</option>
<?php
foreach ($datatour as $dttour)
{
if ($id==$dttour->id)
{
$s='selected';
}
else
{
$s='';
}
?>
<option <?php echo $s ?> value="<?php echo $dttour->id;?>"><?php echo $dttour->paket;?></option>
<?php
}
?>
-->
</select>
</div>
<div id="info"></div>
接下来应该是 JS：
<script type="text/javascript">
$(function(){
$('#paket').unbind('change');
$('#paket').change(function(){
var opt_sel = $('#paket').val();
$.ajax({
method:"POST",
url:'/index.php/sandbox/s1',
data:{
sel_op:opt_sel
}
}).done(function(a){
$('#info').html(a);
}).fail(function(){
alert("It's an epic fail.");
});
});
})
</script>
第二个视图：在文件夹sandbox_v中命名为sand_view_2.php
<div class="row">
<div class="col-md-8" align="left">
<label for="jadwal">Jadwal</label>
<div style="border:1px solid #ccc;text-align:left;background-color:white;">
<?= $j_info; ?>
</div>
</div>
</div>
<div class="kolom" style="border:1px solid #ccc;background-color:white;overflow:auto;" align="center">
<div class="row">
<h3>Detail Paket</h3> <br>
<?= $d_info; ?>
<p></p>
</div>
</div>
控制器：在我的示例中sandbox.php
<?php
class Sandbox extends CI_Controller {
public function __construct() {
parent::__construct();
}
public function index() {
// here you should get your $datatour data
$this->load->view('sandbox_v/sand_main.php', [
'datatour' => $datatour
]);
}
public function s1() {
$sel_val = $this->input->post('sel_op');
/*you can use your DB for getting a description for each value
* in this case you should add in __construct() your model as $this->load->model('your_model);
* or use your DB connection directly here.
*/
/* with your model:
* $jdwal_info = $this->your_model->your_jdwal($sel_val);
* $detail_info = $this->your_model->your_detail($sel_val);
*/
// without. It means that you've got info in the other way, for example, in predefined way:
if ($sel_val == 555) {
$jdwal_info = 'descr 1';
$detail_info = 'detail 1';
} else if ($sel_val == 123 ) {
$jdwal_info = 'descr 123';
$detail_info = 'detail 123';
} else if ($sel_val == 324 ) {
$jdwal_info = 'descr 324';
$detail_info = 'detail 324';
} else {
$jdwal_info = 'descr N\A';
$detail_info = 'detail N\A';
}
$this->load->view('sandbox_v/sand_view_2.php',[
'j_info' => $jdwal_info,
'd_info' => $detail_info
]);
}
}
模型：命名为your_model.php
<?php
class Your_model extends CI_Model {
function __construct()
{
$this->load->database();
}
public function your_jdwal($a) {
// process of getting result from DB over input variable $a (the name of it doesn't matter)
return $res;
}
public function your_detail($a) {
// process of getting result from DB over input variable $a (the name of it doesn't matter)
return $res;
}
}
检查一下。它对我有用。
尝试实现这段代码，参考W3schools Jquery
$(document).ready(function(){
$("#btn_form_submit").click(function(){
$.ajax({
cache:false,
type:"POST"
//equivalent of action attribute in form tag
url:"path/to/your/php/"
data: $("my_form").serialize(),
success: function(data){
//returns data from php if success
}
});
});
});