当用户使用 ajax 在 laravel 中选择任何下拉值时，如何立即显示数据库详细信息？

Posted 2023-03-14

【中文标题】当用户使用 ajax 在 laravel 中选择任何下拉值时，如何立即显示数据库详细信息？

【英文标题】：How to display database details immediately when user choose any dropdown value in laravel using ajax?

【发布时间】：2021-08-01 10:00:05

【问题描述】：

我想显示所选下拉列表中的详细信息。所有细节都来自数据库。问题是，当用户选择 1 个下拉值时，价格没有显示。我错过了哪一部分？这是我的代码：

路线：

Route::get('/prodview', [OrderController::class, 'prodfunct']);
Route::get('/findPrice', [OrderController::class, 'findPrice']);

控制器：

public function prodfunct()

    $prod=DB::all();//get data from table
    return view('orders.order',compact('prod'));//sent data to view


public function findPrice(Request $request)

    //it will get price if its id match with product id
    $p=DB::select('select price from pastas')->where('id',$request->id)->first();
    
    return response()->json($p);

查看：

<span>
                            <x-label for="pastaingredient" :value="__('Pasta Ingredient: ')" />
                            <x-input id="pastaingredient" style="font-size:14px;" class="pasta_ingredient" type="text" name="pastaingredient" value=" old('pasta_ingredient') " disabled />
                        </span>
                        
                        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

                        <script type="text/javascript">
                            $(document).ready(function()
                            
                                $(document).on('change', '.pastas', function() 
                                
                                    var ingredient = $(this).find("option:selected").data("ingredient");
                                    $('.pasta_ingredient').val(ingredient);
                                );
                            );
                        </script>

【问题讨论】：

嗨，data 给你正确的值吗？在ajax的success函数里面做console.log(data)看看它的表现。

另外，为什么不干脆做$('.prod_price').val(data.price);？

@swati 在我的控制台中 --> app.js:18406 GET homestead.test/findPrice?id=Spicy%20Chicken%20Arrabiata 500

你的服务器端有错误。

不，我可能完全错了.. 但是，这里 value=" $pizzaitem->name " 您有名称分配，并且在您的后端您将其与 id 进行比较？

【参考方案1】：

实现此目的的其他方法是将价格值存储为data-attribute，然后每当用户从选择框中选择任何值时，您都可以简单地使用$(this).find("option:selected").data("price") 从选项中获取值。

所以，您只需将data-price=" $pizzaitem->price " 添加到您的选项中，即：

<option @if(old('pastas') == $pizzaitem->name) selected @endif value=" $pizzaitem->name " data-price=" $pizzaitem->price "> $pizzaitem->name </option>

然后，您的 jquery 代码将如下所示：

$(document).on('change', '.pastas', function() 
var price = $(this).find("option:selected").data("price");
$('.prod_price').val(price);
);

【讨论】：

但是当用户没有完成表单并意外点击提交按钮时，如何让它留在文本框中，验证发生正确

不起作用...

那是哪个输入框？另外， old('pasta_ingredient') 有什么？

意大利面的配料会放在这个输入框中。我以为它会调用ID，但它不起作用。

我不知道这与您当前的问题或其他问题有关吗？

【参考方案2】：

函数 var a=$(this).parent(); 返回this 的直接父级。在这种情况下，a 就是这个 div：

<div>
            <x-label for="pastas" :value="__('Choose pastas:')" />
                        <select name="pastas" id="pastas" class="pastas">
                            <option @if(!old('pastas')) selected @endif disabled>Please choose</option>
                                @foreach ($pastainfo as $pizzaitem)
                                    <option @if(old('pastas') == $pizzaitem->name) selected @endif value=" $pizzaitem->name "> $pizzaitem->name </option>
                                @endforeach
                        </select>
      </div>

所以在这一行 a.find('.prod_price').val(data.price); JQuery 只在 a div 中找到 prod_price 并且看不到它导致此错误。

【讨论】：

好的，我明白了，那我实际上需要改变什么？我很迷茫，这个代码做了 3 天 LOL

请将此答案标记为有用，如果它可以帮助您修复此错误并且我知道这是正确的解决方案。

我不明白，我应该更改哪个部分@Freeman？

将这一行：a.find('.prod_price').val(data.price) 替换为这一行：$('.prod_price').val(data.price);

我已经编辑了我的问题编码。它没有显示价格....