ajax得不到input的值,JQ的.val()获取不到用户输入值的特殊情况处理

在使用Ajax时,发现无法从input元素获取用户输入的最新值,问题出在直接使用$(".s").val()获取的值是初始值,而非用户输入后的值。通过添加.change()事件监听,每次输入值改变时更新地址栏,解决了这个问题。关键在于理解JavaScript的执行顺序,确保在事件触发时获取input的当前值。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在学习js和jq,无意今天翻看自己网站的js,发现还有一个问题没解决,就是采取ajax后搜索路径不对的,一直都是显示一个错误的地址,因为自己在本站搜索用得少,也没有造成js错误,只是对不上号而已也就没理了。这也算是一个比较奇葩的问题吧,可能就只有我一个人遇到~,在一个带有默认值的input输入框中,

我试图用jq把输入框的值提取出来,我用了alert来查看,当我输入内容后,即改变了默认的初始值,再点击alert,没问题,能正确弹出我输入的内容。可是当我试图用$("输入框的class").val()来充当地址栏里面的变量的时候,地址栏的变量并不会变,一如既往地显示输入框的初始值,用alert($("输入框的class").val())和document.write($("输入框的class").val())这两种方法输出的值都是输入后的值。例如我输入“这是用户输入的值”

$('#button1').click(function(){ alert($("#s").val());})//能正确弹出“这是用户输入的值”

$('#button2').click(function(){document.write($("输入框的ID").val());})//能正确输出“这是用户输入的值”

$(".s").each(function(index) {

if ($(this).attr("action")) {

document.URL ='//www.mizuiren.com?s=' + $(".s").val() + '&ok=搜索';

}});//地址栏输出的地址为//www.mizuiren.com/?s=我是初始值&ok=搜索,失败获取!!!

百思不得其解,刚好看到一个jq监听事件.change()才略微有点思路,把这个加上去之后果然就可以正确取到输入后的值,即是下面的代码:

$(".s").each(function(index) {

if ($(this).attr("action")) {

$(".s").change(function () {

document.URL ='//www.mizuiren.com?s=' + $(".s").val() + '&ok=搜索';

}});});//地址栏输出的地址为//www.mizuiren.com/?s=这是用户输入的值&ok=搜索,获取成功!!!

但是至于为何直接用$(".s").val()的alert和document.write能正确提取到用户输入的值而给地址栏赋值却失败其实是因为没弄清js的执行顺序,alert和document.write我用了点击事件,当我在输入框输入内容后,再点击按钮让$(".s").val()的值alert和document.write出来,这完全没有问题的,因为它获取的是点击之后输入框里面的值,也就是已经改变了的值,而直接通过赋值的话是取的原始值,加个.change(),也就相当于加了个事件,每改变一次值就会触发赋值,所以取的都是最后改变的值而不是初始值。

所以每每取输入框的值的时候一定要放在事件函数里面,这样才能取得最新的值。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值