使用jquery動態設置圖片標籤的src

我在我的項目中使用了Struts。我希望每當我的頁面加載一個Ajax調用應該在那裏將填充ArrayList與我的Action類中包含圖像鏈接的對象。我在我的jsp頁面中使用此ArrayList來填充圖像src.I我是jquery的新手，所以請看如果你能幫忙，請提前致謝。使用jquery動態設置圖片標籤的src

Home.java

package com.rst; 

import java.util.ArrayList; 
import java.util.List; 

import org.hibernate.Session; 

import com.opensymphony.xwork2.ActionSupport; 
import com.opensymphony.xwork2.ModelDriven; 

public class Home extends ActionSupport{ 

    Product product = new Product(); 
    DAO d = new DAO(); 
    List<Product> products = new ArrayList<Product>(); 

    public String execute(){ 
     try{ 
      Session session = HibernateUtil.getSessionFactory().openSession(); 
      System.out.println("in action"); 
      products = d.getImages(session); 

      for(Product p:products){ 
       System.out.println(p.getProduct_name()); 
      } 
     } 
     catch(Exception e){ 
      e.printStackTrace(); 
     } 
     return SUCCESS; 
} 


public Product getProduct() { 
    return product; 
} 

public void setProduct(Product product) { 
    this.product = product; 
} 

public List<Product> getProducts() { 
    return products; 
} 

public void setProducts(List<Product> products) { 
    this.products = products; 
} 
}

DAO.java

package com.rst; 

import java.util.ArrayList; 
import java.util.List; 

import org.hibernate.HibernateException; 
import org.hibernate.Query; 
import org.hibernate.Session; 
import org.hibernate.SessionFactory; 
import org.hibernate.Transaction; 

public class DAO { 


public List<Product> getImages(Session session){ 

    Transaction t = session.beginTransaction(); 

    List<Product> list = new ArrayList<Product>(); 
    try{ 
     System.out.println("in dao method"); 
    Query q = session.createQuery("from com.rst.Product as p where p.flag = 'new'"); 
     list = q.list(); 
    } 
    catch(Exception e){ 
     e.printStackTrace(); 
    } 
    t.commit(); 
    session.close(); 
    System.out.println("success"); 
    return list; 
} 
}

回到Home.jsp

<%@ page contentType="text/html; charset=UTF-8" %> 
<%@ taglib prefix="s" uri="/struts-tags" %> 
<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"</script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery 
/1.6/jquery.min.js"></script> 
<title>Products</title> 

<script> 
    $.ajax({url:"home",success:function(result){ 
    var x = document.images; 
    $(x[0]).attr("src", <s:property value="products[0].image_link"/>); 
    $(x[1]).attr("src", <s:property value="products[1].image_link"/>); 
    $("#main").show(); 
}}); 
</script> 

<style type="text/css"> 
#main{ 
visibility: hidden; 
} 
</style> 
</head> 

<body> 

<b>Example of Iterator Tag</b><br/> 

<div id = main> 
<h1>welcome</h1> 
<img src= "" /> 
<img src=""/> 
<br/> 
</div> 

</body> 
</html>

來源

2014-07-11 user3824596

html是怎麼樣的？你有沒有嘗試過使用ajax至少檢索JSP上的記錄？ –

當我從另一個頁面調用home.jsp時，通過調用我的動作類（即Home.java）調用index.jsp，它正在工作f9.I意思是圖像完美顯示。 – user3824596

在你的JavaScript中，你需要正確引用你的'attr'調用中的值（在圖片標籤上）。 –

你不需要包含兩個獨立的jQuery庫第一件事：ver 1.11 and ver 1.6，我建議你刪除1.6版本：

，也多了一個建議，以隱藏元素與顯示性能：

#main{ 
    display:none; 
}

，並在標記部分好放置的ID值引號：

<div id ="main">

然後在jQuery中，你需要把你的ajax在doc就緒區塊中調用：

$(function() { 
    $.ajax({ 
     url: "home", // <--your controller method 
     type: 'post', //<---type post | get your choice 
     dataType: 'json', //<---should be json as response seems js object with key value pairs 
     success: function (result) { 
      $('#main img').each(function() { // loop in #main's images 
       $(this).attr('src', result.image_link); // and place the src here 
      }); 
      $("#main").show(); // <---then in the last you have to show it. 
     } 
    }); 
});

來源

2014-07-11 07:15:57 Jai

感謝您的幫助。但是如何從我的操作類發送結果。 – user3824596

@ user3824596該操作使用Java進行。你是如何定義你的行爲的？ –

使用jquery動態設置圖片標籤的src

回答

相關問題