JQuery 的 document.ready()的困惑

深碍√TFBOYSˉ_ 2022-09-28 11:37 158阅读 0赞

## Jquery作用域问题 ##

写了一个简单的登陆界面,学习Jquery的Ajax应用,如下:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>AJax</title>
        <style> body, input, select, button, p { font-size: 28px; line-height:1.7; } </style>
    </head>
    <body>
    
        用户名:<input id="username" type="text" style="width:200px"><br/><br/>
        密码  :  <input id="pwd" type="password" style="width:200px"><br/><br/>
        <button id="getsearch">get查询</button>
        <button id="postsearch">post查询</button>
    
        <p id="searchResult"></p>
    
    
        <script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script>
        </body>
        </html>

然后我又写了Jquery代码如下:

<script type="text/javascript">
            var username = $("#username").val();
            var pwd = $("#pwd").val();
            $(document).ready(function() { 
                $("#getsearch").click(function() { 
    
                    $.ajax({ 
                        type: "GET",    
                        url: '/servlet大作业/servlet/JsonServlet?username='+username+'&pwd='+ pwd,
                        dataType: "json",
                        success: function(data) { 
                            if (data.success) { 
                                $("#searchResult").html(data.msg);
                            } else {
                                $("#searchResult").html(data.msg);                      
                            }  
                        },
                        error: function(jqXHR){      
                            alert("发生错误：" + jqXHR.status);  
                        },     
                    });
                    });
    
            });
            </script>

注意上面代码的

var username = $("#username").val();
            var pwd = $("#pwd").val();

和

url: '/servlet大作业/servlet/JsonServlet?username='+username+'&pwd='+ pwd,

**然后接下来我自认为代码写的无比正确,然而令我出乎意料的事情出现了,测试的时候,却只能获取到username,而获取不到pwd.**

然后我又修改了以下代码:

<script type="text/javascript">
    
            $(document).ready(function() { 
                $("#getsearch").click(function() { 
                     var username = $("#username").val();
                     var pwd = $("#pwd").val();
    
                    $.ajax({ 
                        type: "GET",    
                        url: '/servlet大作业/servlet/JsonServlet?username='+username+'&pwd='+pwd,
                        dataType: "json",
                        success: function(data) { 
                            if (data.success) { 
                                $("#searchResult").html(data.msg);
                            } else {
                                $("#searchResult").html(data.msg);                      
                            }  
                        },
                        error: function(jqXHR){      
                            alert("发生错误：" + jqXHR.status);  
                        },     
                    });
                        });
    
            });
                </script>

再次测试,完美获取数据.

到这儿,我算是明白了,原来我是不懂 $(document).ready() 这个方法啊,

> 学习jQuery的第一件事是：如果你想要一个事件运行在你的页面上，你必须在(document).ready()里调用这个事件。所有包括在(document).ready()里面的元素或事件都将会在DOM完成加载之后立即加载，并且在页面内容加载之前。

\*\*但是话又说回来,为什么可以获取username的输入,却获取不到pwd的输入呢?????  
此处困惑不解,望知情者留言解答\*\*

参考链接[jquery $(document).ready() 与window.onload的区别][jquery _document_.ready_ _window.onload]

[jquery _document_.ready_ _window.onload]: http://www.jb51.net/article/21628.htm

发表评论取消回复

表情：

评论列表（有 0 条评论，158人围观）

还没有评论，来说两句吧...

相关阅读

相关 Linux下的^M困惑

我们有时在Windows编辑的文件，放到了Linux环境中，打开文件，可能发现每行结尾多了一个“^M”，导致一些在Windows下能执行的解析程序，放到了Linux中，执行就会

超、凢脫俗/ 2023年03月13日 02:49/ 0 赞/ 8 阅读

相关 jQuery-jQuery对象的查找

children():查找子元素 find():查找后代元素 parent():查找父元素 prevAll():查找某元素前面的所有元素 siblings():

太过爱你忘了你带给我的痛/ 2022年12月02日 12:26/ 0 赞/ 178 阅读

相关 JQuery 的 document.ready()的困惑

Jquery作用域问题写了一个简单的登陆界面,学习Jquery的Ajax应用,如下: <meta http-equiv="Content-Type" cont

深碍√TFBOYSˉ_/ 2022年09月28日 11:37/ 0 赞/ 159 阅读

相关 B/S困惑讲解（C/S XML HTML javascript jquery ajax）

学习B/S，可谓一路上疑惑重重，很多名词虽然早闻其大名，却未曾见过真容。不怕不知道就怕不知道！HTML、CSS、![Center][]JavaScript、XML、jQuer

本是古典何须时尚/ 2022年08月13日 14:46/ 0 赞/ 39 阅读

相关英语学习的困惑！

最近在苦学英语，一直是在看李阳的疯狂视频和软件来学习，可是又觉的他的句子都比较简单，打算看一些有难度的文章，不过一看全是生词，于是又打算被单词，又觉的更麻烦了，太多单词了，想想

不念不忘少年蓝@/ 2022年08月10日 12:45/ 0 赞/ 203 阅读

相关 JQuery的animate

animate(params, options) ：用于创建自定义动画的函数。这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属

Myth丶恋晨/ 2022年08月02日 09:38/ 0 赞/ 205 阅读

相关（Linux）ubuntu的困惑

声明：以下言论有些是自己的猜测并没有经过证实! 上周末以为可以偷个懒好好休息下，为了接下来越来越忙碌的开发做好身体准备，一直想装上Linux系统玩玩，可是一直都没有充分的时间

迈不过友情╰/ 2021年12月10日 09:49/ 0 赞/ 268 阅读

相关 SOA的困惑

最近项目里需要兼写一些Asp.NET的管理后台，才发现自己有一段时间没有碰过Asp.NET的开发了。前一段时间一直在做BizTalk的项目和开发，做起来有些手生。不过

浅浅的花香味﹌/ 2021年11月13日 16:14/ 0 赞/ 428 阅读

相关 jQuery教程——jQuery的快速入门

目录什么是 jQuery ？基础jQuery 语法 jQuery 选择器 jQuery DOM 操作 jQuery 操作 CSS

女爷i/ 2021年09月22日 22:26/ 0 赞/ 749 阅读

相关《锋利的jquery》认识jquery总结

1. window.onload和$(document).ready()执行时机不同，前者必须等待网页中所有的内容加载完毕后，后者是所有dom结构绘制完毕后；编写个数前者只允

- 日理万妓/ 2021年06月24日 15:59/ 0 赞/ 506 阅读