Laravel 中使用 Ajax 的 Jquery ui slider

Question

我正在尝试使用jquery ui(范围) slider 和ajax，根据用户的价格范围过滤产品。 Jquery ui slider 、路由和 Controller 排列正确，但 ajax 未连接它们。以下是我的代码:

slider html 代码:

<h4>Filter by:</h4>
<p>
  <label for="amount">Price:</label>
  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>

我想用ajax更改HTML代码:

@foreach( $proucts as $product)
 <div class="col-md-4 col-sm-4">
   <img src="{{$product->image}}">
   <p>{{$product->name}}-{{$product->price}}</p>
 </div>
@endforeach

Jquery slider 功能与ajax

$( function() {
  $( "#price-range" ).slider({
    range: true,
    min: 0,
    max: 3500,
    values: [ 75, 1500 ],
    slide: function( event, ui ) {
      $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
      var value1 = ui.values[0];
      var value2 = ui.values[1];

      $.ajax({
        type: "GET",
        url: "price.filter",
        data: "value1="+value1+"&value2="+value2,
        cache: false,
        success: function(html){
          $('public.products.list');
        }
      });
    }
  });
  $( "#amount" ).val( "$" + $( "#price-range" ).slider( "values", 0 ) +
  " - $" + $( "#price-range" ).slider( "values", 1 ) );
});

我的路线:

Route::get('filterprice/{min}/{max}', 
          ['as' => 'price.filter',
          'uses' => 'PublicController@filterPrice']);

我在 Controller 中的方法:

public function filterPrice($min, $max)
{
    $filter = DB::table('products')
                ->whereBetween('price', 
                 [use($min), use($max)])
                ->get();

     return view('public.products.list')->withTours($filter);
}

如果有人能分享对此的想法，我将非常感谢。

Answer 1

您的代码存在多个问题，所有这些问题都指向同一根本问题，这解释了您在此问题中遇到的问题以及您最近提出的许多其他问题 .

您的问题是您不了解您正在使用的不同类型代码之间的区别。在这个问题的代码中，您可以自由地将为 Laravel 编写的 PHP 代码(在服务器上运行)与为 jQuery 编写的 JavaScript 代码(在 Web 浏览器中运行)混合使用。/em>.在another question的代码中，你混合了Laravel模板语言blade转换为常规 PHP 代码。

为了避免将来出现类似问题，您需要更多地关注什么类型的代码属于什么位置以及这些不同的代码如何相互交互。

<小时/>

首先，jQuery 不知道 Laravel 中的路由名称，因此您的 AJAX 调用不会到达正确的 URL。您也没有正确向 URL 提供参数。

有很多潜在的方法可以解决这个问题，但我只会给你其中一种

而不是发送min和max作为 URL 的“路径”部分的一部分，将它们作为查询字符串发送。

路线

Route::get('filterprice', 
      ['as' => 'price.filter',
      'uses' => 'PublicController@filterPrice']);

JavaScript

$( function() {
  $( "#price-range" ).slider({
    range: true,
    min: 0,
    max: 3500,
    values: [ 75, 1500 ],
    slide: function( event, ui ) {
      $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
      var value1 = ui.values[0];
      var value2 = ui.values[1];

      $.ajax({
        type: "GET",
        url: "filterprice",
        data: "min="+value1+"&max="+value2,
        cache: false,
        success: function(html){
          $('public.products.list');
        }
      });
    }
  });
  $( "#amount" ).val( "$" + $( "#price-range" ).slider( "values", 0 ) +
  " - $" + $( "#price-range" ).slider( "values", 1 ) );
});

Controller

use Illuminate\Http\Request;

...

public function filterPrice(Request $request)
{
    // You should also add input validation here.

    $filter = DB::table('products')
                ->whereBetween('price', 
                 [$request->input('min'), $request->input('max')])
                ->get();

     return view('public.products.list')->withTours($filter);
}

<小时/>

其次，您永远不会将 AJAX 调用的结果填回到页面中。您的代码仅显示 $('public.products.list');在 success函数，它没有做任何有用的事情。 (它实际上做的是查找类似 <public class="products list"></public> 的 HTML 元素并返回指向它们的指针数组，这显然不是您想要做的。)

假设页面上的结果被 <div id="productList">...</div> 包围，这就是您需要的success JavaScript 中的函数如下所示:

success: function(html) {
    $("#productList").html(html);
}