AJAX PUT & POST FormData

admin — Sat, 06 Jul 2019 10:53:06 +0000

Sende ich FormData per AJAX PUT an den Server, kann das kakke aussehen (Server side log):
Array ( [------WebKitFormBoundarydvJbNbOZqlwFQSQv Content-Disposition:_form-data;_name] => "foo"


12345gfd

------WebKitFormBoundarydvJbNbOZqlwFQSQv

Content-Disposition: form-data; name="bar"
1234sdfghjzt5gfd

------WebKitFormBoundarydvJbNbOZqlwFQSQv--

)

Das Selbe per POST gibt ein Array wie es sein soll.
Trotzdem, FormData per AJAX POST werfen: TypeError: Illegal invocation. Benutzt man das innerhalb einer VueJS App, wird der Error „nach oben“ geworfen und VueJS wirft den gleichen gewrappt: [Vue warn]: Error in v-on handler: "TypeError: Illegal invocation".
POST braucht mit FormData die beiden Felder (processData: false & contentType: false)!

Um auch per AJAX PUT ein zu gebrauchendes Array am Server zu bekommen, kann man die Daten aus dem FormData Objekt in ein Array holen (POST funzt mit FormData):

        $('#foobutton').click(function () {
            let formData = new FormData(window.document.forms.namedItem('my_form'));
            let data = {};
            formData.forEach((key, value) => data[key] = value);
            $.ajax({
                url: '/lerp-product-product/a536d460-5791-4338-bb32-507fc7958264',
                method: 'put',
                data: data,
                processData: false, // wegen FormData
                contentType: false, // wegen FormData
                success: function (data, textStatus, jqXHR) {
                    console.log('yeah, back from PUT');
                }
            });
        });

gist

AJAX CORS (Cross-Origin Resource Sharing)

admin — Mon, 30 Jul 2018 10:00:18 +0000

Eigentlich hat jQuery AJAX son Property crossDomain. Leider hat das sehr wenig Effekt.
Um mit jQuery einen AJAX zu einer anderen URL machen möchte benötigt man das Property dataType. Setzt man das auf jsonp funzt es.

$(document).ready(function () {
    $.ajaxSetup({
        headers: {'apikey': 'somekey73546hduehe'}
//                    beforeSend: function (jqXHR) {
//                        jqXHR.setRequestHeader('apikey', 'somekey73546hduehe');
//                    }
    });
    $('#callbase64').click(function () {
        var productNo = $('#product_no').val();
        console.log('productNo: ' + productNo);
        $.ajax({
            url: 'http://localhost:8080/rest/product-dingsbums/' + productNo,
            type: 'get',
            async: false,
            dataType: 'jsonp', // only this solves CORS problem
//                        contentType: 'text/plain; charset=UTF-8',
//                        crossDomain: true,
//                        processData: false,
//                        beforeSend: function (jqXHR, settings) {
//                            jqXHR.setRequestHeader('apikey', 'somekey73546hduehe');
//                        },
            success: function (data, textStatus, jqXHR) {
                console.log('data: ' + data);
                $('img#base64image').attr('src', data);
            }
        });
    });
});

jQuery – Bitkorn Blog

AJAX PUT & POST FormData

AJAX CORS (Cross-Origin Resource Sharing)