JQ提交form表單的注意事項
阿新 • • 發佈：2018-12-27
一，問題
1.1 問題描述
最近在使用JQ的方式來提交form表單的時候，發現數據怎麼樣都傳不過去後臺那邊。檢查了後臺那邊是沒問題的，那就是傳遞引數的時候出問題了。
1.2 程式碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>修改使用者資訊</title> </head> <body> <div class="OutContainer"> <h2 class="headerFont">修改使用者資訊</h3> <form id="formId" action="wordConfigListController/updateUserMessage.jhtml" method="post"> <table class="OutTable"> <tr> <th></th> <th>使用者資訊</th> </tr> <tr> <td>使用者名稱</td> <td><input type="text" id="userName" style="border:none" value="${userMessage.userName}"/></td> </tr> <tr> <td>描述</td> <td> <input type="text" id="userDesc" value="${userMessage.userDesc}"/> <input type="hidden" id="userId" value="${userMessage.userId}"/> </td> </tr> </table> </form> <div> <span class="submitBtn" id="submitBtn">提交</span> <span class="backBtn">返回</span> </div> </div> </body> <script> $(function () { //提交表單 submitForm(); }) //提交表單 function submitForm() { $("#submitBtn").click(function () { var userName = $("#userName").val(); var userDesc = $("#userDesc").val(); if (userName.trim() == "" || userDesc.trim() == "") { alert("輸入不能為空！"); $("#userName").val(""); $("#userDesc").val(""); } else { $("#formId").submit(); } }) } </script> </html>
二，解決方案
其實這個邏輯是很簡單的，但可能是很久沒有用這種方式來提交form表單了。後來對比了一下來發現，原來上面的欄位中，都缺少了name屬性。導致後臺無法接受到前端資料。
使用這種方式去提交form資料，需要有：
①路徑action
②請求方式method
③input框中name屬性