AJAX内容类型问题？

Question

I have a form that looks like this (never mind the laravel syntax)

       <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>

When I place my code in closure of form on submit event,,, everything works nicely..

$('#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 ); 

If i place AJAX in a function and call it like this

            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();
            });

I get this in console log

The character encoding of the plain text document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the file needs to be declared in the transfer protocol or file needs to use a byte order mark as an encoding signature.

And I get stuck with the output of the data returned by request on the form action route.

How can I set character encoding in my AJAX request to work properly?

Answer 1

I don't think this is an encoding issue, rather a javascript scope issue.

In the ajax version of your code, the $(this).prop('action') is invalid or rather, it doesn't exist in that context. So your ajax request is being made to a non existing url and resulting 404 not found page's code is loaded as a json response (when it isn't) and you get that error.

so, to fix this, try this:

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));
});