使用jquery动态设置图像标签的src答案

【问题标题】：setting src of image tag dynamically using jquery使用jquery动态设置图像标签的src
【发布时间】：2014-09-01 17:18:55
【问题描述】：

我在我的项目中使用 Struts。我希望每当我的页面加载一个 ajax 调用时应该在那里使用包含图像链接的 Action 类中的对象填充 ArrayList。我在我的 jsp 页面中使用这个 arraylist 来填充图像 src。我是 jquery 的新手，所以请参阅如果你能帮忙。在此先感谢。

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>

【问题讨论】：

html 长什么样子？您是否尝试过使用 ajax 至少检索 JSP 上的记录？
当我从另一个页面调用 home.jsp 时，通过调用我的操作类（即 Home.java）说 index.jsp 它正在工作 f9。我的意思是图像显示完美。
在您的 JavaScript 中，您需要正确引用 attr 调用中的值（在图像标签上）。

标签： java jquery ajax struts2 hibernate-4.x

【解决方案1】：

首先你不需要包含两个独立的 jquery 库：ver 1.11 and ver 1.6，我建议你删除 1.6 版本：

还有一个隐藏带有显示属性的元素的建议：

#main{
   display:none;
}

在标记部分最好将 id 值放在引号中：

<div id ="main">

然后在 jQuery 中你需要将你的 ajax 调用放在 doc ready 块中：

$(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.
        }
    });
});

【讨论】：

感谢您的帮助。但是如何从我的操作类发送结果。
@user3824596 该操作是在 Java 中进行的。你是如何定义你的行为的？