背景
在學校安排的實習專案中，盡管我是走的后端方向，但是難免會碰到很多前端知識，且這也是我們后端需要掌握的一些，我想，有能力的話，盡量往全堆疊走，這樣選擇性會多點，好啦，言歸正傳，
我大致描述一下問題：
在設計一個表單的時候，里面還有多個發送驗證碼，上傳附件等組合場景，我的設計是，只用一個form作為一個表單，在填寫完所有資訊后再統一提交保存到資料庫，而發送驗證碼使用ajax異步實作，（這是課題老師要求的，我只好跟著做），由于自己對前端知識的匱乏，所以才遇到了這個問題：
- 在點擊發送手機驗證碼時候，我使用的是button：
具體如下：
<form class="la" id="sent" action="/codeSent" method="POST" enctype="multipart/form-data">
...
<label class="code_container">
<span class="code_label">驗證碼</span>
<input type="text" id="code" class="code" placeholder="請輸入手機驗證碼">
<input type="button" onclick="sub()" value="發送驗證碼">
</label>
...
</form>
- 對應的ajax:
<script th:inline="javascript">
function sub() {
$.ajax({
url: "/code",
type: "POST",
data: { "spareContactsName": $("#spareContactsName").val(),"spareContactsPhoneNumber":$("#spareContactsPhoneNumber").val()}, /*提交的資料（json格式），從輸入框中獲取*/
dataType:'json',
cache:false,
success:function (res)
{
alert(res.msg);
}
});
}
</script>
- 錯誤資訊如下：
- 打開除錯器查看：可看到跳轉的地址是form的action地址而不是ajax中的url，
- 原因分析：我想的是button 存在時會提交表單，當點擊發送按鈕時候，頁面就被重繪，因此走的是form中的action地址，
- 解決辦法：要想點擊按鈕提交，我還可以使用input的type設定：具體如下：
<input type="button" onclick="sub()" value="發送驗證碼">
- 結果如下：地址跳轉正確，且ajax能異步獲取后臺傳回的資料，
好啦，今天的分享就到此結束啦！后端的童鞋也要學好部分前端知識哦，盡量往全堆疊走哦！
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/304982.html
標籤：其他