更改产品的下拉值时如何使用Ajax获取产品变体的详细信息

Question

我用laravel创建了shop项目，并且有product和product_variants表...现在在产品单页中，我有一个选择框，即产品变体

例如：shirt1有两种颜色（两种变体），每种颜色的价格不同 ....我将这两种颜色加载到具有其ID的下拉选择中

例如：

主要产品网址：

example.com/product/spray-color

产品的绿色：

example.com/product/spray-color?detail=113

113是表中product_variant的ID

---

product_variant结构

id  -  product_id  -  variant_value  -  variant_type  - price

和一个示例：

id  -  product_id  -  variant_value  -  variant_type  - price
112        1               green           color         200
113        1               red             color         300

问题

当用户单击一种颜色而不刷新页面时，如何使用ajax（pjax）更改产品价格（在显示页面中）？并在url中推送状态详细信息