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

GAE

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

更新 我将img src作为 JSON 数据获取但仍然无法输出/渲染它。 我将我的 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

    });
});

PY

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 回答
0

在您的 Javascript 中，您需要类似以下内容：

request.done(function(msg) {
        window.body = msg;
        alert("Request succeeded: " + msg );
});

我可以说这只是一个练习，但你在这里做的事情没有多大意义。您实际上并没有将图像发送到服务器，您只是将 url 发送到服务器，将其取回，然后让浏览器加载 url。

于 2013-10-08T16:01:59.237 回答