使用Ajax获取值

时间:2018-11-24 15:50:31

标签: javascript jquery ajax api

在我的“结帐”页面上,我有一张表,该表是客户要购买的显示产品,而不是我要获取每个<td>的价值并将其保存到数据库中的,但是我不知道我做错了什么,我也获取每个<td>的类,但是它无法获取<td>的值,并且比我检查DB时看到的行已插入但包含空值。任何人都可以帮助我或为我指出正确的方向:)

到目前为止,这是我的代码:

HTML:

<div class="container">
    <h1>Shopping Checkout</h1>
    <table class="table table-hover">
        <thead class="thead-inverse">
            <tr>
                <th>Qty</th>
                <th>Item Name</th>
                <th>Cost</th>
                <th class="text-xs-right">Subtotal</th>
            </tr>
        </thead>
        <tbody id="output"> </tbody>
    </table>
    <input type="submit" class="btn btn-primary btn-block placeorder" value="PlaceOrder">
</div>

JS:

$(document).ready(function () {

        //Display Products in Checkout list
        function myfunction() {
            $.ajax({
                type: "GET",
                url: "http://localhost:xxx/api/Values/ProdukterudID" + params,
                dataType: "json",
                success: function (values) {
                    var total = 0;
                    for (var i = 0; i < values.length; i++) {
                        value = values[i]
                        if (value != null) {
                            var stotal = localStorage.getItem("prod_" + value.ProductID) * value.ProductPrice;
                            total += stotal;

                           //here i defined <td> with class
                            holderHTML += '<tr><td class="Qty">' + localStorage.getItem("prod_" + value.ProductID) + '</td><td class="ProductName"> ' + value.ProductName + '</td><td> ' + formatMoney(value.ProductPrice) + ' </td><td class="Subtotal" class="text-xs-right"> ' + formatMoney(stotal) + '</td></tr>'
                        }

                    }

                    $('#output').html(holderHTML);
                },
            })
        }

        myfunction();

       //Button click save into database
            $(".placeorder").click(function (e) {

                e.preventDefault();

                var tr = $(this).closest("tr");
                var model = {
                    Qty: tr.find(".Qty").text(),
                    Subtotal: tr.find(".Subtotal").text(),
                    ProductName: tr.find(".ProductName").text(),
                }
                $.ajax({
                    type: 'POST',
                    url: "http://localhost:xxx/api/Values/PlaceOrder",
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json',
                    data: {
                        Qty: model.Qty,
                        Subtotal: model.Subtotal,
                        ProductName: model.ProductName,
                        Email: localStorage.getItem("Email")
                    },
                    success: function (run) {

                        if (run)
                        {
                            console.log("Ok");
                        }

                        else {
                            console.log("error");
                        }                   
                    }

                });
            });
     });

控制器:

[Route("api/Values/PlaceOrder")]
[HttpPost]
public IHttpActionResult PlaceOrder() {

    DateTime CreatedAt = DateTime.Today;
    CustomerOrdersVM model = new CustomerOrdersVM();

    var SaveOrdre = new CustomerOrders
    {
        Qty = model.Qty,
        Email = model.Email,
        ProductName = model.ProductName,
        Subtotal = model.Subtotal,
        CreatedAt = CreatedAt,
    };

    db.CustomerOrders.Add(SaveOrdre);
    db.SaveChanges();

    return Ok(model);
}

1 个答案:

答案 0 :(得分:0)

占位符按钮是否与包含要处理的数据的行位于同一TR中?它没有出现,因此在您要添加的动态标记示例中。

$(".placeorder").click(function (e) {
   e.preventDefault();
   var tr = $(this).closest("tr"); // button in same TR as data cell?

    var model = {  Qty: tr.find(".Qty").text(), .. } // same row as button?