javascript - 通过ajax点击按钮调用php脚本

Question

我有一个按钮，单击它我希望运行将调用 php 脚本结果并在特定 div 下显示数据的 ajax。但是它不是这样工作的，当我检查控制台时，没有任何值传递给 ajax。

谁能改正代码

<script>

$(document).ready(function(){
    $('#generate').change(function(){

        var generateid = $('#generate').val();
        console.log($('#generate'))
        if(generateid != 0)
        {

            $.ajax({
                type:'post',
                url:'a_generatecoupon.php',
                data:{id:generateid},
                cache:false,
                success: function(returndata){
                    $('#coupon_detail').html(returndata);
                    console.log(returndata)
                }
            });

        }
    })
})
</script>

<div class="form-group">
    <label class="control-label col-md-3"> Coupon Code</label>
    <div class="col-md-3">
        <div type="submit" class="btn green" id="generate">Generate</div>
    </div>
</div>

<div id="coupon_detail">

</div>

a_generatecoupon.php代码

<?php
function getRandomCode(){
    $an = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ-)(.:,;";
    $su = strlen($an) - 1;
    return substr($an, rand(0, $su), 1) .
            substr($an, rand(0, $su), 1) .
            substr($an, rand(0, $su), 1) .
            substr($an, rand(0, $su), 1) .
            substr($an, rand(0, $su), 1) .
            substr($an, rand(0, $su), 1);
}

?>  

<label class="control-label col-md-3"> Coupon Code</label>
<div class="col-md-3">
    <?php echo getRandomCode(); ?>
</div>

Answer 1

我将 change 更改为 click 事件，现在您的脚本正在运行。也添加按钮..

<script>

    $(document).ready(function(){
        $('#generate').click(function(){

            var generateid = $('#generate').val();
            console.log($('#generate'))
            if(generateid != 0)
            {

                $.ajax({
                    type:'post',
                    url:'a_generatecoupon.php',
                    data:{id:generateid},
                    cache:false,
                    success: function(returndata){
                        $('#coupon_detail').html(returndata);
                        console.log(returndata)
                    }
                });

            }
        })
    })
    </script>

    <div class="form-group">
        <label class="control-label col-md-3"> Coupon Code</label>
        <div class="col-md-3">
            <input type="submit" class="btn green" value="Generate" id="generate">
        </div>
    </div>

    <div id="coupon_detail">

    </div>