0

json 形式の ajax post によって返された画像のレンダリングに失敗しました。

ajaxによってGAEリクエストハンドラに投稿された画像をレンダリングするにはどうすればよいですか?

$(document).ready(function() {
    $("button").click(function(){
        var data = {'imageSrc' : $(this).parent().find('img').attr('src')};
        console.log(data);
        var request = $.ajax({
            cache: false,
            url: "/i",
            type: "POST",
            data: JSON.stringify(data),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(data, status) {
                console.log(data, status);
            },
        });

        request.done(function(msg) {
            window.location = '/i'
            alert("Request succeeded: " + msg );
        });

        request.fail(function(jqXHR, textStatus) {
            alert( "Request failed: " + textStatus );
        });
    });
});

ゲイ

def post(self):
    self.response.headers['Content-Type'] = 'application/json'
    self.response.content_type = 'application/json'
    # imageSrc = self.request.POST['imageSrc']
    # logging.info("DoubleNumbers called for:" + imageSrc)
    # jsonData = {"img" : imageSrc}
    # logging.info(jsonData)
    # js = json.dumps(jsonData)
    # self.response.write(simplejson.dumps(jsonData['img']))
    self.response.headers.add_header('content-type', 'application/json', charset='utf-8')
    # self.response.write(js)
    # self.response.write('''<img src="''')
    # self.response.write(json.JSONEncoder(jsonData['img']))
    # self.response.write('''">''')
    t = json.loads(self.request.POST['imageSrc'])
    self.response.write('''<html><body><img src="''')
    self.response.write(t['imageSrc'])
    self.response.write('''"></body></html>''')

更新JSON データとしてimg srcを 取得していますが、まだ出力/レンダリングに失敗しています。 JS スクリプトを次のように変更しました。

$(document).ready(function() {
    $("button").click(function(){
        var data = {'imageSrc' : $(this).parent().find('img').attr('src')};

        var request = $.ajax({
            cache: false,
            url: "/i",
            type: "POST",
            data: JSON.stringify(data),
            dataType: "json",
        }).done(function(data){
                    console.log(data);
                });
    });
});

＆私のmain.pyファイルとして：

def post(self):
    self.response.headers['Content-Type'] = 'application/json'
    data = json.loads(self.request.body)
    z = data['imageSrc']
    logging.info(z)
    logging.info(data)
    self.response.write(json.dumps(data))
    self.response.write('''<html><body><img src="http://mysite:8080%s"></body></html>'''%z)

返された JSON データ (img src ファイル) をレンダリングするにはどうすればよいですか?

4

2 に答える 2

1

交換：

data: JSON.stringify(data),

と：

data: data,

サーバーでimageSrcを取得するには：

imageSrc = self.request.get('imageSrc')

更新: GET ページへのリダイレクト

JS

// Add GET parameters to an URL
// Ex.:  site.com/?param=value
function addUrlSep( url ) {
    var sep = (url.indexOf('?') > -1) ? '&' : '?';
    return url + sep; }
function buildUrl( base, key, value ) {
    url = addUrlSep( base );
    return url + key + '=' + value; }

$(document).ready(function() {
    $("button").click( function(){

        base_url = "/i";

        url = buildUrl( base_url, 'imageSrc', 'https://www.google.com.br/images/srpr/logo6w.png' );

        window.location = url;  // Redirects to the URL

    });
});

西暦

def get(self):
    z = self.request.get( 'imageSrc' )
    logging.info(z)
    self.response.write( "<!DOCTYPE html><html><body><img src='{}'></body></html>" .format( z ) )

def post(self):
    pass
于 2013-10-08T15:14:24.750 に答える