如何在Titanium-Mobile上使用Javascript和JSON顯示圖像

Question

我必須在我的應用程序上顯示圖像，我想從JSON響應中獲取圖像並使用Javascript將其顯示到應用程序。這是JSON響應的樣子：

"images":{"full":{"url":"http:\/\/toemlondres.com\/wp-content\/uploads\/2012\/05\/953122.jpg","width":480,"height":720}, 

我當前的代碼是：

function load_db(win, section) { 
    var data = []; 
    db = Titanium.Database.open(config.DB_NAME); 
    rows = db.execute("SELECT POST_ID, TITLE, DESCRIPTION, CONTENT, AUTHOR, IMAGE, URL, DATE, SECTION FROM POSTS WHERE SECTION = ? ORDER BY DATE DESC", section); 

    var dataArray = []; 
    i = 0; 

    while (rows.isValidRow()) { 

     var remote_image = get_first_image_src(rows.fieldByName('CONTENT')); 

     if (remote_image == null) { 
      remote_image = config.DEFAULT_IMAGE; 
     } 

     if (prettyDate(rows.fieldByName('DATE')) == null) { 
      pretty_date = date("F j, Y", strtotime(rows.fieldByName('DATE'))); 
     } 
     else { 
      pretty_date = prettyDate(rows.fieldByName('DATE')); 
     } 

     dataArray.push({ 
      id: rows.fieldByName('POST_ID'), 
      title: rows.fieldByName('TITLE'), 
      description: rows.fieldByName('DESCRIPTION'), 
      content: rows.fieldByName('CONTENT'), 
      meta: pretty_date + ' | ' + rows.fieldByName('AUTHOR'), 
      image: remote_image, 
      url: rows.fieldByName('URL'), 
      date: rows.fieldByName('DATE') 
     }); 

     var p = new Object(); 

     p.id = rows.fieldByName('POST_ID'); 
     p.title = rows.fieldByName('TITLE'); 
     p.description = rows.fieldByName('DESCRIPTION'); 
     p.content = rows.fieldByName('CONTENT'); 
     p.meta = pretty_date + ' | ' + rows.fieldByName('AUTHOR'), p.image = remote_image, p.url = rows.fieldByName('URL'); 
     p.date = rows.fieldByName('DATE'); 
     p.author = { 
      nickname: rows.fieldByName('AUTHOR') 
     }; 

     blog_post[p.id] = p; 

     rows.next(); 

     i++; 
    }; 

    rows.close() 
    db.close() 

    if (section == 'recent_post') { 
     Ti.App.fireEvent(
     winRecent.events.SET_BLOG_LIST_RECENT, { 
      list_data: dataArray 
     }); 
    } 
    else { 
     Ti.App.fireEvent(
     win.events.SET_BLOG_LIST, { 
      list_data: dataArray 
     }); 
    } 
} 

function load(win, data, section) { 
    load_indicator_start(win); 

    db = Titanium.Database.open(config.DB_NAME); 
    db.execute("INSERT INTO FETCH_LOG (SECTION, UPDATED_AT) values (?, CURRENT_TIMESTAMP)", section); 
    db.close(); 

    var xhr = Titanium.Network.createHTTPClient(); 
    xhr.onload = function() { 
     var data = []; 
     var json = JSON.parse(this.responseText); 

     set_blog_post_data(win, json, section); 
    }; 
    xhr.open("GET", data); 
    xhr.send(); 
} 

function set_blog_post_data(win, data, section) { 
    var p = data.posts || data; 
    var valid_title; 
    var blog_post_temp = []; 

    for (var i = 0; i < p.length; i++) { 
     valid_title = p[i].title_plain; 
     blog_post[p[i].id] = p[i]; 

     // save to db, check whenever post_id is exist 
     db = Titanium.Database.open(config.DB_NAME); 
     row = db.execute("SELECT COUNT(*) FROM POSTS WHERE POST_ID = ? AND SECTION = ?", p[i].id, section); 
     count = row.field(0); 

     if (count == 0) { 
      var remote_image = get_first_image_src(p[i].content); 

      if (remote_image == null) { 
       remote_image = config.DEFAULT_IMAGE; 
      } 

      db.execute("INSERT INTO POSTS (POST_ID, TITLE, DESCRIPTION, CONTENT, AUTHOR, IMAGE, URL, DATE, SECTION) VALUES (?,?,?,?,?,?,?,?,?)", p[i].id, valid_title, p[i].excerpt, p[i].content, p[i].author.nickname, remote_image, p[i].url, p[i].date, section); 
     } 

     db.close(); 
    } 

    load_indicator_stop(win); 
    load_db(win, section); 
} 

function init_db() { 
    var db = Titanium.Database.open(config.DB_NAME); 
    db.execute('CREATE TABLE IF NOT EXISTS POSTS (POST_ID INTEGER, TITLE VARCHAR(255), DESCRIPTION TEXT, CONTENT TEXT, AUTHOR TEXT, IMAGE VARCHAR(255), URL VARCHAR(255), DATE VARCHAR(255), SECTION VARCHAR(255))'); 
    db.execute('CREATE TABLE IF NOT EXISTS FETCH_LOG (SECTION VARCHAR(255), UPDATED_AT VARCHAR(255))'); 
    db.execute('CREATE TABLE IF NOT EXISTS PAGES (PAGE_ID INTEGER, TITLE VARCHAR(255), CONTENT TEXT, AUTHOR TEXT, URL VARCHAR(255), DATE VARCHAR(255), SECTION VARCHAR(255))'); 
    db.execute('CREATE INDEX IF NOT EXISTS POSTID ON POSTS (POST_ID)'); 
    db.execute('CREATE INDEX IF NOT EXISTS POSTSECTION ON POSTS (SECTION)'); 
    db.execute('CREATE INDEX IF NOT EXISTS PAGEID ON PAGES (PAGE_ID)'); 
    db.execute('CREATE INDEX IF NOT EXISTS PAGESECTION ON POSTS (SECTION)'); 

    db.close(); 
} 

function get_first_image_src(html) { 
    String.prototype.reverse = function() { 
     return this.split('').reverse().join(''); 
    }; 

    var input = html; 
    var matches = input.reverse().match(/(gepj|gpj|fig|gnp)\..+?\/\/:ptth(?=\"\=crs)/g); 

    if (Array.isArray(matches)) { 
     for (i = 0; i < matches.length; i++) { 
      matches[i] = matches[i].reverse(); 
     } 

     return matches[0]; 
    } 
    else { 
     return null; 
    } 
} 

但現在我想改變的是直接從JSON取圖像。我怎樣才能做到這一點？我是編碼新手，現在我陷入了困境。

在此先感謝！

Answer 1

由於我們正在提出遠程請求，因此我們需要使用xhr，並且Titanium不會等到您提取請求，因爲它是異步的。因此請使用回撥：

var win = Ti.UI.createWindow(); 

win.open(); 

function callback(image) { 
    win.add(image); 
} 

function remoteRequest(callback) { 
    var json = false;  
    var url = your url; 
    var xhr = Ti.Network.createHTTPClient(); 

    xhr.onload = function(e) { 
     json = JSON.parse(this.responseText); 
     var imageView = Ti.UI.createImageView { 
      image = json.image; 
     } 

     callback(imageView); 
    }; 

    xhr.onerror = function(e) { 
     alert("error"); 
     return false; 
    }; 

    xhr.open('GET',url); 
    xhr.setRequestHeader("contentType","application/json; charset=utf-8"); 
    xhr.send(); 
}