1. 程式人生 > >使用form表單與後端互動

使用form表單與後端互動

        使用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);
        ...
     }