Question

我想要做的是我有一个销售列表，当有人选择其中一个时，我希望它添加到一个对象列表并显示在同一页面上，旁边有一个删除按钮因此用户可以插入/删除它，然后当它点击确认按钮时它将完成销售。

我正在查看ajax示例以及如何创建动态组件，但我不确定如何做到这一点。任何想法我怎么能这样做？

点击表格单元格时，这是我的javascript函数：

function selectRow(id) {
$.ajax
({
    type: "POST",
    url: "venda.php",
    data: {selected: id},
    cache: false,
    success: function(data)
    {
    }
}); 
}

ajax函数有效，但我如何让php将元素添加到html并添加引用iten的删除按钮？最后，我必须得到所有元素并将其放入客户的“包”中。

Answer 1

嗯，有几种方法可以做到这一点。一个选项可能是将所选项目存储在$ _SESSION变量上，然后将其打印为来自venta.php的html标记。此外，您可以在点击项目（元素）上添加事件以删除它们。这就像一个伪代码，当然，你需要验证数据，至少这个尝试解释一个关于如何使用php，jquery和javascript处理删除/添加项目的流程，没有插件。

shop.php（选择项目表）：

<!-- here you add jquery and your own javascript to play with that -->

<table>
    <tr>
        <td><a name="item_id" href="#">Item one</a></td>
    </tr>
</table>
<div class="my-selected-items"></div>
<a hef="link-to-proceed-order">Proceed order</a>

的javascript：

// add the result of php response to the *selected items* div
function selectRow(id) {
$.ajax
({
    type: "POST",
    url: "venda.php?action=add",
    data: {selected: id},
    cache: false,
    success: function(data)
    {
        $('.my-selected-items').html(data);
        register_delete_action();
    }
}); 
}

function register_delete_action()
{
    $(".remove-item").click(function(){
        $.ajax
        ({
            type: "POST",
            url: "venda.php?action=delete",
            data: {selected: id},
            cache: false,
            success: function(data)
            {
                $('.my-selected-items').html(data);
                register_delete_action();
            }
        }); 
    });
}

venta.php

$action = $_GET['action'];

switch ($action)
{
    case "add": addItem();
    case: "delete": deleteItem();
}

function addItem(){
    $selected_id = $_POST['selected'];

    if(!array_key_exists('items', $_SESSION))
    {
        $_SESSION['items'] = array();
    }
    $_SESSION['items'][$selected_id] = array("id" => $item['id'], "name" => $item['name']);


    //print the selected items in html markup
    echo  "<ul>";
    foreach ($_SESSION['items'] as $id => $selection)
    {
        echo '<li> <a href="#" class="remove-item" name="' .$selection["name"] . '">' .$selection["name"] . '</a> </li>';
    }
    echo  "</ul>";
}

function deleteItem(){
    $selected_id = $_POST['selected'];
    unset($_SESSION['items'][$selected_id]); 

    //print the selected items in html markup
    echo  "<ul>";
    foreach ($_SESSION['items'] as $id => $selection)
    {
        echo '<li> <a href="#" class="remove-item" name="' .$selection["name"] . '">' .$selection["name"] . '</a> </li>';
    }
    echo  "</ul>";
}

Answer 2

JS：

function selectRow(id) {
    $.ajax({
        type: "POST",
        url: "venda.php",
        data: {selected: id},
        cache: false,
        success: function(data)
        {
            $('css_selector of div you want the stuff displayed in').append(data);
        }
    }); 
}

PHP：

$input = $_POST['selected'];

// do stuff with input

echo $output; // echo data to be returned

Php对象列表通过AJAX更新

2 个答案: