不使用表格显示订单历史记录

时间:2017-05-26 07:14:49

标签: javascript jax-rs

我是UI devlopment的新手。我用来做编码,但我被要求从xml获取值并显示订单历史而不使用表。我从jax-rs获取xml并希望在html上显示。 / p>

我的Xml是:

<orderHistory>

<orders>
<description>Electronic order</description>
<detail_url>
http://shop.scholastic.com/webapp/wcs/stores/servlet/MyAcctItemHistoryView?langId=-1&amp;storeId=10751&amp;orderId=7039011
</detail_url>
<lineItemCount>ssolineItemCount</lineItemCount>
<order_id>7039012</order_id>
<sort_date>1448316</sort_date>
<status>Shipped</status>
<store_label>SSO Store</store_label>
<submitted_date>11/19/2015</submitted_date>
<total>11.76</total>
<tracking_href>www.abc.com</tracking_href>
<tracking_num>1234</tracking_num>
</orders>

<orders>
<description>Electronic order</description>
<detail_url>
http://shop.scholastic.com/webapp/wcs/stores/servlet/MyAcctItemHistoryView?langId=-1&amp;storeId=10751&amp;orderId=7039009
</detail_url>
<lineItemCount>tsolineItemCount</lineItemCount>
<order_id>7039009</order_id>
<sort_date>1448316</sort_date>
<status>Cancelled</status>
<store_label>Teacher Store</store_label>
<submitted_date>11/19/2015</submitted_date>
<total>15.25</total>
<tracking_href>www.abc.com</tracking_href>
<tracking_num>1234</tracking_num>
</orders>
<orderHistory>

我的Html就像:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script language="javascript">
    var xmlhttp;
    function init() {
       // put more code here in case you are concerned about browsers that do not provide XMLHttpRequest object directly
       //xmlhttp = new XMLHttpRequest();
       if (window.XMLHttpRequest)
        { // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else
        { // code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }


    }
    function getdetails() {

                    var empno = document.getElementById("empno");
                        var url = "http://localhost:8080/NewShot/schl-api/myresource/com/";
                        xmlhttp.open('GET', url, false);
                        xmlhttp.send();

                        if (xmlhttp.readyState == 4) {
                            if (xmlhttp.status == 200) {
                                //alert('Inside');

                                var xmlData = xmlhttp.responseXML;

                                if (!xmlData) {

                                    xmlData = (new DOMParser())
                                            .parseFromString(
                                                    xmlhttp.responseText,
                                                    'text/xml');

                                }

                                // alert('Content'+xmlData);
                                var store , O_url ,status,total,description,tracknum,litncount,trackhrf,subdate,sdate,durl,elements;
                                var conference = xmlData
                                        .getElementsByTagName("orders");

                                         for (var i = 0; i< conference.length; i++) {
                                                // alert('In For');
                                                store = conference[i].getElementsByTagName("store_label")[0].firstChild.data;
                                                O_url = conference[i].getElementsByTagName("order_id")[0].firstChild.data;
                                                status = conference[i].getElementsByTagName("status")[0].firstChild.data;
                                                total = conference[i].getElementsByTagName("total")[0].firstChild.data;
                                                description = conference[i].getElementsByTagName("description")[0].firstChild.data;
                                                tracknum = conference[i].getElementsByTagName("tracking_num")[0].firstChild.data;
                                                litncount = conference[i].getElementsByTagName("lineItemCount")[0].firstChild.data;
                                                trackhrf = conference[i].getElementsByTagName("tracking_href")[0].firstChild.data;
                                                subdate = conference[i].getElementsByTagName("submitted_date")[0].firstChild.data;
                                                sdate = conference[i].getElementsByTagName("sort_date")[0].firstChild.data;
                                                durl = conference[i].getElementsByTagName("detail_url")[0].firstChild.data;

                                                //alert(date+" "+name+" "+url);
                                                 elements +="StoreType::"+store+ "<br>" +"OrderUr::"+ O_url + "<br>" + 
                                                "Status::"+status+"<br>"+"Total Bill::"+total+"<br>"+""+"Item Description::"+description+"<br>"+"Trackinh Number::"+tracknum+"<br>"+
                                                "LineItemCount::"+litncount+"<br>"+"Tracking Link::"+trackhrf+"<br>"+"Submission Date::"+subdate+"<br>"+"Sort Date::"+sdate+"<br>"+"DetailUrl::"+durl+"<br><br>";
                                            }

                                         document.getElementById("demo").innerHTML= elements;
                                /* date = conference[0]
                                        .getElementsByTagName("date")[0].firstChild.data;
                                 name = conference[0]
                                        .getElementsByTagName("name")[0].firstChild.data;
                                 url = conference[0]
                                        .getElementsByTagName("url")[0].firstChild.data;
                                    */
                                // alert('Name'+name+'Date'+date+'url'+url);



                            } else {
                                name = "";
                                date = "";
                                url = ""
                                alert("Invalid Employee ID");
                            }
                        } else {
                            alert("Error ->" + xmlhttp.responseText);
                        }

                    }
                </script>
  </head>
  <body  onload="init()">
   <h1>Call Scholastic Service </h1>

   <table>
   <tr>
        <input type="button" value="Get Details" onclick="getdetails()"/>
   </tr>

   </table>
   <p id="demo"></p>

  </body>
</html>

我希望在不使用以下格式的表格的情况下显示值:

Store Label:    <Value>                               LineItem Count:<Value>

OrderId:   <Value>                                    LineItem Count:<Value>

Status Times: <Value>                                 Tracking Link:<Value>

Total:   <Value>                                      Submission Date:<Value>

Description:   <Value>                                Date Sorting:<Value>

Tracking Number:<Value>

Detail Url:<Value>

我尝试使用但不合适。

由于

0 个答案:

没有答案