如何将此字符串拆分为3个值?

时间:2017-01-24 13:12:06

标签: javascript sql html5

我有一个unordered list包含一些项目,点击一个按钮我想循环它们首先将它们的值拆分为3个字符串&删除kg然后将它们存储在3个不同列的数据库(phpmyadmin)中,如何才能完成? 其中一个列表示例:Bananas,Dry,20 Kg

function AddNewOrder()
  {
    var ul = document.getElementById("OrderDetails");
    var items = ul.getElementsByTagName("li");
    for (var i = 0; i < items.length; ++i) 
     {
        var s=items[i].firstChild.data;
        var splits = s.split(',', 3);
     }
  }

3 个答案:

答案 0 :(得分:0)

这个怎么样?

function AddNewOrder()
  {
    var ul = document.getElementById("OrderDetails");
    var items = ul.getElementsByTagName("li");
    for (var i = 0; i < items.length; ++i) 
     {
        var s=items[i].firstChild.data;
        var splits = s.split(',', 3);
        splits[2] = splits[2].replace("kg", "");
     }
  }

这段代码将用空格代替kg。

答案 1 :(得分:0)

所以你把它拆分好了,你仍然需要删除&#34; kg&#34;

splits[splits.length-1] = splits[splits.length-1].split(" ",1).toString();

答案 2 :(得分:0)

您可以使用Regex拆分并通过ajax将结果发送到您的服务器:

$("#send").click(function(e) {
  AddNewOrder();
});

function sendRequest(url, postData, callback) {
    var req = new XMLHttpRequest();
    if (!req)
        return;
    var method = (postData) ? "POST" : "GET";
    req.open(method,url,true);
    if (postData)
        req.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    req.onreadystatechange = function () {
        if (req.readyState != 4)
            return;
        if (req.status != 200 && req.status != 304) {
            return;
        }
        callback(req);
    }
    if (req.readyState == 4)
        return;
    req.send(postData);
}

function extractData(str) {
  var res = [];

  var regex = /((\w+)( kg?,?)?)/g;
  while ((m = regex.exec(str)) !== null) {
    // This is necessary to avoid infinite loops with zero-width matches
    if (m.index === regex.lastIndex) {
      regex.lastIndex++;
    }

    // The result can be accessed through the `m`-variable.
    if (res.length < 3) {
      // We only retrieve the three first results, but the regex is made to support an undefined amount or comma-separated values.
      res.push(m[0]);
    }
  }
  return res;
}

function AddNewOrder() {
  // If you're using Twitter's Bootstrap, better use jQuery to work on DOM
  var $ul = $("#OrderDetails");
  var $items = $ul.find("li");
  var ord = [];
  // For each items
  $items.each(function(key, val) {
    //Spliting and storing in array
    var data = $(this).children().html();
    ord.push(extractData(data));

  });

  /*
  ord = [
    ['Bananas','Dry','20'],
    ['Potatoes','Rolling','42'],
    ['Apples','Dry','20'],
    ['Strawberries','Dry','20'],
    // etc...
  ]
  */

  // Send Ajax data :
  alert("Sending data to server");
  return; // Because ↓ this ↓ is not configured to work in this snippet
  var url = '[YOUR SERVER SCRIPT LOCATION HERE]'
  sendRequest(url, {orders: ord}, function(response) {
    /* etc... */
  })
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<ul id="OrderDetails">
  <li>Bla bla bla <span class="data">Bananas,Dry,20 Kg</span>
  </li>
  <li>Bla bla bla <span class="data">Potatoes,Rolling,42 Kg</span>
  </li>
  <li>Bla bla bla <span class="data">Apples,Dry,20 Kg</span>
  </li>
  <li>Bla bla bla <span class="data">Strawberries,Dry,20 Kg</span>
  </li>
  <li>Bla bla bla <span class="data">Pineapples,Dry,20 Kg</span>
  </li>
  <li>Bla bla bla <span class="data">Tomatos,Dry,20 Kg</span>
  </li>
</ul>

<button id="send" class="btn btn-primary">Send</button>

然后,在服务器端,你必须制作自己的脚本(PHP我猜)谁将收到AJAX查询的数据并将它们插入到mysql中

<?php
// Connect to your database first : http://php.net/manual/en/mysqli.quickstart.connections.php

$orders = $_POST['orders']


foreach ($orders as $key => $order) {
    $catName = addslashes($order[0]);
    $catType = addslashes($order[1]);
    $amount = addslashes($order[2]);
    $sql = "INSERT INTO `Orders` VALUES('$catName', '$catType', '$amount');";
    mysqli::query($sql);
    // etc...
}