ajax提交表单为什么页面还跳转呢？-php教程-PHP中文网

ajax提交表单为什么页面还跳转呢？

php中文网

发布： 2016-06-06 20:09:23

原创

1464人浏览过

数据能提交也能返回。但是页面会跳转，跳转后的url是get形式的。

如:http://127.0.0.1:8080/MyBlog/Admin/Blog/insert?title=111&tags=111

<script type="text/javascript">
    $('#submit').on('click', function () {
        var action = $('#form1').attr('action');
        var title = $('#title').val();
        var tags = $('#tags').val();
        var content = $('#textarea1').val();
        $.post(
                action,
                {title: title, tags: tags, content: content},
                function (data) {
                    layer.msg(data.message, {
                        icon: data.icon,
                        time: 2000 //2秒关闭（如果不配置，默认是3秒）
                    });
                }
        );
    });
</script

登录后复制

 <div class="main-content">
        <div class="container">
            <div class="xb4">
                <h1 class="float-left text-black margin-large-bottom">写博客</h1>
                <form id="form1" action="{:U('Admin/Blog/insert')}" class="margin-large-top">
                    <div class="form-group">
                        <div class="field">
                            <input type="text" class="input" id="title" name="title" size="30" placeholder="标题"/>
                        </div>
                        <div class="field margin-big-top">
                            <input type="text" class="input" id="tags" name="tags" size="30"
                                   placeholder="关键字。多个关键字用,分开"/>
                        </div>
                    </div>
            </div>
            <div class="xb10">
                        <textarea name="content" id="textarea1" style="height:400px;max-height:500px;">
                            <p></p>
                        </textarea>
                <button id="submit" class="button border-black float-left margin-big-top">发表</button>
            </div>
            </form>
        </div>

登录后复制

        if(M('article')->add($add)){
            $data['message'] = '发布成功';
            $data['icon'] = 6;
            $this->ajaxReturn($data);
        }else{
            $data['message'] = '发布失败';
            $data['icon'] = 5;
            $this->ajaxReturn($data);
        }

登录后复制

回复内容：

数据能提交也能返回。但是页面会跳转，跳转后的url是get形式的。

如:http://127.0.0.1:8080/MyBlog/Admin/Blog/insert?title=111&tags=111

<script type="text/javascript">
    $('#submit').on('click', function () {
        var action = $('#form1').attr('action');
        var title = $('#title').val();
        var tags = $('#tags').val();
        var content = $('#textarea1').val();
        $.post(
                action,
                {title: title, tags: tags, content: content},
                function (data) {
                    layer.msg(data.message, {
                        icon: data.icon,
                        time: 2000 //2秒关闭（如果不配置，默认是3秒）
                    });
                }
        );
    });
</script

登录后复制

 <div class="main-content">
        <div class="container">
            <div class="xb4">
                <h1 class="float-left text-black margin-large-bottom">写博客</h1>
                <form id="form1" action="{:U('Admin/Blog/insert')}" class="margin-large-top">
                    <div class="form-group">
                        <div class="field">
                            <input type="text" class="input" id="title" name="title" size="30" placeholder="标题"/>
                        </div>
                        <div class="field margin-big-top">
                            <input type="text" class="input" id="tags" name="tags" size="30"
                                   placeholder="关键字。多个关键字用,分开"/>
                        </div>
                    </div>
            </div>
            <div class="xb10">
                        <textarea name="content" id="textarea1" style="height:400px;max-height:500px;">
                            <p></p>
                        </textarea>
                <button id="submit" class="button border-black float-left margin-big-top">发表</button>
            </div>
            </form>
        </div>

登录后复制

        if(M('article')->add($add)){
            $data['message'] = '发布成功';
            $data['icon'] = 6;
            $this->ajaxReturn($data);
        }else{
            $data['message'] = '发布失败';
            $data['icon'] = 5;
            $this->ajaxReturn($data);
        }

登录后复制

因为你提交的按钮是button，button的type默认是submit，当你点击按钮时，先触发ajax，接着执行form表单提交

那你得手动阻止跳转：

$('#submit').on('click', function(e) {
    e.stopPropagation();
    e.preventDefault();
    var action = $('#form1').attr('action');
    var title = $('#title').val();
    var tags = $('#tags').val();
    var content = $('#textarea1').val();
    $.post(
        action,
        {title: title, tags: tags, content: content},
        function(data) {
            layer.msg(data.message, {
                icon: data.icon,
                time: 2000 //2秒关闭（如果不配置，默认是3秒）
            });
        }
    );
});

登录后复制