今天在寫Ajax實現異步刷新功能的時候遇到一些坑
先貼錯誤的代碼：
<script src="https://code.jquery.com/jquery-3.4.1.min.js" />
<script>
$.ajax({
type: "post",
contentType: "application/json",
url: "change/changeChannel",
data: $("#myform").serialize(),
dataType: "json",
async: false,
error: function (request) {
alert("提交出錯 error");
},
success: function (data) {
alert(data.message);
}
});
</script>
<body>
<div id="content">
<table>
<caption><p class="title">劃分老渠道數據</p></caption>
<thead>
<tbody>
<form id="myform" method="post">
<tr>
<td></td>
<td align="right">
<input class="button" type="reset" value="重置"/> <input class="button" type="submit" value="提交" onclick="toServer()"/>
</td>
</tr>
<tr>
<td><p>銀行：</p></td>
<td><input type="text" name="bankName"/></td>
</tr>
<tr>
<td><p>老渠道：</p></td>
<td><input type="text" name="oldChannelName"/></td>
</tr>
<tr>
<td><p>新渠道：</p></td>
<td><input type="text" name="newChannelName"/></td>
</tr>
<tr>
<td><p>月份：</p></td>
<td><input type="text" name="month" placeholder="yyyy-MM"/>
</td>
</tr>
<tr>
<td><p>調整量：</p></td>
<td><input type="text" name="count"/></td>
</tr>
</form>
</tbody>
</table>
</div>
</body>
</html>
三處錯誤：
1、<script src="https://code.jquery.com/jquery-3.4.1.min.js" />在引用jQuery的時候
引用時<script>的結尾不能直接在裏邊<script />一定要分開<script></script>;
如果在裏邊則在下邊進行onclick事件調用函數的時候無法調用函數。
2、將form表單數據格式化成json格式，網上搜了好多都是這樣寫的data: $("#myform").serialize(),，這種並不能將form表單內的數據直接格式化成json格式，格式化成的格式樣例可以上網搜一下；所以要進項替換掉：
var unindexed_array = $("#myform").serializeArray(); var param = {}; $.map(unindexed_array, function (n, i) { param[n['name']] = n['value']; }); data: JSON.stringify(param),
要用serializeArray()序列化並轉換成map格式，在轉換成json格式
3、form表單的提交按鈕<input class="button" type="submit" value="提交" onclick="toServer()"/>type類型用的是submit，這種可以直接提交form表單，但是與ajax使用的時候會將ajax運行完之後進行二次提交，也就是type=‘submit’ 還會在進行提交一次，實際上是ajax實際上已經運行過了之後又提交form表單，但是form表單沒有action屬性所以會報405，所以type還是要用butten屬性；
調整完後的代碼如下：
<script src="https://code.jquery.com/jquery-3.4.1.min.js" />
<script>
function toServer() {
var unindexed_array = $("#myform").serializeArray();
var param = {};
$.map(unindexed_array, function (n, i) {
param[n['name']] = n['value'];
});
$.ajax({
type: "post",
contentType: "application/json",
url: "change/changeChannel",
data: JSON.stringify(param),
dataType: "json",
async: false,
error: function (request) {
alert("提交出錯 error");
},
success: function (data) {
alert(data.message);
}
});
}
</script>
<body>
<div id="content">
<table>
<caption><p class="title">劃分老渠道數據</p></caption>
<tbody>
<form id="myform" method="post">
<tr>
<td></td>
<td align="right">
<input class="button" type="reset" value="重置"/> <input class="button" type="button" value="提交" onclick="toServer()"/>
</td>
</tr>
<tr>
<td><p>銀行：</p></td>
<td><input type="text" name="bankName"/></td>
</tr>
<tr>
<td><p>老渠道：</p></td>
<td><input type="text" name="oldChannelName"/></td>
</tr>
<tr>
<td><p>新渠道：</p></td>
<td><input type="text" name="newChannelName"/></td>
</tr>
<tr>
<td><p>月份：</p></td>
<td><input type="text" name="month" placeholder="yyyy-MM"/>
</td>
</tr>
<tr>
<td><p>調整量：</p></td>
<td><input type="text" name="count"/></td>
</tr>
</form>
</tbody>
</table>
</div>
</body>