Javascript 将OrderFormAjax发送到php

我需要通过ajax发送一个订单行到php…但对此缺乏了解…有人可以帮助我吗？ 它是一个非常简单的订单，从xml文件填充，并添加一个简单的菜单选择项目

//Retrieve XML document and loop for each item
    jQuery(function($) { //just like $(document).ready()
        $.ajax({
            type: "GET",
            url: "data/menu.xml",
            dataType: "xml",
            error: function() {
                $("<p>Error loading XML file...</p>")
                .replaceAll("#order_form")
            },
            success: function(xml) {
                $(xml).find("item").each(fWriteXML); //must call function as var
            }
        });
    });

    //Populate drop-down box with XML contents
    var fWriteXML = function writeXML() {
        var id = $(this).attr("id");
        var cost = $(this).attr("cost");
        var item = $(this).text();
        $("#select_item")
            .append($("<option></option>")
            .val(id) //same as .attr("value", id))
            .html(item)
            .attr("title", cost));
    };

    //Add selected item to order
    $(function() {
        $("#add_btn").click(function() {
            var order_item_selected_quantity = $("#select_quantity").val()
            var selected_item = $("#select_item option:selected");
            var order_item_selected_id = selected_item.val();
            var order_item_selected_name = selected_item.text();
            var order_item_selected_cost = selected_item.attr("title");

            var pattern = new RegExp("^[1-9][0-9]?$"); //Select between 1-99 items
            //Do not proceed if input is incorrect
            if (pattern.test(order_item_selected_quantity) &&
                order_item_selected_cost != "") {

                //Calculate subtotal
                var order_item_selected_subtotal =
                    parseFloat(order_item_selected_cost) *
                    parseInt(order_item_selected_quantity);

                $("<tr class='order_row'></tr>").html("<td>"
                    + order_item_selected_quantity + "</td><td>"
                    + order_item_selected_id + "</td><td class='order_item_name'>"
                    + order_item_selected_name + "</td><td class='order_item_cost'>"
                    + order_item_selected_cost + "</td><td class='order_item_subtotal'>"
                    + order_item_selected_subtotal + "</td><td>"
                    + "<input type='button' value='elimina' /></td>")
                        .appendTo("#order_cart").hide();

                $("#order_cart tr.order_row:last").fadeIn("medium", function() {
                    orderTotal(); //Callback once animation is complete
                });

                //Format new order item values to currency
                $("#order_cart td.order_item_cost:last").formatCurrency();
                $("#order_cart td.order_item_subtotal:last").formatCurrency();

                clickRemove();
                clearForm();
            }
        });
    });

    //Bind a click event to the correct remove button
    function clickRemove() {
        $("#order_cart tr.order_row:last input").click(function() {
            $(this).parent().parent().children().fadeOut("fast", function() {
                $(this).parent().slideUp("slow", function() {   //the row (tr)
                    $(this).remove();   //the row (tr)
                    orderTotal();
                });
            });
        });
    };

    //Clear order input form and re-focus cursor
    function clearForm() {
        $("#select_quantity").val("");
        $("#select_item option:first-child").attr("selected", "selected");
        $("#select_quantity").focus();
    };

    //Calculate new order total
    function orderTotal() {
        var order_total = 0;
        $("#order_cart td.order_item_subtotal").each(function() {
            var amount = ($(this).html()).replace("€", "");
            order_total += parseFloat(amount);
        });

        $("#order_total").text(order_total).formatCurrency();

        //Create alternating colored rows in order table
        $("#order_cart tr.order_row:odd").css("background-color", "#FF0");
        $("#order_cart tr.order_row:even").css("background-color", "#FFF");
    };

    //Pretend to place order if it contains items
    $(function() {
        $("#order_btn").click(function() {


            /* MISSING PART */

        alert("Order placed...");


        });
    });

thx很多

国防部。 这个html

<table id="select">
    <caption>
        Menu</caption>
    <tr>
        <td>
            Qnt.:
        </td>
        <td>
            <input id="select_quantity" type="text" />&nbsp;(*1-99)
        </td>
        <td>
            <select id="select_item">
                <option selected="selected">Seleziona un prodotto...</option>
            </select>
        </td>
        <td>
            <input id="add_btn" type="button" value="Aggiungi" />
        </td>
    </tr>
</table>
<br />

<br />

<table id="order_cart" >

    <caption>
        Ordine</caption>
    <thead>
        <tr>
            <th>
                Qnt.
            </th>
            <th>
                ID
            </th>
            <th>
                Descrizione
            </th>
            <th>
                Prezzo
            </th>
            <th>
                subtotale
            </th>
            <th>
                Elimina
            </th>
        </tr>
    </thead>
    <tbody>
    </tbody>
    <tfoot>
        <tr>
            <th colspan="4">
                Totale:
            </th>
            <th id="order_total">
                €0.00
            </th>
            <th>
                <input id="order_btn" type="button" value="Ordina" />
            </th>
        </tr>
    </tfoot>

---

最简单的解决方案是使用更受欢迎的发布内容的方式，并将您的输入放入表单元素中

这将要求您不使用表，但可以在以后使用CSS轻松实现表的外观

<form action="form.php" method="post" class="order">
   <label>Quantity</label> <input id="select_quantity" type="text" /> <br/>
   <label>Select</label> <select id="select_item">
        <option selected="selected">Seleziona un prodotto...</option>
    </select> <br/>
    <input id="add_btn" type="button" value="Aggiungi" />
    <button id="order_btn" value="Ordina" />
</form>

$.fn.serialize方法仅适用于表单或输入元素，而不适用于其他容器

当客户添加产品时，您仍然需要找到一种添加输入的方法，但最好是这样

$('button.add').click(function(e){
  e.preventDefault();
  var name=$(this).closest('tr').find('[name="item"]').val();
  var quantity=$(this).closest('tr').find('[name="quantity"]').val();
  $('form.order').append('<input type="hidden" name="item['+name+']" value="'+quantity+'"/>');
});

您需要检查是否有重复项等，但这将为您找到一个很好的方法。

下面是其余内容

//send order
    $(function() {
        $("#order_btn").click(function() {

        var url = 'http://../order.php';
        var $ordercart = $(this).closest('.order_cart');


        //just a control 4 empty cart
            if ($("#order_cart tr.order_row:last").length == 0)  {
                alert("Nessun prodotto selezionato...");
            } else {            
                //here take the order cart
                var order_cart = $ordercart.find('#order_cart tr.order_row').text();


                //submit the form
                $.ajax({
                    type : "GET",
                    url : url,
                    data : {
                        order_cart : order_cart

                    },

                });
                //$.ajax



                alert("Order placed...");



            }
            return false;
        });
    });

康索尔的答复：

---

：//../order.php？order\u cart=1菜单\u 01奶酪汉堡%E2%82%AC3.99%E2%82%AC3.992菜单\u 02Hambuger%E2%82%AC2.99%E2%82%AC5.98

您可能需要提供更多信息；这实际上是一个JavaScript问题，因为没有PHP参与实际提交表单。你也应该发布你的HTML代码，这样我们就可以看到这个表单了。你在让它工作的哪个阶段？你说过你不知道如何做到这一点，但已经编写了相当多的代码-到目前为止你尝试了做什么，它是如何不按你期望的方式工作的？如果发布代码，请使用网站，以便我们可以轻松编辑你的代码，并查看你的请求是否到达你的ajax方法调用。在一些更一致的方法中也有很多价值跨JavaScript格式化。您有多个对$function{}的调用，这些调用都可以放在xml文件中的单个function.js append项中

//send order
    $(function() {
        $("#order_btn").click(function() {

        var url = 'http://../order.php';
        var $ordercart = $(this).closest('.order_cart');


        //just a control 4 empty cart
            if ($("#order_cart tr.order_row:last").length == 0)  {
                alert("Nessun prodotto selezionato...");
            } else {            
                //here take the order cart
                var order_cart = $ordercart.find('#order_cart tr.order_row').text();


                //submit the form
                $.ajax({
                    type : "GET",
                    url : url,
                    data : {
                        order_cart : order_cart

                    },

                });
                //$.ajax



                alert("Order placed...");



            }
            return false;
        });
    });