在控制台中逐行显示结果

时间:2019-05-15 03:49:53

标签: javascript json ajax jsfiddle

我有一个使用json和ajax的程序。当我单击“确定”按钮时,它将在控制台中显示结果,而不是在控制台日志中显示一行,而是将其显示为我尝试使用编码功能尝试的每行显示行,但仍然无法正常工作。 / p>

兄弟姐妹应该显示在首页的控制台上 这是我的代码

  <script type="text/javascript">

kyu = (function (document, window, kyu) {   
  var node = Node.prototype,
      nodeList = NodeList.prototype,
      forEach = 'forEach',
      trigger = 'trigger',
      each = [][forEach], 
      dummy = document.createElement('i');

  nodeList[forEach] = each;

  window.on = node.on = function (event, fn) {
    this.addEventListener(event, fn, false);

    return this;
  };

  nodeList.on = function (event, fn) {
    this[forEach](function (el) {
      el.on(event, fn);
    });
    return this;
  };

  window[trigger] = node[trigger] = function (type, data) { 
    var event = document.createEvent('HTMLEvents');
    event.initEvent(type, true, true);
    event.data = data || {};
    event.eventName = type;
    event.target = this;
    this.dispatchEvent(event);
    return this;
  };

  nodeList[trigger] = function (event) {
    this[forEach](function (el) {
      el[trigger](event);
    });
    return this;
  };

  kyu = function (s) { 
    var r = document.querySelectorAll(s || '?'),
        length = r.length; 
    return length == 1 ? r[0] : r;
  };

  kyu.on = node.on.bind(dummy);
  kyu[trigger] = node[trigger].bind(dummy);

  return kyu;
})(document, this);
</script>
</head>
<body>
<div id="hello"> 
<div id="container">
  siblings:<br>
  <input class="siblings" placeholder="Sibling 1"/><br>
  <input class="siblings" placeholder="Sibling 2"/><br>
  <input class="siblings" placeholder="Sibling 3"/><br/> 
    </div>
    <div id="container1">
      <input id="plus" type="button" value="+">
    <input id="ok"   type="button" value="ok">
    </div> 
<script type="text/javascript"> 
  kyu("#plus").addEventListener("click",function(){ 
    var container=kyu('#container');
    var siblings= kyu('.siblings');
    var count = siblings.length+1;
    var newNode = document.createElement("input"); 
    newNode.classList.add("siblings");
    newNode.placeholder = "siblings" + count; 
    container.appendChild(newNode); 
  }); 
  </script> 
</body>
</html>
 <script type="text/javascript"> 
  var btn = kyu("#ok");
  btn.onclick = function(){
  var req = new XMLHttpRequest();
    var siblings= kyu('.siblings');
     var wew=0;
    var res="";
    var data="{";
    while(siblings.length>wew){
      data+= "'Siblings #" + (wew+1) +"': '"+siblings[wew].value+"', ";
      wew++; 
    }
 data+="}";  
 var po= data.slice(0,-3)+"}"
 //var data={po};
  req.onreadystatechange = function() {
  if(req.readyState == XMLHttpRequest.DONE){
    var wew = JSON.parse(req.responseText); 

      // var new1p= new array('Siblings'=>wew);
      var ll= wew.Siblings; 
        //alert(ll);
     console.log(ll);

      //var mop=(JSON.parse(wew.Siblings));
  }
};
req.open("POST", "poi2.php", true);
req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
req.send('siblings='+po);
}
</script>

第二页是

<?php
extract($_POST);
$result= $siblings; 
$arrayName = array('Siblings'=>$result);

$poi = json_encode($arrayName);
echo $poi;
?>

1 个答案:

答案 0 :(得分:0)

llNodeList时,可以将其转换为数组,然后可以使用数组方法对其进行操作。

就像用换行符加入它一样:

Array.prototype.slice.call(ll).join('\r\n')

有关converting to array的更多信息。