jQueryAJAX调用在FF/Chrome中调试时有效

jQuery AJAX call works if and only if debugging in FF/Chrome

本文关键字:调试 有效 Chrome 调用 FF jQueryAJAX      更新时间:2023-09-26

我正面临一个奇怪的问题,一个Flask单个应用程序和一个通过视图中的表单进行的jQuery AJAX调用。基本上,当我调试JS代码时,端点(/register)被正确调用,但当我尝试正常运行时,端点从未被调用,我可以在Network视图中看到请求已发送,但它似乎从未到达Flask。

也就是说,这是我的html代码(有关表单和JS代码的相关部分):

<form action="" method="" id="newsletter-form" role="form">
    <div class="input-group">
        <input type="email" name="user_email" class="newsletter-email form-control" placeholder="ENTER EMAIL ADDRESS">
        <span class="input-group-btn">
            <button value="" type="submit" class="btn btn-green waves-effect waves-light newsletter-submit">Get More Info</button>
        </span>
    </div>
    <div id="ajax-panel"></div>                               
</form>

这是JS代码,基于这个SO答案,我添加了event.prventDefault()内容:

function makeRequest(event){
        event.preventDefault(); //stop the form from being submitted
        $.getJSON($SCRIPT_ROOT + '/register', {
                    user_email: $('input[name="user_email"]').val()
                  },
                function(data) {
                        $('#ajax-panel').empty();
                            if (data.status == 'OK'){
                                $('#ajax-panel').append('<div class="success"><strong>' + data.message + '</div>');
                            }
                            else{
                                $('#ajax-panel').append('<div class="error"><strong>' + data.message + '</div>');
                            }
                });
        return false;
    }
    $('#newsletter-form').submit(function(event){
        makeRequest(event);
    });

这是该端点的Flask代码:

@app.route('/register', methods=['GET', 'POST'])
def register():
    error = None
    user_email = request.args.get('user_email', 0, type=str)
    try:
        form = RegisterForm(email=user_email)
        if form.email.data and valid_mail(form.email.data):
            from models import RegisteredMail
            new_rm = RegisteredMail(
                form.email.data,
                datetime.datetime.utcnow(),
            )
            try:
                db.session.add(new_rm)
                db.session.commit()
                message = 'Thanks for subscribing, we will keep you posted!'
                return json.dumps({'status': 'OK', 'message': message})
            except IntegrityError:
                message = 'Provided email is already used, please use a different one'
                return json.dumps({'status': 'ERROR', 'message': message})
        else:
            message = 'Provided email is invalid, please use a different one'
            return json.dumps({'status': 'ERROR', 'message': message})
    except Exception as e:
        print e
        return render_template('index.html')

正如我所说,如果我进行调试,这会非常好地工作,但在运行时不会。。。我在这儿挠头。看起来如果请求从未到达服务器,因为如果我对服务器进行CTRL-C,我会在JS端收到错误,这看起来像是有什么东西"阻止"了表单提交。。。有线索吗?

编辑

我发现了这个问题,它与错误的请求或服务器端的任何请求无关。。。

我有一个视频标签,用来流式传输我存储在静态/视频文件夹中的视频,大约50MB大小。好吧,我开始评论大量的视图代码做试用&错误的东西。看来是那段代码造成了麻烦。。。

<video class="img_responsive" controls>
    <source src="{{ url_for('static', filename='video/movie.mp4') }}" type="video/mp4">
    Your browser does not support the video tag.
</video>

我仍然不能100%确定,但我使用上面的代码得到了随机异常:

Traceback (most recent call last): 
File "/usr/lib/python2.7/SocketServer.py", line 295, in _handle_request_noblock self.process_request(request, client_address) 
File "/usr/lib/python2.7/SocketServer.py", line 321, in process_request self.finish_request(request, client_address) 
File "/usr/lib/python2.7/SocketServer.py", line 334, in finish_request self.RequestHandlerClass(request, client_address, self) 
File "/usr/lib/python2.7/SocketServer.py", line 657, in init self.finish() 
File "/usr/lib/python2.7/SocketServer.py", line 711, in finish self.wfile.flush() 
File "/usr/lib/python2.7/SocketServer.py", line 303, in flush self._sock.sendall(view[write_offset:write_offset+buffer_size])

我真的不知道为什么会发生这种情况,我已经改为dropbox作为该视频的CDN流媒体服务器,一切都很顺利。。。如果有人对此有解释,我想听听:),否则这将转到X文件部分。

我知道这应该没有太大区别,因为它基本上是相同的代码,但你可以尝试并使用这样的ajax来发出get请求。

$.ajax({
  url: "/register?userEmail=" + $('input[name="user_email"]').val(),
  type: "GET",
  success: function(data){
     if(data.status = "OK"){
        //All is good
     }else{
       //There was an error
     }
  }
  error: function(xhr, ajaxOptions, thrownError){
     //If something brakes
     alert(xhr.status);
     alert(thrownError);
  }
});