JQuery 的 document.ready()的困惑

深碍√TFBOYSˉ_ 2022-09-28 11:37 147阅读 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 条评论，147人围观）

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

相关阅读

相关在职人员学计算机的困惑

【来信】　　老师好，我购买了你很多课，但是学起来自己感觉没有规划。。。。所以想请教一下一般大学里的学生都是怎么规划自己学的课程【答复】　　我不知道你的背景，是在

﹏ヽ暗。殇╰゛Y/ 2022年12月03日 05:29/ 0 赞/ 104 阅读

相关 jQuery-jQuery对象的查找

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

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

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

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

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

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

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

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

相关英语学习的困惑！

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

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

相关 webpack-令人困惑的地方

Webpack是目前基于React和Redux开发的应用的主要打包工具。我想使用Angular 2或其他框架开发的应用也有很多在使用Webpack。当我第一次看到Webpa

约定不等于承诺〃/ 2022年05月13日 11:22/ 0 赞/ 286 阅读

相关 Java Torry的困惑(基本型)

问题描述 Torry从小喜爱数学。一天，老师告诉他，像2、3、5、7……这样的数叫做质数。Torry突然想到一个问题，前10、100、1000、10000……个质数的乘积

水深无声/ 2022年04月23日 04:52/ 0 赞/ 183 阅读

相关对于腰背的一些困惑

最近在和同学打篮球的时候，运球时总是出现弯腰驼背的现象，运球凌乱老被断，游戏体验感一度极差。我不禁怀疑是我腰背的力量太薄弱导致我身体老往前倾，以至于无法保持一个腰背较竖直的

阳光穿透心脏的1/2处/ 2022年04月16日 23:51/ 0 赞/ 236 阅读

相关（Linux）ubuntu的困惑

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

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

相关 SOA的困惑

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

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