问题

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>

问题

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

任何想法？

更新

我已将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

解决

注意：然而，单独使用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>

希望对别人有所帮助。

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

问题

更新

2 个答案:

解决