码

Question

我要做的是创建一页结帐，而我收到快递费的部分则面临问题。

我想将目的地城市ID发送给控制器并从控制器获取成本结果，以便让用户选择他/她想要运送他/她产品的方式。

来自某个实时网站的示例：

Imgur
Ibb

我正在使用第三方网站数据，没有任何内容存储在我的数据库中作为country province city methods甚至是shipping prices

码

我的页面index功能（一切都会显示

）

public function index(Request $request) {
      $rajaongkir = new Rajaongkir\Domestic('xxxxxxxxxxxxxxx');
      $province = $rajaongkir->province();
      return view('front.raja', compact('province'));
}

route：

Route::get('/raja', 'RajaongkirController@index')->name('raja');

我的cities功能（根据所选省份获取城市列表）：

public function getCityList($province)
{
   $rajaongkir = new Rajaongkir\Domestic('xxxxxxxxxxx');
        $city = $rajaongkir->city($province);
        return response()->json($city);
}

route：

Route::get('/get-city-list/{province}','RajaongkirController@getCityList');

Cost数据函数（这里应该根据所选城市返回价格方法）：

public function indexajax(Request $request, $cityID) {
          $rajaongkir = new Rajaongkir\Domestic('xxxxxxxxxxxxx');
          $province = $rajaongkir->province();

          $origin = 152; //Jakarta
          $destination = $request->cityID;
          $weight = 1;
          $courier = 'tiki'; // jne, tiki, pos
          $cost = $rajaongkir->cost($origin, $destination, $weight, $courier);
          return view('front.raja', compact('province', 'cost'));
}

route：

Route::get('/rajaajax/{cityID}', 'RajaongkirController@indexajax');

PS：来自ajax的City Id应该是值的 $destination我放$destination = $request->cityID;

视图

此部分显示2个选择输入，我选择provinces和cities

//HTML
<select name="province" id="">
                <option class="form-control" value="">Select Province</option>
                        @foreach ($province->data as $info)
                            <option value="{{$info->province_id}}">{{$info->province}}</option>
                        @endforeach
                </select>

                <select name="city" id="">
                    <option class="form-control" value="">Select City</option>
                  </select>


//JavaScript

<script type="text/javascript">
$(document).ready(function() {
  $('select[name="province"]').on('change', function() {
    var provinceID = $(this).val();
    if(provinceID) {
    $.ajax({
      url: '{{ url('get-city-list') }}/'+encodeURI(provinceID),
      type: "GET",
      dataType: "json",
      success:function(data) {
      $('select[name="city"]').empty();
      $.each(data.data, function(key, value) {
          $('select[name="city"]').append('<option id="city_id" class="form-control" value="'+ value['city_id'] +'">'+ value['city_name'] + ' - ' + value['type'] +'</option>');
          });
      }
    });
    }else{
      $('select[name="city"]').empty();
    }
  });
});
</script>

成本视图代码

这是我的循环，用于显示城市ID（在静态$destination id上测试）

时的费用

Destination:
{{$cost->meta['destination']->province}}, //destination province
{{$cost->meta['destination']->type}}, //destination type such as city or restrict 
{{$cost->meta['destination']->city_name}}, //destination city name
{{$cost->meta['destination']->postal_code}}. //destination postal code 

@foreach($cost->data as $option)
<h3>{{$option->code}} <small>{{$option->name}}</small></h3>
  @foreach($option->costs as $cost)
   @foreach($cost->cost as $c)
    <label class="radio">
    <input name="post" value="{{ $c->value }}" type="radio">{{$cost->service}} / {{ $c->value }} Rp - {{ $c->etd }} hari @if(!empty($c->note))- {{ $c->note }} @endif
    </label>        
   @endforeach             
  @endforeach
@endforeach

结果如下：

PS ::我认为：成本部分必须在控制器中循环，因为当我把它放在刀片（用户没有选择城市，它给出了错误 undefined / non-object cost） - 只是想：）

任何人都知道如何在选择城市后获得该成本部分？

Answer 1

解决

我已将cost更改为：

return response()->json($cost);

并将此JS添加到我的观点中：

<script>
  jQuery( document ).ready( function( $ ) {
    $('body').on('change', 'select[name="city"]', function(e){
      $.ajaxSetup({
          headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') }
      });

       var cityID = $(this).val();
        if(cityID) {
            $.ajax({
              url: '{{ url('rajaajax') }}/'+encodeURI(cityID),
              type: "GET",
              dataType: "json",
              success:function(data) {
                $('#des').append(
                  '<p>Destination: ' + data['meta']['destination']['province'] + ' , ' + data['meta']['destination']['type'] + ' , ' + data['meta']['destination']['city_name'] + ' , ' + data['meta']['destination']['postal_code'] +'</p>'
                  );
                $.each(data.data, function(key, value) {
                  console.log();
                  $('#info').append('<h3>'+ value['code'] + '<small>' + value['name'] +'</small></h3>');
                    $.each(value.costs, function(key2, value2) {
                      $.each(value2.cost, function(key3, value3) {
                        $('select[name="postchoose"]').append('<option id="postchoose" class="form-control" value="'+ value3['value'] +'">'+ value2['service'] + ' - ' + value3['value'] + ' - ' + value3['etd'] +'</option>');
                      });
                    });
                });
              }
            });
        }else{
          console.log(data);
        }
    });
  });
</script>

还在我看来添加了这个：

<div id="calcul" style="margin-top: 30px;">
  <div id="des"></div>
  <dev id="info"></dev>
  <select name="postchoose" id="">
    <option class="form-control" value="">Select Shiping Method</option>
  </select>
</div>

但是我想要单选按钮而不是下拉菜单，但是可以：）。

希望对别人有所帮助。

laravel ajax在同一页面发送和返回

码

视图

成本视图代码

1 个答案:

解决