Javascript 简单脚本不执行
[英]Javascript simple script doesn't execute
问题描述
I've always been hesitant to learn JS since I have to go out of my way to debug the script.
我一直对学习 JS 犹豫不决，因为我不得不通过 go 来调试脚本。 The support for such things is poor compared to IDEs for C#/C++ etc.与 C#/C++ 等的 IDE 相比，对这些东西的支持很差。
I'm trying a simple PHP and JS script to retrieve data from my MySQL database, but "onchange" doesn't seem to be triggered:我正在尝试一个简单的 PHP 和 JS 脚本来从我的 MySQL 数据库中检索数据，但似乎没有触发“onchange”：
<!DOCTYPE HTML>
<html>
<head>
<script type='text/javascript'>
function ShowUser(name)
{
if(name == "")
{
document.getElementById("display").innerHTML = "Please enter a username to check";
return;
}
if(window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById("display").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET", "index.php?uName=" + name, true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<?php
$data = array();
if(!empty($_GET['uName']))
{
$r = mysql_connect("localhost", "root", "pass") or die("Couldn't connect to db");
mysql_select_db("db", $r) or die ("Couldn't select db");
$q = mysql_query("select * from users where uName = '{$_GET['uName']}'") or die("Couldn't query table");
$data = mysql_fetch_assoc($q);
mysql_close($r);
}
?>
<input type="text" name="fUName" onchange="ShowUser(this.value);" style="width:125px;">
</form>
<div id="display"><?php print_r($data); ?></div>
</body>
</html>
It must be something silly I'm missing.我想念的东西一定很愚蠢。 Most of this code was taken from W3schools and put with my own PHP and HTML.大部分代码取自 W3schools，并与我自己的 PHP 和 HTML 一起使用。
Thanks for any help.谢谢你的帮助。
4 个解决方案
解决方案1
3 已采纳 2011-07-13 03:06:11
It looks like the reason your code isn't even being called is because the onchange event isn't triggered until after the text input has lost focus (at least, that's what happens in Chrome).看起来您的代码甚至没有被调用的原因是因为直到文本输入失去焦点之后才会触发onchange事件（至少，这就是 Chrome 中发生的情况）。 So you're probably changing the value of the text box like crazy, but never clicking outside of it, so nothing happens.因此，您可能正在疯狂地更改文本框的值，但从不点击它之外，所以什么也没有发生。
解决方案2
1 2011-07-13 03:10:03
There are actually a number of wonderful tools out there such as the Closure JavaScript compiler , which can perform type-checking and other static analysis of JavaScript, the Chrome developer tools , which make it possible to test JavaScript on the fly and observe and debug the execution of JavaScript, and Firefox's Firebug add-on which is comparable to the developer tools built into Chrome. There are actually a number of wonderful tools out there such as the Closure JavaScript compiler , which can perform type-checking and other static analysis of JavaScript, the Chrome developer tools , which make it possible to test JavaScript on the fly and observe and debug the执行 JavaScript 和 Firefox 的Firebug插件，该插件可与 Chrome 内置的开发人员工具相媲美。 (See also my post about type-safety and testability of JavaScript in which I express my surprise at the great tooling). （另请参阅我关于 JavaScript 的类型安全和可测试性的帖子，其中我对出色的工具表示惊讶）。
I did a test to see if 'onchange' was the problem in Chrome by visiting 'about:blank', and inserting*:我通过访问'about：blank'并插入*进行了测试以查看'onchange'是否是Chrome中的问题：
<input type="text" onchange="document.write('changed')" />
And I observed that the change event is not called until you hit enter and finalize the content of the box.而且我观察到，在您按下回车键并最终确定框的内容之前，不会调用更改事件。 Is the bug that you were expecting it to trigger each time a new letter was entered?您期望它在每次输入新字母时触发的错误吗？ You might want to load your page in Chrome or Firebug and look at the script console to see if there are any errors.您可能希望在 Chrome 或 Firebug 中加载您的页面并查看脚本控制台以查看是否有任何错误。
*In the developer tools in Chrome, it is very easy to alter the DOM of a page to try out new things, and add arbitrary JavaScript in the console to prototype things before implementing them. * 在 Chrome 的开发者工具中，很容易改变页面的 DOM 来尝试新事物，并在控制台中添加任意 JavaScript 以在实现之前对事物进行原型化。
Also, you may find the Google JavaScript style guide useful to avoid staying out of hot water.此外，您可能会发现Google JavaScript 风格指南有助于避免远离热水。
解决方案3
0 2011-07-13 03:07:10
On change does not fire until you move focus out of the input box.在您将焦点移出输入框之前，更改不会触发。
If you want a good debugger use one of:如果您想要一个好的调试器，请使用以下之一：
- Chrome/Safari's webkit inspector (aka developer tools) Chrome/Safari 的 webkit 检查器（又名开发者工具）
- The Firebug addon in Firefox Firefox 中的 Firebug 插件
- The developer tools in IE8/9 IE8/9 中的开发者工具
These tools are every bit as good at debugging Javascript as IDEs for C#/C++.这些工具在调试 Javascript 方面与 C#/C++ 的 IDE 一样出色。
解决方案4
0 2011-07-13 03:07:45
To debug javascript, I would recommend using the javascript console in Chrome's web inspector or the Firebug extension for firefox.要调试 javascript，我建议在 Chrome 的 web 检查器中使用 javascript 控制台或 ZD6A5C9544ECA9B5CE2C223 的 Firebug 扩展Opera also has their own javascript console called dragonfly. Opera 也有自己的 javascript 控制台，称为蜻蜓。
Taken from a Google Chome help page:取自 Google Chome 帮助页面：
There are a couple of ways to view JavaScript errors and work to debug them in Google Chrome:有几种方法可以查看 JavaScript 错误并在 Google Chrome 中进行调试：
JavaScript Console: click the Page menu icon and select Developer > JavaScript Console. JavaScript 控制台：单击页面菜单图标和 select 开发人员 > JavaScript 控制台。 From here, you'll be able to view errors in the JavaScript execution, and enter additional JavaScript commands to execute.从这里，您将能够查看 JavaScript 执行中的错误，并输入其他 JavaScript 命令来执行。
JavaScript Debugger: available as Page menu icon > Developer > Debug JavaScript, the debugger provides a command prompt from which you can set breakpoints, backtrace, and more. JavaScript 调试器：作为页面菜单图标 > 开发人员 > 调试 JavaScript 提供，调试器提供了一个命令提示符，您可以从中设置断点、回溯等。 Type help at the debugger command line to get started.在调试器命令行中键入帮助以开始。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.