ajax和php二级联动,Laravel框架基于ajax实现二级联动功能示例

本文实例讲述了Laravel框架基于ajax实现二级联动功能。分享给大家供大家参考,具体如下:

1、html页面:

过期规则:

请选择规则

@foreach($rules as $rule)

{{ $rule->name }}

@endforeach

过期倍数:

请选择倍数

过期规则是在页面加载时,便已经从数据表中取出来放进去了:

$projects = Project::all();

$rules = Rule::all();

return view('key.create', compact('projects', 'rules'));

2、ajax代码:

$("#rule").change(function() {

$.post("{{ url('key/createTime') }}/"+$(this).find("option:selected").attr("rule_id"), {

"_token": "{{ csrf_token() }}"

}, function(data) {

$("#time").html("请选择倍数");

if(data.value == 0) { // 当选择请选择规则时,不会向下执行

return false;

}

$.each(data, function(i, time) {

$("#time").append("" + time.value + "");

});

$("#time").append("自定义");

});

});

当过期规则改变时,将id传到createTime()方法中

3、createTime()方法:

public function createTime($rule_id)

{ // 当选中的为请选择规则时,自己拼一个数据,当success时,判断

if ($rule_id == 0) {

return ['id'=>0, 'value'=>0, 'rule_id'=>0];

}

$times = Rule::find($rule_id)->time;

return $times;

}

对$times的处理:rule和time表是一对多的关系:

public function time()

{

return $this->hasMany(\App\Model\Time::class, 'rule_id', 'id');

}

4、效果:

1-1Z63021014MQ.png

1-1Z63021015aM.png

希望本文所述对大家基于Laravel框架的PHP程序设计有所帮助。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ajax 省市二级联动是一种常见的前端技术,它可以实现在选择省份后,自动加载该省份下的城市列表,从而实现省市二级联动的效果。下面是一个简单的实现步骤: 1. 在 HTML 页面中,定义两个下拉框,一个用于选择省份,一个用于选择城市。 2. 在 JavaScript 中,使用 Ajax 技术向服务器请求省份列表,并将其填充到省份下拉框中。 3. 当用户选择省份时,使用 Ajax 技术向服务器请求该省份下的城市列表,并将其填充到城市下拉框中。 下面是一个简单的代码示例: HTML 代码: ``` <select id="province"> <option value="">请选择省份</option> </select> <select id="city"> <option value="">请选择城市</option> </select> ``` JavaScript 代码: ``` // 请求省份列表 $.ajax({ url: '/api/provinces', success: function(data) { // 将省份列表填充到省份下拉框中 var $province = $('#province'); $.each(data, function(index, province) { $province.append('<option value="' + province.id + '">' + province.name + '</option>'); }); } }); // 当用户选择省份时,请求该省份下的城市列表 $('#province').on('change', function() { var provinceId = $(this).val(); if (provinceId) { $.ajax({ url: '/api/cities?provinceId=' + provinceId, success: function(data) { // 将城市列表填充到城市下拉框中 var $city = $('#city'); $city.empty().append('<option value="">请选择城市</option>'); $.each(data, function(index, city) { $city.append('<option value="' + city.id + '">' + city.name + '</option>'); }); } }); } else { // 如果用户选择了“请选择省份”,则清空城市下拉框 $('#city').empty().append('<option value="">请选择城市</option>'); } }); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值