我使用脚本内联和胸里叶动作错误吗?要切换百里香叶的动作路径

Question

我的代码的可视化解释

我构建了一个Spring Boot应用程序，从搜索栏，我试图通过选择下拉按钮分别根据SKU和Make进行搜索，如图所示。默认情况下，代码正在搜索SKU没有问题，但我想从SKU来回切换，并从我的表单中制作和更改我的胸里叶动作路径。

<<p>库类/strong>(它由两个查询组成，基于SKU和Make进行搜索):

@Repository
public interface ExcelFileRepository extends JpaRepository<ExcelFile, Integer> {
@Query(value = "select * from excel_file e where e.sku like %:sku%", nativeQuery=true)
List<ExcelFile> findBySKU(@Param("sku") String keyword);
@Query(value = "select * from excel_file e where e.make like %:make%", nativeQuery=true)
List<ExcelFile> findByMake(@Param("make") String keyword);

}

服务类:

public List<ExcelFile> findBySKU(String keyword)
{
return efRepository.findBySKU(keyword);
}
public List<ExcelFile> findByMake(String keyword)
{
return efRepository.findByMake(keyword);
}

控制器类:

@Controller
public class DBController 
{
@Autowired
private ExcelFileService efService;
@GetMapping(path={"/dbs","/searchSKU"})
public String findAll(ExcelFile e,Model model, String keyword) {
List<ExcelFile> dbList;
if(keyword == null)
{
dbList = efService.getAllData();
}else {
dbList = efService.findBySKU(keyword);
}

model.addAttribute("dbs", dbList);
return "Db";
}
@GetMapping(path="/searchMake")
public String searchMake(ExcelFile e,Model model, String keyword) {
List<ExcelFile> dbList;
if(keyword == null)
{
dbList = efService.getAllData();
}else {
dbList = efService.findByMake(keyword);
}

model.addAttribute("dbs", dbList);
return "Db";
... more code...
}

HTML文件

<form name="searchForm" id="searchForm" th:action="@{/searchSKU}">
<div class="row">
<div class="col-sm-12 col-md-5">
<label>Search by </label>
<select name="searchTypes">
<option>-SELECT-</option>
<option th:value="searchSKU" id="searchSKU">SKU</option>
<option th:value="searchMake" id="searchMake">MAKE</option>
</select>
</div>
<div class="col-sm-12 col-md-4">
<input type="search" class="form-control form-control-sm" name="keyword"
th:value="${keyword}">
</div>
<div class="col-sm-12 col-md-2">
<input type="submit" class="btn-success">
</div>
</div>
</form>
<script th:inline="javascript">
var makeAction = /*[[@{/searchMake}]]*/ '/searchMake';
var skuAction = /*[[@{/searchSKU}]]*/ '/searchSKU';
$("#searchTypes").change(function () {
if ($(this).val() == "searchMake") {
$("#searchForm").attr("action", makeAction);
}else if ($(this).val() == "searchSKU") {
$("#searchForm").attr("action", skuAction);
}
});
</script>

任何有内联脚本经验的人都知道如何处理胸苷嘧啶和改变动作路径?

Answer 1

更新:

工作方式是创建两个不同的搜索方法:

1. with path = searchSKU(从/dbs断开)
2. with path = searchMake

HTML:(默认按SKU搜索。增加了一个重置按钮，以进入主库存页面)

<form name="searchForm" id="searchForm" th:action="@{/searchSKU}">
<div class="row">
<div class="col-sm-12 col-md-5">
<label>Search by </label>
<select name="searchTypes" id="searchTypes">
<option disabled>-SELECT-</option>
<option value="searchSKU" id="searchSKU">SKU</option>
<option value="searchMake" id="searchMake">MAKE</option>
</select>
</div>
<div class="col-sm-12 col-md-4">
<input type="search" class="form-control form-control-sm" name="keyword" th:value="${keyword}">
</div>
<div class="col-sm-12 col-md-2">
<input type="submit" class="btn-success">
</div>
</div>
</form>
<div class="col-sm-12 col-md-1">
<a class="btn btn-primary btn-sm" id="resetButton" th:href="@{/dbs}">Reset</a>
</div>

脚本内联到相同的HTML:

<script th:inline="javascript">
/*<![CDATA[*/
var skuAction = /*[[@{/searchSKU}]]*/ '/searchSKU';
var makeAction = /*[[@{/searchMake}]]*/ '/searchMake';
$("#searchTypes").change(function () {
if ($(this).val() == "searchMake") {
$("#searchForm").attr("action", makeAction);
} else if ($(this).val() == "searchSKU") {
$("#searchForm").attr("action", skuAction);
}
});

/*]]>*/
</script>

现在的问题是，从主库存页面，从'SKU' dropbox选项改为'Make' dropbox选项在第一次尝试工作完全正常。在第一次尝试之后，当您再次搜索make时，它会再次重定向到searchSKU方法。以下图片为示例:

第一次尝试:第一次尝试IMAGE

正如你在图片中看到的，圈出的'searchMake'将变回'searchSKU'，当我重新点击下拉选项时，它将不再工作。