Question

这是我的div形式：

<form action="" method="post">


                 <label name="meal" value="meal">
                    Soupe 
                 </label>

                <table border="0">
                    <tr>
                        <td><span id="prix" name="price" >price</span></td>
                        <td><input type="number" id="nbr" name="quantity" min="1" max="5"value="1">        
                            <label>Number of persons</label>
                        </td>
                        <td><input type="button" id="somebutton" value="order"   
                                onclick="getdata('somebutton','empty-basket-wrapper')" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3">description of the meal ....</td>
                    </tr>

                </table>
</form>

   <div class="order">
                <div class="panier">
                    <span class="Ib"></span>
                    <span class="oh">my shopping cart</span>
                </div>
                <div id="empty-basket-wrapper">
                empty
                </div>
    </div>

我希望当我点击按钮时，要从标签转移的数据或跨度如soupe和价格，并显示在div id =“empty-basket-wrapper”中。

我想我的问题是如何从标签或跨度获取数据并将其传输到div或其他跨度或标签

这是我的AJAX：

var _xhr;
var _target;
function getdata(sourceId,targetId){

    _xhr= new XMLHttpRequest();

    _xhr.onreadystatechange=callback;
    _xhr.open("POST", url, true);
    _xhr.send();

    var px=document.getElementById("prix").name;


    function callback() {

        _target = document.getElementById(targetId);
        _target.innerHTML=px//_xhr.responseText;
    }
}

感谢您的帮助！

Answer 1

你应该考虑使用jQuery，那就像是：

$(document).ready(function() {

    $("#somebutton").click(function(e) {
        e.preventDefault();
        var form = $(e.target).closest("form");
        var target = $(form).attr("action");
        $.post(target, form.serialize(), function(result) {
            // your POST Target could give you HTML for the cart contents
            $("#empty-basket-wrapper").html(result);
            // your AJAX endpoint could also give you a JSON, then you could use mustache to render.
        });
    });

});

如果您只是想要在购物车中弹出值而不是POST回到您的服务器，那么您就不需要AJAX ...不确定您的意思。如果是这样，那就更简单了：

$(document).ready(function() {

    $("#somebutton").click(function(e) {
        e.preventDefault();
        var form = $(e.target).closest("form");
        // for sure you should investigate something more sophisticated, see mustache
        $("#empty-basket-wrapper").html(form.serialize());
    });

});

如何从标签或跨度获取数据并将其传输到div，其他跨度或标签

1 个答案: