Question

我正在使用liferay框架开发应用程序。我有一个下拉框，其值从数据库中提取。我想要做的是，只要用户从下拉菜单中选择任何人，就应该从数据库中提取有关该人的信息，以便查看。该怎么做？我应该使用ajax还是其他任何东西？这应该怎么做？我不知道如何开始：

EDITED：这是我从jsp打电话的方式。我不确定这是否正确从jsp调用：

 <!-- Ajax script to pull Employee data from the database -->
<script>
function showEmployeeInfo(empName)
{
    var xmlhttp;    
    if (str=="")
    {
        document.getElementById("empDetails").innerHTML="";
         return;
     }
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
         xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("empDetails").innerHTML=xmlhttp.responseText;
        }
    }

    xmlhttp.open("GET","getEmp.java?q="+empName,true);
    xmlhttp.send();
}

请注意 xmlhttp.open（ “GET”，“getEmp.java?q="+empName,true）; 是不正确的，我不知道如何把它。

Answer 1

你应该总是使用javascript库来执行ajax，为什么？因为该库可以处理样板代码，也可以跨浏览器兼容。

因此，使用Liferay 6.x，您可以使用alloy-ui，因为它是默认库，否则您可以使用最受欢迎且易于使用的jquery。只需要在portlet中明确包含jQuery，就像使用Alloy UI一样，你可以直接使用它。

还有其他图书馆，但我更喜欢这些，因为我对这两个感到满意： - ）

我将使用Alloy UI（速成课程）给出一个例子：

让我们先了解一下简单的步骤和流程：
1. 渲染JSP
2. 在JSP
3. 通过onChange，onClick等任何元素生成事件来调用javascript函数
4. 使用Alloy io.request模块通过serveResource
5. serveResource方法返回HTML文本或JSON列表以填充下拉列表
6. 在success脚本的io.request方法中，执行一些javascript魔术来填充下拉列表

现在让代码流动：

<强> JSP

<%-- Create the Resource URL --%>
<portlet:resourceURL var="fetchWordsResourceURL" />

<aui:form method="post" name="fm" >

    <%-- Calling the javascript function fetchWords() which will make the ajax call --%>
    <aui:select name="sourceSelect" id="sourceSelect" label="alphabets" onChange='<%= renderResponse.getNamespace() + "fetchWords();"%>'>
        <aui:option label="--" value="--" />
        <aui:option label="A" value="a" />
        <aui:option label="B" value="b" />
        <aui:option label="C" value="c" />
    </aui:select>

    <%-- The ajax response would populate this drop-down --%>
    <aui:select name="targetSelect" id="targetSelect" label="Words with Alphabets">
    </aui:select>

</aui:form>

<aui:script>
<%-- This is the javascript function which will be executed onChange of the value of sourceSelect --%>

    Liferay.provide(
        window,
        '<portlet:namespace />fetchWords',
        function() {

            var A = AUI();

            var fetchWordsURL = '<%= fetchWordsResourceURL.toString() %>';

            // selecting the sourceSelect drop-down to get the current value
            var sourceElement = A.one("#<portlet:namespace />sourceSelect");

            // selecting the targetSelect drop-down to populate values
            var targetElement = A.one("#<portlet:namespace />targetSelect");

            alert("Fetch word for alphabet = " + sourceElement.val());

            A.io.request (
                // the resource URL to fetch words
                fetchWordsURL, {
                data: {
                    // request parameters to be sent to the Server
                    <portlet:namespace />alphabet: sourceElement.val()
                },
                dataType: 'json',
                on: {
                        failure: function() {
                            // if there was some error at the server
                            alert("Ajax failed!");
                        },
                        success: function(event, id, obj) {

                            // JSON Data recieved from Server

                            var wordsArray = this.get('responseData');

                            // crude javascript magic to populate the drop-down

                            //clear the content of select
                            targetElement.html("");

                            for (var j=0; j < wordsArray.length; j++) {
                                // alert("Alphabet ==> " + wordsArray[j]);

                                targetElement.append("<option value='" + wordsArray[j] + "'>" + wordsArray[j] + "</option>");
                            }
                        }
                    }
                }
            ); 
        },
        ['aui-io']
    );
</aui:script>

Portlet类：serveResource方法

@Override
public void serveResource(ResourceRequest resourceRequest,
    ResourceResponse resourceResponse)
    throws IOException, PortletException {

    String alphabet = ParamUtil.getString(resourceRequest, "alphabet");

    _log.info("Alphabet recieved from ajax request ==> " + alphabet);

    // build the JsonArray to be sent back
    JSONArray jsonArray = JSONFactoryUtil.createJSONArray();

    if("a".equals(alphabet)) {

        jsonArray.put("Apple");
        jsonArray.put("Ape");
        jsonArray.put("Ant");
    }
    else if("b".equals(alphabet)) {

        jsonArray.put("Banana");
        jsonArray.put("Ball");
        jsonArray.put("Bat");

    }
    else if("c".equals(alphabet)) {

        jsonArray.put("Code");
        jsonArray.put("Cat");
        jsonArray.put("Camera");
    }

    _log.info("Json Array populated ==> " + jsonArray.toString());

    // set the content Type
    resourceResponse.setContentType("text/javascript");

    // using printWrite to write to the response
    PrintWriter writer = resourceResponse.getWriter();

    writer.write(jsonArray.toString());
}

多数民众赞成你已准备好编写一些高度合法的应用程序： - ）。

使用Liferay中的ajax从数据库中提取数据

1 个答案: