Question

我有一个包含两种表单的页面。我想通过AJAX提交这些表格（不是同时）。当我只使用一个表单时没有问题。当我为第二个表单添加第二个表单和事件时，它无法正常工作，我的意思是这个时间表单已提交，但不是由AJAX和页面重新加载。这是我的代码。

<!DOCTYPE html>
<html>
<head>
    <title>buz</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <script src="<?php echo base_url();?>js/jquery-1.8.3-min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('form#shorten').submit(function(event){
                var form = $(this);
                $.ajax({
                    type: form.attr('method'),
                    url:  form.attr('action'),
                    data: form.serialize()
                    }).done(function(text){
                        var response = text;
                        $('#shorten_msg').html(response);
                    }).fail(function(){
                        //alert fail
                        alert('sorry failed somehow')
                    });
                event.preventDefault();
                });

            $('form#upload').submit(function(event){
                var form = $(this);
                $.ajax({
                    type: form.attr('method'),
                    url:  form.attr('action'),
                    data: form.serialize()
                    }).done(function(text){
                        var response = text;
                        $('#upload_msg').html(response);
                    }).fail(function(){
                        //alert fail
                        alert('sorry failed somehow')
                    });
                event.preventDefault();
                });
            });
    </script>
</head>

<body>
    <p>shorten url</p>
    <label for="shorten" id="shorten_msg"></label>
    <form action="shorten" method="post" id="shorten">
        <input type="text" name="url" />
        <input type="submit" name="shorten_submit" />
    </form>

    <br/>
    <p>upload file</p>
    <label for="upload" id="upload_msg"></label>
    <form action="upload" method="post" accept-charset="utf-8" enctype="multipart/form-data" id="upload">
        <textarea name="file_description"></textarea><br/>
        <input type="file" name="userfile" /><br/>
        <input type="submit" name="upload_button" value="upload"/>
    </form>
</body>

</html>

当我提交第一个表单（缩短表单）时，它工作得很好，但它不适用于上传表单。代码有什么问题？上传不起作用，提醒我代码中定义的失败。应该以另一种方式处理文件上传吗？

表单提交错误

0 个答案: