使用form表單與後端互動
阿新 • • 發佈:2018-12-26
使用JQuery封裝的JS的話,需要匯入JQuery的JS,這好比在Java匯入別的JAR包一樣。
看下面的這段程式碼。
在JSP頁面上有
<form id="searchForm" name="searchForm" method="post" action="<c:url value="/actions/article/search"/> "> <div class="search"> <span>查詢條件:</span> <select name="conditionValue" id="conditionValue"> <option value="">--請選擇--</option> <option value="id">文章ID</option> <option value="author">作者</option> </select> <input type="text" id="searchValue" name="searchValue" placeholder="請輸入詳細內容"/> <input type="button" onclick="formSubmit()" value="搜 索"/> </div> </form>
點選button按鈕,觸發formSubmit()函式。在JQuery中,使用 $("#標籤id值").val() 獲取到這個標籤的值。
對於Form表單的話,可以先獲取到這個表單,在呼叫它的submit()函式。
還可以獲取到指定class標籤的值。$(".標籤class的值")
<script> function formSubmit(){ var conditionValue = $("#conditionValue").val(); var searchValue =$("#searchValue").val(); if(searchValue==null||searchValue==''){ return; } if(conditionValue==null||conditionValue==''){ return; } $("#searchForm").submit(); } </script>
在後臺接收Form表單的值的方式:
/** * 展示搜尋結果 * 然後去一個與當前頁面一模一樣的展示資料的頁面 * * @param conditionValue 引數是什麼,作者還是文章ID? * @param searchValue 如果是作者,作者的值是多少。如果是ID,那麼id的值又是多少 * @return 攜帶上處理結果,去search結果頁面 */ @RequestMapping(value = {URL_ARTICLE_SEARCH},method = {POST}) public ModelAndView articleSearch(@RequestParam("conditionValue")String conditionValue ,@RequestParam("searchValue")String searchValue){ LOGGER.info("conditionValue={}",conditionValue); LOGGER.info("searchValue",searchValue); ... }