JQuery Ajax POST不发送数据

Question

问题是，POST 似乎没有向 PHP 脚本发送信息。 firebug 控制台显示信息是从 JavaScript 传递的，并且格式似乎正确，但我没有得到响应，PHP 脚本也没有运行。

不过，PHP 本身运行良好。

Jquery：

$(function(){
        $('#submit-item').live("click",function(){
            var productName = $(".add-item-form #productName").val();
            var category = $(".add-item-form #categorySelect").val();
            var brandName = $(".add-item-form #brandName").val();
            var volume = $(".add-item-form #volumeType").val();


            $.post("addNewProduct.php",{productName:productName ,category: category, brandName: brandName, volume: volume});
        });
    });

还有 HTML 表单：

<section id="add-item-pane" class="secondary">
    <header>
        <h1>add item</h1>
        <a href="#" class="close-secondary"></a>
    </header>
    <form class="add-item-form" method="POST" action="" accept-charset=utf-8>
        <div class="input">
            <label for="productName">product name</label>
            <input type="text" name="productName" id="productName" placeholder="Product Name">
        </div>
        <div class="input">
            <label for="categorySelect" required>category</label>
            <select name="categorySelect" id="categorySelect" placeholder="Category" required>
                <option value="1">ATERIA-AINEKSET JA KASTIKKEET</option>
            </select>
        </div>
        <div class="input">
            <label for="brandName">brand name</label>
            <input type="text" name="brandName" id="brandName" placeholder="Brand Name">
        </div>
        <div class="input">
            <label for="volumeType">volume type</label>

            <label for="volumeTypeKG">g/kg</label>
            <input type="radio" name="volumeType" id="volumeType" value="1">
            <label for="volumeTypeL">ml/l</label>
            <input type="radio" name="volumeType" id="volumeType" value="2">

        </div>

        <input type="submit" value="Add it" id="submit-item">


    </form>
</section>

接收PHP：

$productName =  $_POST['productName'];
$categoryId =  $_POST['category'];
$brandId =  $_POST['brandName'];
$volumeId =  $_POST['volume'];

Answer 1

您的代码中存在一些错误：

1) 您有 2 个具有相同 id 的输入，根据定义，一个 ID 在页面中应该是唯一的。

<input type="radio" name="volumeType" id="volumeType" value="1">
<input type="radio" name="volumeType" id="volumeType" value="2">

如果您想检索选中单选的值，您应该为每个单选按钮添加一个 CSS 类，例如“myRadioGroup”，并使用以下命令检索值：

$(".myRadioGroup:checked").val()

2) 你有一个指向自身的表单（带有action=""）并且你有一个input type="submit"。因此，当您单击“添加”按钮时，侦听器会启动作业，但您不会停止提交事件，该事件会提交表单并重新加载同一页面。

尝试替换您的：

<input type="submit" value="Add it" id="submit-item">

带有一个不会启动任何提交事件的简单按钮。

<button type="button" id="submit-item">Add it</button>

此外，该表单在您的情况下是无用的，因为您不使用它来序列化您的数据。您也可以删除表单。

当你点击按钮时，它不会提交任何东西，你的 AJAX 调用将被发送。