Javascript 使用核心ajax构建新元素&；聚合物中的xml_Javascript_Ajax_Xml_Polymer

Javascript 使用核心ajax构建新元素&；聚合物中的xml

javascript ajax xml polymer

Javascript 使用核心ajax构建新元素&；聚合物中的xml,javascript,ajax,xml,polymer,Javascript,Ajax,Xml,Polymer,我对编写代码完全是新手，基本上我是从互联网上学习的，甚至没有朋友可以讨论，因为我是一个能力不同的人，只会操作鼠标。所以，事情是这样的，当我决定学习聚合物时，我忘记了一件我不懂javaScript的基本事情。在过去的几年里，我学习了html、css和一些jquery 我所要做的就是创建一个元素“我的代码”。另存为my-codes.html <link rel="import" href="../components/polymer/polymer.html"> <l

我对编写代码完全是新手，基本上我是从互联网上学习的，甚至没有朋友可以讨论，因为我是一个能力不同的人，只会操作鼠标。所以，事情是这样的，当我决定学习聚合物时，我忘记了一件我不懂javaScript的基本事情。在过去的几年里，我学习了html、css和一些jquery

我所要做的就是创建一个元素“我的代码”。另存为my-codes.html

  <link rel="import" href="../components/polymer/polymer.html">
    <link rel="import" href="../components/core-ajax/core-ajax.html">

<polymer-element name="my-code">
<template>
<core-ajax auto url="../xmls/canon.xml" handleAs="xml" response="{{resp}}"></core-ajax>
<p>{{resp}}</p>
</template>
<script>
Polymer('mycode',{

    });
</script>
</polymer-element>


{{resp}}
聚合物（“mycode”{
});

这是我的index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>testing template</title>
  <script src="components/platform/platform.js"></script>
  <link rel="import" href="elements/my-codes.html">
</head>

<body unresolved>
<my-code></my-code>

</body>
</html>


测试模板

下面是我的canon.xml的一些示例

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<canonc xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <canon>
        <Error> EO  </Error>
        <Cause> Fuser unit malfunction  </Cause>
        <Action> Eng. Required  </Action>
    </canon>
    <canon>
        <Error> EOOO  </Error>
        <Cause> Fuser unit malfunction  </Cause>
        <Action> Eng. Required  </Action>
    </canon>
    <canon>
        <Error> E001  </Error>
        <Cause> Fuser unit thermistor problem  </Cause>
        <Action> Eng. Required  </Action>
    </canon>
    <canon>
        <Error> E002  </Error>
        <Cause> Fuser unit thermistor/triac problem  </Cause>
        <Action> Eng. Required  </Action>
    </canon>
    <canon>
        <Error> E003  </Error>
        <Cause> Fuser unit thermistor/heater problem  </Cause>
        <Action> Eng. Required  </Action>
    </canon>
</canonc>


环氧乙烷
定影装置故障
英语必修课
EOOO
定影装置故障
英语必修课
E001
定影器单元热敏电阻问题
英语必修课
E002
定影器单元热敏电阻/双向晶闸管问题
英语必修课
E003
定影器单元热敏电阻/加热器问题
英语必修课

我只需要有人帮我完成（教我）代码。特别是javaScript部分。我需要像这样的输出

<div class="card">
<div>error</div>
<div>cause</div>
<div>action </div>
</div>
<div class="card">
<div>error2</div>
<div>cause2</div>
<div>action2 </div>
</div>


错误
原因
行动
错误2
原因2
行动2

我知道我要求太多了，但请帮帮我。我有20个xml文档，否则我必须把它们做成别的东西。或者说是我的想法（因为我做的事情是为了爱好和学习）

这是我为了同样的目的在不同的html上使用的jquery脚本

function commn(){
    $("#canon").empty();
      $.ajax({
    type: "GET",
    url: "xmls/canon.xml",
    dataType: "xml",
    success: function(xml){
    $(xml).find('canon').each(function(){
      var serror = $(this).find('Error').text();
      var sdesc = $(this).find('Cause').text();
            var saction = $(this).find('Action').text();
      $("<div class='concor'></div>").html("<div class='error'>" + serror + "</div>" + "<div class='desc'>" + sdesc + "</div>" + "<div class='actn'>" + saction + "</div>").appendTo("#canon");
    });
  },
  error: function() {
    alert("An error occurred while processing XML file.");
  } 
        });
}

函数commn（）{
$（“#佳能”）.empty（）；
$.ajax({
键入：“获取”，
url:“xmls/canon.xml”，
数据类型：“xml”，
成功：函数（xml）{
$（xml）.find（'canon'）.each（function（）{
var serror=$（this.find（'Error'）.text（）；
var sdesc=$（this.find（'Cause'）.text（）；
var saction=$（this.find（'Action'）.text（）；
$（“”）.html（“+serror+++++sdesc+++++saction++”）.appendTo（“#canon”）；
});
},
错误：函数（）{
警报（“处理XML文件时出错。”）；
} 
});
}

提前感谢

首先，您在调用

Polymer

函数时输入了一个错误。第一个参数必须与元素名匹配，因此需要写入

Polymer('my-code', ...

然后，我建议使用和来最小化您的需求所需的JavaScript量。对此，您也不需要jQuery（顺便说一句，如果您知道jQuery，那么您就知道JavaScript，因为jQuery是用JavaScript编写的；-）

代码如下：

<polymer-element name="my-code">
  <template>
    <core-ajax auto url="../xmls/canon.xml" handleAs="xml" 
      response="{{resp}}"></core-ajax>
    <template repeat="{{canon in resp | nodeList('canon')}}">
      <div class="card">
        <div>{{canon | nodeText('Error')}}</div>
        <div>{{canon | nodeText('Cause')}}</div>
        <div>{{canon | nodeText('Action')}}</div>
      </div>
    </template>
  </template>
  <script>
    Polymer('my-code', {
      nodeList: function(element, name) {
        return element ? 
          [].slice.call(element.querySelectorAll(name)) : []
      },
      nodeText: function(element, name) {
        return element.querySelector(name).innerHTML;
      }
    });
  </script>
</polymer-element>

重复

nodeList

过滤器返回的所有数组元素（即XML的

canon

元素）

然后在每个

<div>{{canon | nodeText('Error')}}</div>

{{canon | nodeText（'Error'）}

nodeText

过滤器返回当前

canon

节点的指定子节点的文本内容（例如“错误”）

您可以了解有关

querySelector（）

和

queryselectoral（）

函数和的更多信息。

不客气。很高兴看到我的回答有助于解决你的问题。在这种情况下，您可以通过单击答案左侧的复选标记将答案标记为已接受。所以每个人都可以看到，这不再是一个悬而未决的问题。

<div>{{canon | nodeText('Error')}}</div>