url中存在优惠券时如何自动发送?

时间:2021-06-25 16:43:37

标签: php jquery ajax

我创建了一个折扣优惠券系统,一切正常。

从下面的表格我通过ajax发送信息

<div class="form-group relative">
    <div class="response">
        <div class="success"></div>
        <div class="warning"></div>
    </div>
    <form id="coupon" class="mt-2em" method="post" autocomplete="off" enctype="multipart/form-data">
        <div class="form-group flex justify-between">
            <div class="promo">
                <input type="text" name="couponCode" maxlength="15" placeholder="Enter the coupon">
            </div>
            <div class="btn-promo">
                <input id="submit_coupon" type="submit" name="ajaxData" value="Apply" formnovalidate>
            </div>
        </div>
    </form>
</div>

这是我的ajax代码

$(function() {
    var frm = $('#coupon');
    frm.submit(function(e){
        e.preventDefault();
        var formData = frm.serialize();
        formData += '&' + $('#submit_coupon').attr('name') + '=' + $('#submit_coupon').attr('value');
        
        var url = "coupon.php";
        $.ajax({
            type: frm.attr('method'),
            url: url,
            data: formData,
        })
        .done(function(data) {

            let res = JSON.parse(data);
            if(res.status){
                $(".checkout").load(" .checkout").fadeIn();
                $(frm)[0].reset();
                $(frm).hide();
            } else {
                if (typeof (res.message) === 'object') {
                    for (let name in res.message) {
                        $('.error').remove();
                        let msg = '<span class="error">' + res.message[name] + '</span>';
                        $(msg).insertAfter($('[name=' + name + ']', '#coupon'));
                        $('.error').fadeIn().delay(5000).fadeOut(5000);
                    }
                } else {
                    $('.warning').fadeIn();
                    $('.warning').html(res.message).delay(8000).fadeOut(8000);
                }
            }
        })
        .fail(function( jqXHR, textStatus ) {
            console.log(jqXHR.responseText);
            console.log("Request failed: " + textStatus );
        })
    });
});

这个怎么提都行,但是ajax代码一样,怎么在URL共享优惠券时自动发送优惠券代码?

也就是说,如果我在 url 中有以下内容:example.com/?codecoupon=EADEAA 所以我想只在 URL 中有这些参数时自动将该信息发送到 Ajax。

1 个答案:

答案 0 :(得分:1)

在您的 HTML 中:

<input type="text" name="couponCode" maxlength="15" placeholder="Enter the coupon" value="<?= isset($_GET['codecoupon']) ? $_GET['codecoupon'] : '' ?>">

(为了避免 XSS 注入,你要用 htmlspecialchars 包裹它)

在您的 JS 中,您应该将发送代码设为一个函数,然后调用它:

  1. 提交时
  2. 加载时:仅当输入不为空时。

脚本看起来像这样:

$(function() {
    var frm = $('#coupon');
    
    frm.submit(function(e){
        e.preventDefault();
        sendCoupon(frm);
    });
    
    if ($("input[name='couponCode']").val() !== "") {
        sendCoupon(frm);
    }
    
    function sendCoupon(frm) {
        var formData = frm.serialize();
        formData += '&' + $('#submit_coupon').attr('name') + '=' + $('#submit_coupon').attr('value');
        
        var url = "coupon.php";
        $.ajax({
            type: frm.attr('method'),
            url: url,
            data: formData,
        })
        .done(function(data) {

            let res = JSON.parse(data);
            if(res.status){
                $(".checkout").load(" .checkout").fadeIn();
                $(frm)[0].reset();
                $(frm).hide();
            } else {
                if (typeof (res.message) === 'object') {
                    for (let name in res.message) {
                        $('.error').remove();
                        let msg = '<span class="error">' + res.message[name] + '</span>';
                        $(msg).insertAfter($('[name=' + name + ']', '#coupon'));
                        $('.error').fadeIn().delay(5000).fadeOut(5000);
                    }
                } else {
                    $('.warning').fadeIn();
                    $('.warning').html(res.message).delay(8000).fadeOut(8000);
                }
            }
        })
        .fail(function( jqXHR, textStatus ) {
            console.log(jqXHR.responseText);
            console.log("Request failed: " + textStatus );
        });
    }
});