input监听-取值-发送ajax问题-

做项目遇到一个问题:

<input type="email" placeholder="Enter your email" id="ben_enterEmail"/>
<input type="button" id="ben_getOff" value="GET 10% OFF"/>

输入email后,点击按钮发送eamil的ajax。
最开始用的是监听input:

$('#username').bind('input propertychange', function() {  
    $('#ben_getOff').click(function(){
        $.ajax......
    });  
}); 

这样做之后出现个可怕的问题:点击按钮后,会发送n个ajax请求(n=input.val().length).
后面使用的代码为:

$("#ben_enterEmail").blur(function(){
    $('#ben_getOff').click(function(){
        var ben_email =  $("#ben_enterEmail").val();
        console.log('value:'+ben_email);//这里能获取到input里当前的值(blur之后input框中的内容)
        $.ajax......
    });  
})

补充:上面用blur的写法也是错误的(好久没写,忘了),因为之前是有个定时器10S才出现点击按钮。
上面blur写法的问题是,只要你输入框blur,你的#ben_enterEmail(input框)就会缓存一次,当有多次缓存的时候,再去点击按钮发送ajax,就会出现有几个缓存的DOM就发送几次ajax。最后改为:

$("#ben_getOff").on('click', function () {
    var ben_email = $("#ben_enterEmail").val();
    if (ben_email != null) {
        $.ajax({
            url: "index.php?route=module/journal2_newsletter/subscribe",
            type: "post",
            dataType: 'json',
            data: "email=" + ben_email,
            success: function (json) {
                if (json.status == "success") {
                    create_tip({type: "OK", top_tip: json.messagetop, bottom_tip: json.messagebottom});
                } else {
                    create_tip({type: "email_fail", top_tip: json.messagetop, bottom_tip: json.messagebottom});
                }
            }
        });
    }
})

其实之前是想多了,input监听、blur都不需要用。担心不能取到当前的input里的值,但是后面的使用发现,click里面就能取到当前input的值(唉!最简单的东西都忘了)。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值