使用ajax的post方式提交表单最后还是变成get方式

HTML部分代码：

<form class="form-horizontal" role="form" id="form1">
        <div class="form-group"&gt;
            <label class="col-sm-5 control-label"&gt;所属区域</label&gt;
            <div class="col-sm-7"&gt;
                <select class="form-control" style="width: 35%;" name="area"&gt;
                    <option value="金华">金华</option>
                    <option value="杭州">杭州</option>
                </select>
            </div>
        </div>
    <button class="btn btn-default" type="submit" style="width: 110px" id="button1">开始运行</button>
</form>

JS部分代码：

$("#button1").click(function () { // assuming submit button as id btn
        $.ajax({
            type: "POST", //
            url: "/handler", // url to the function
            data:$("#form1").serialize(),
            success: function (response) {
                // $("#update_logger").html(response) // manipulate the dom
                // localStorage.setItem("log", response);
                console.log(response);
            },
        });
    });

ajax的提交方式是POST，这样点击按钮提交之后却变成了GET方式。查阅资料后发现，原来需要在表单onsubmit设置return false。

修改代码：

<form class="form-horizontal" role="form" id="form1" onsubmit="return false">

之后测试，代码OK！

代码007普通

打赏 收藏 海报 链接