写Ajax时遇到的坑

最新推荐文章于 2020-03-22 22:34:21 发布

bin929

最新推荐文章于 2020-03-22 22:34:21 发布

阅读量202

点赞数 1

分类专栏： ajax

本文链接：https://blog.csdn.net/bin929/article/details/101710375

版权

ajax 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

今天在写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>