Struts2 + JQuery + Freemarker的ajax调用

最新推荐文章于 2021-08-06 02:47:27 发布

转载最新推荐文章于 2021-08-06 02:47:27 发布 · 3.3k 阅读

·

0

·

标签

#freemarker

freemarker之旅专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个结合Struts2框架、jQuery AJAX技术及Freemarker模板引擎的示例项目。通过具体代码展示了如何实现商品价格的动态加载，并介绍了相关的Action类及配置文件。

Struts2 当中使用json-lib-jdk5.jar而没有使用struts-json-plugin.jar来实现。JQuery $.post()实现ajax调用。freemarker作为视图模板。

前页模版 invoiceform.ftl：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CH" xml:lang="zh-CH">
<#assign s=JspTaglibs["/WEB-INF/struts-tags.tld"]>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="Cache-Control" content="no-store"/>
        <meta http-equiv="Cache-Control" content="no-cache"/>
        <meta http-equiv="Expires" content="0"/>
        <meta http-equiv="Pragma" content="no-cache, must-revalidate, no-store"/>
        <title>struts2+jquery_ajax</title>
        <script type="text/javascript" src="${request.contextPath}/js/json/json.js"></script>
        <script type="text/javascript" src="${request.contextPath}/js/invoice.js"></script>
    </head>
    <body scroll="auto">
        <form name="invoiceForm" action="" method="post" >
            <fieldset >
                <legend>选择商品:</legend>
                <br/>
                <#if products? exists>
                商品：
                    <select id="product.id" name="product.id">
                        <#list products as product>
                            <option value="${(product.id)? if_exists}">${(product.name)? if_exists} </option>
                        </#list>
                    </select>
                </#if>
                <br/>
                <span class="spanProduct">
                    单价：<input type="text" readonly="readonly" name="product.price">
                </span>
                <span class="spanProduct">
                    数量：<input type="text" name="item.quantity" oninput="calTotal(); return false;">
                </span>
                <span class="spanProduct">
                    消费：<input type="text" readonly="readonly" name="item.cost">
                </span>
            </fieldset>
        </form>
    </body>
</html>

JQuery脚本 invoice.js:

$(function() {
    $("select[id='product.id']").change(function(){
        //alert($(this).val());
        //清空数量和消费
        $("input[name='item.quantity']").val("");
        $("input[name='item.cost']").val("");

        //当商品选择下拉框change时，显示所选商品价格
        $.post(
            "invoiceAction!listProducts.shtml", //调用Action方法
            {"product.id" : $(this).val()}, //传递参数，下拉框选择的商品id
            function(data){
                //alert(data.price);
                $("input[name='product.price']").val(data.price);
            },
            "json"
        );
    });
}

action类 invoiceAction:

public class InvoiceAction extends ActionSupport{
    private Product product;

    /**..Getters & Setters.*/

    //Action中的执行方法，若使用json-lib-jdk5.jar则返回为void
    public void listProducts() {
        try {
            JSONObject result = new JSONObject();

            product = productService.load(getProduct().getId());
            Product _result = new Product();
            BeanUtils.copyProperties(_result, product);
            //Product类当中存在private Set<Item> items属性,即onetomany的关系，将_result转化为json对象前将items设为null.
            _result.setItems(null);
            result = JSONObject.fromObject(_result);

            //HttpResponse返回json对象
            getWebResponse().getWriter().print(result);
        } catch (Exception e) {
            setErrMessage(e.getMessage());
        }
    }
}

struts.xml配置文件:

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
    "http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
    <include file="struts-default.xml"/>
    <package name="simpledemo" extends="struts-default">
        
        <action name="invoiceAction!*" class="com.scott.action.InvoiceAction" method="{1}">
            <result name="input" type="freemarker">/invoiceform.ftl</result>
            <result name="detail" type="freemarker">/invoiceItem.ftl</result>
        </action>
    </package>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。