写Ajax时遇到的坑

今天在写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="重置"/>&nbsp;<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="重置"/>&nbsp;<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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值