在laravel中返回json结果在同一页面

Question

我在搜索到的同一页面中将搜索结果作为json返回时遇到问题，

这是我对search page的功能

public function track(Request $request){
    return view('front.track');
}

这是route for it：

Route::get('/track', 'frontend\FrontendController@track')->name('track');

这个功能对get results of my search

public function shippingcode(Request $request){
    $rajaongkir = new Rajaongkir\Domestic('xxxxxxxxxxxxxxxxxxxxxxxxxxx');
    $shippingcode = $request->input('shippingcode');
    $item = Order::where('shippingcode', $shippingcode)->first();
    $courier = $item->courier;
    $results = $rajaongkir->waybill($shippingcode, $courier);
    return response()->json($results);
  }

这是route for it：

Route::post('/shippingcode', 'frontend\FrontendController@shippingcode')->name('shippingcode');

最后这是我的刀片中的search form：

<form class="form-inline text-center" action="{{route('shippingcode')}}" method="post">
  {{csrf_field()}}
  <lable>Shipping Code #</lable>
  <input type="text" class="form-control" name="shippingcode" placeholder="93657275025">
  <button class="btn btn-success" id="submit" type="submit" name="button">Track</button>
</form>

Issue

问题是除了在表单底部获取结果之外我将重定向到另一个页面并将结果视为JSON。

任何的想法？

UPDATE

我已经将jquery添加到我的页面以获得结果但仍然会重定向到另一个页面：

JavaScript

<script type="text/javascript">
  $(document).ready(function() {
    $('button[id="submit"]').on('click', function() {
      $.ajaxSetup({
          headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') }
      });


      $.ajax({
        url: '{{ url('shippingcode') }}',
        type: "GET",
        dataType: "json",
        success:function(data) {
            $('div#results').empty();
            $("div#results").html(data);
        }
      });

    });
  });
</script>

并添加了我的形式<div class="col-md-8 col-md-offset-2" id="results"></div>的div底部

Answer 1

您需要阻止表单的默认操作，即通过POST方法将表单提交到提供的操作URL。尝试添加 -

$('button[id="submit"]').on('click', function(e) {
    e.preventDefault();
    // Your own login
});

Answer 2

SOLVED

注意：单独使用e.preventDefault();根本不会有任何帮助，但是必须拥有它。

我是这样做的：

首先，我将我的功能更改为以下代码：

public function shippingcode($code){
    $rajaongkir = new Rajaongkir\Domestic('xxxxxxxxxxxx');
    $shippingcode = $code;
    $item = Order::where('shippingcode', $shippingcode)->first();
    $courier = $item->courier;
    $results = $rajaongkir->waybill($shippingcode, $courier);
    return response()->json($results);
  }

然后我将我的route从POST改为GET并将我的{code}添加到其中（查看我的函数）。

Route::get('/shippingcode/{code}', 'frontend\FrontendController@shippingcode');

最后，我将我的JavaScript代码更改为以下代码。 here I used e.preventDefault();，但要注意我如何得到我的按钮。

<script type="text/javascript">
  $(document).ready(function() {
    $('#submit').on('click', function(e) {
      e.preventDefault();
      $.ajaxSetup({
          headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') }
      });
      var shippingcodedd = $("#code").val();
      if(shippingcodedd) {
      $.ajax({
        url: '{{ url('shippingcode') }}/'+encodeURI(shippingcodedd),
        type: "GET",
        dataType: "json",
        success:function(data) {
            $('div#results').empty();
            var summar = data.data.summary;
            $('div#results').append('Data prints here!');
        }
      });
      }else{
        $('div#results').empty();
        $('div#results').append('Sorry there is no info regarding to your tracking code in our system!');
      }
    });
  });
</script>

PS：这里只是为了完整性我的form HTML代码：

<form class="form-inline text-center" action="" method="post">
  {{csrf_field()}}
  <lable for="shippingcode">Shipping Code #</lable>
  <input type="text" id="code" class="form-control" name="shippingcode" placeholder="93657275025">
  <button class="btn btn-success" id="submit" name="button">Track</button>
</form>

希望它能帮到别人。