Question

我有一个看起来像这样的表单（更不用说laravel语法）

       <form action="{{ URL::route('user-refresh-message') }}" method="post" id="form-user-refresh-message">
            <input id="getterid" name="getterid" type="hidden" value="{{ $profile->user_id }}">
            <input id="getter" name="getter" type="hidden" value="{{ $profile->user->username }}">
            <button type="submit">Refresh</button>
        {{ Form::token() }}
        </form>

当我将代码放在提交事件的表单关闭时，一切正常...

$('#form-user-refresh-message').on('submit', function(){
                $.post(
                    $(this).prop('action'),{
                        "_token": $( this ).find( 'input[name=_token]' ).val(),
                        "getterid": $( '#getterid' ).val(),
                        "getter": $( '#getter' ).val()
                    },
                    function(data){
                        $(".message-area").empty();
                        $.each(data, function(i, item) {
                            $(".message-area").append(
                            '<div class="message-item">' +
                            '<div class="message-user">' + item.who + ' said:</div>' +
                            '<div class="message-sent">' + item.when + '</div>' +
                            '<div class="message-viewed"></div>' +
                            '<div class="clearfix"></div>' +
                            '<div class="message-text seen-' + item.seen + '">' + item.text + '</div>' +
                            '</div>');
                        })
                        $('.message-area').scrollTop($('.message-area')[0].scrollHeight);
                    },
                    'json'
                ); 
                return false; 
form );

如果我将AJAX放在一个函数中并像这样调用它

            function refresh_messages() {

                $.post(
                    $(this).prop('action'),{
                        "_token": $( this ).find( 'input[name=_token]' ).val(),
                        "getterid": $( '#getterid' ).val(),
                        "getter": $( '#getter' ).val()
                    },
                    function(data){
                        $(".message-area").empty();
                        $.each(data, function(i, item) {
                            $(".message-area").append(
                            '<div class="message-item">' +
                            '<div class="message-user">' + item.who + ' said:</div>' +
                            '<div class="message-sent">' + item.when + '</div>' +
                            '<div class="message-viewed"></div>' +
                            '<div class="clearfix"></div>' +
                            '<div class="message-text seen-' + item.seen + '">' + item.text + '</div>' +
                            '</div>');
                        })
                        $('.message-area').scrollTop($('.message-area')[0].scrollHeight);
                    },
                    'json'
                ); 
                return false;                    
            }


            $('#form-user-refresh-message').on('submit', function(){
                    refresh_messages();
            });

我在控制台日志中得到了这个

未声明纯文本文档的字符编码。该文档将在某些浏览器中使用乱码文本进行渲染如果文档包含来自外部的字符，则配置 US-ASCII范围。文件的字符编码需要在传输协议或文件中声明需要使用字节顺序标记为编码签名。

我对表单操作路径上的请求返回的数据输出感到困惑。

如何在我的AJAX请求中设置字符编码才能正常工作？

Answer 1

我不认为这是一个编码问题，而是一个javascript范围问题。

在代码的ajax版本中，$(this).prop('action')无效或者更确切地说，它不存在于该上下文中。所以你的ajax请求是针对一个不存在的url进行的，结果404找不到页面的代码被加载为json响应（当它不是时），你就会得到那个错误。

所以，要解决此问题，请尝试以下方法：

function refresh_messages(targetForm) {
    $.post(
        $(targetForm).prop('action'),{
            "_token": $(targetForm).find( 'input[name=_token]' ).val(),
            "getterid": $( '#getterid' ).val(),
            "getter": $( '#getter' ).val()
        },
        function(data){
            $(".message-area").empty();
            $.each(data, function(i, item) {
                $(".message-area").append(
                '<div class="message-item">' +
                '<div class="message-user">' + item.who + ' said:</div>' +
                '<div class="message-sent">' + item.when + '</div>' +
                '<div class="message-viewed"></div>' +
                '<div class="clearfix"></div>' +
                '<div class="message-text seen-' + item.seen + '">' + item.text + '</div>' +
                '</div>');
            })
            $('.message-area').scrollTop($('.message-area')[0].scrollHeight);
        },
        'json'
    ); 
    return false;                    
}


$('#form-user-refresh-message').on('submit', function() {
    refresh_messages($(this));
});

AJAX内容类型问题？

1 个答案: