我有一个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);
}
}
答案 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...
}