AJAX表单发送但PHP脚本不起作用

时间:2018-12-07 00:22:11

标签: php ajax

我已经获得了可以遍历数据库中某些产品的表单:

_initClientPool() {
        assert(!this._clientInitialized, 'Client pool already initialized');
        const clientPool = new pool_1.ClientPool(MAX_CONCURRENT_REQUESTS_PER_CLIENT, () => {
            const client = new module.exports.v1beta1(this._settings);
            logger_1.logger('Firestore', null, 'Initialized Firestore GAPIC Client');
            return client;
        });
        const projectIdProvided = this._referencePath.projectId !== '{{projectId}}';
        if (projectIdProvided) {
            return Promise.resolve(clientPool);
        }
        else {
            return clientPool.run(client => this._detectProjectId(client))
                .then(projectId => {
                this._referencePath =
                    new path_2.ResourcePath(projectId, this._referencePath.databaseId);
                return clientPool;
            });
        }
    }

形式上没有错。为了清楚起见,我添加了它。 这是将表单数据提交到单独的PHP脚本的AJAX代码:

<?php
    $sql = "SELECT * FROM products WHERE top = 'yes' and everything = 'true'"; 
    $featured = mysqli_query($conn,$sql);
?>

<?php while ($product = mysqli_fetch_assoc($featured)): ?>

<form class="myform" method="POST" class="ajax">
    <input type="hidden" name="ID" value="<?=$product['id'];?>">

    <input type="hidden" name="salec" value="<?=$product['sale'];?>">

    <input type="hidden" name="hidden_name" value="<?=$product['title'];?>">

    <input type="hidden" name="hidden_price" class="hidden_price" value="<?=$product['price'];?>">

    <input type="hidden" name="hidden_list_price" class="hidden_list_price" value="<?=$product['list_price'];?>">

    <input type="hidden" name="collect" class="collect" value="<?=$product['collection'];?>">

    <input type="hidden" name="himg" class="himg" value="<?=$product['image'];?>">

    <select name="quantity" class="quantity">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>

    <input type="submit" class="button" name="cartbtn" value="Quick Add-to-Cart">

</form>

<?php endwhile ?>

好吧,它的<script type="text/javascript"> $('.myform').on('submit', function (e) { e.preventDefault(); $.ajax({ type: 'post', url: '../PHP_Scripts/quick_cart.php', data: $('form').serialize(), success: function () { alert('form was submitted'); } }); }); </script> 并没有满足我的要求,只是一个简单的回显:

PHP_Scripts/quick_cart.php

这只是一项测试,看它是否真正起作用。警报触发良好,但未显示回声。

1 个答案:

答案 0 :(得分:2)

这是因为您正在尝试验证通过序列化表单传递的帖子提交按钮

Ajax post serialize()不包含按钮名称和值。它们不被视为“成功控件”。这是因为serialize()方法无法知道单击了什么按钮。

解决方案1::尝试用

替换PHP_Scripts/quick_cart.php
if (!empty($_POST)){
 echo "hello";
}

这通常是检查是否有post动作。

解决方案2: 如果仍要验证按钮,则应在传递给ajax之前将其串联在序列化数据中。

编辑您的JavaScript:

<script type="text/javascript">

$('.myform').on('submit', function (e) {
    e.preventDefault();
    var myform=$('.myform').serialize();
    var curSubmit = $("input[type=submit]",this);

    var myform = myform
    + '&' 
    + encodeURI(curSubmit.attr('name'))
    + '='
    + encodeURI(curSubmit.attr('value'))
;
      $.ajax({
        type: 'post',
        url: '../PHP_Scripts/quick_cart.php',
        data: myform,
        success: function () {
          alert('form was submitted');
        }
    });
});

</script>