我正在尝试使用php和jQuery创建一个简单的MySQL Admin。我从来没有使用过jQuery，所以我的代码可能非常值得。我对代码的问题是，当我点击按钮时，没有任何反应。我知道偶然的火，因为如果我在firefox中打开html文件（不是去网址，使用文件：///东西）并点击它，它会在框中显示我的PHP代码我希望返回的内容进入。我要做的第一件事是连接到指定的数据库并返回表的列表。继承我的代码
的index.html
<html>
<head>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
var Server = 'None';
var Username = 'None';
var Password = 'None';
var Database = 'None';
$("#connect").click(function() {
Server = $('#server').val();
Username = $('#username').val();
Password = $('#password').val();
Database = $('#database').val();
loadTables();
});
function loadTables() {
$.get("display.php", { server: Server, username: Username, password: Password, database: Database, content: "tables" },
function(data){
html = "<ul>";
$(data).find("table").each(function() {
html = html + "<li>" + $(this).text() + "</li>";
});
html = html + "</ul>";
$('#content').html(html);
}
);
}
</script>
</head>
<body>
<center>
<div class='connection'>
<form name='connectForm'>
Server: <input type='text' size='30' id='server' />
Username: <input type='text' id='username' />
Password: <input type='password' id='password' />
Database: <input type='text' id='database' />
<input type='button' id='connect' value='Connect' />
</form>
</div>
<div id='content'>
</div>
</center>
</body>
</html>
Display.php的
<?
mysql_connect($_GET['server'], $_GET['username'], $_GET['password'])
or die("Error: Could not connect to database!<br />" . mysql_error());
mysql_select_db($_GET['database']);
$content = $_GET['content'];
if ($content == "tables") {
$result = mysql_query("show tables");
$xml = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n";
$xml .= "<tables>";
while ($row = mysql_fetch_assoc($result)) {
$xml .= "<table>" . $row['Tables_in_blog'] . "</table>";
}
$xml .= "</tables>";
header('Content-type: text/xml');
echo $xml;
}
?>
编辑： 我已根据几个答案的组合更新了代码，但我仍然遇到同样的问题。
答案 0 :(得分：8)
好的，首先不要这样做和“那个”我的意思是：
话虽如此，您的主要问题似乎是$(#content)应为$("#content")。同时在按钮上点击onn并不是jQuery方式。尝试：
<body>
<div class='connection'>
<form name='connectForm'>
Server: <input type='text' id="server" size='30' name='server' />
Username: <input type='text' id="username" name='username' />
Password: <input type='password' id="password" name='password' />
Database: <input type='text' id="database" name='database' />
<input type='button' id="connect" value='Connect' />
</form>
</div>
<div id='content'></div>
<script type="text/javascript" src="/jquery-1.3.1.js"></script>
<script type="text/javascript">
$(function() {
$("#connect").click(function() {
$.get(
"display.php",
{
server: $("#server").val(),
username: $("#username").val(),
password: $("#password").val(),
database: $("#database").val(),
content: "tables"
},
function(data) {
$("#content").html("<ul></ul>");
$(data).find("table").each(function() {
$("#content ul").append("<li>" + $(this).text() + "</li>");
});
}
);
});
});
</script>
</body>
编辑：对上述内容进行微小更正并使用此脚本进行测试：
<?
header('Content-Type: text/xml');
echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n";
?>
<root>
<?
$tables = array('one', 'two', 'three', 'four');
foreach ($tables as $table) {
echo " <table>$table</table>\n";
}
?>
</root>
答案 1 :(得分：1)
我希望这会有所帮助。我注意到你的代码有三件事：
1）display.php不会关闭标签。
2）您使用$（#content）引用'content'div，这会引发Javascript错误。确保将此选择器封装在引号中，例如$（'＃content'）。
3）我不确定“$（”table“，xml）.text（）”。相反，使用非常酷的find（'tag'）。each（）语法来遍历XML响应。这对我来说可以替代你的函数（数据）声明：
function(data) {
htmlTable = '<ul>';
$(data).find('table').each(function(){
htmlTable = htmlTable + '<li>' + $(this).text() + '</li>'; });
htmlTable = htmlTable + '</ul>'
$('#content').html(htmlTable);
});
答案 2 :(得分：1)
这是一段代码：
<script type='text/javascript'>
function connect() {
$.ajax({
url:'display.php',
type: 'POST',
dataType:'xml',
success: {
server: $('#server').val()||'None',
username: $('#username').val()||'None',
password: $('#password').val()||'None',
database: $('#database').val()||'None',
content: "tables"
},
function(data){
$('#content').html('<ul></ul>');
var contentUL = $('#content>ul');
$(data).find('table').each(function(){
$('<li></li>').html($(this).html()).appendTo(contentUL);
});
},
'xml'
});
}
</script>
</head>
<body>
<center>
<div class='connection'>
<form id="connectForm" name='connectForm'>
Server: <input id="server" type='text' size='30' name='server' />
Username: <input id="username" type='text' name='username' />
Password: <input id="password" type='password' name='password' />
Database: <input id="database" type='text' name='database' />
<input type='button' onclick='connect();' value='Connect' />
</form>
</div>
<div id='content'>
</div>
</center>
</body>
但在我看来，使用JSON而不是xml更好更容易，使用它更容易（get函数的最后一行）：
function(data){
$('#content').html('<ul></ul>');
var contentUL = $('#content>ul');
$.each(data.tables, function(){
$('<li></li>').html(this).appendTo(contentUL);
});
},
'json');
您也可以使用jquery.form插件提交表单。它还可以使用响应更新指定的元素，例如：
$(document).ready(function() {
$('#connectForm').ajaxForm({
target: '#content'
});
});
答案 3 :(得分：0)
我不确定究竟是什么问题。但是你的$ .get回调中不需要$（function（）{}） - 将函数传递给$（）实际上将事件处理程序绑定到“ready”事件，该事件仅在页面首次加载时被调用。您只需提供一个将XML作为参数的函数（此处您将其作为“数据”，但将其称为“xml”？）并使用它。我首先阅读http://docs.jquery.com/Ajax/jQuery.get#urldatacallbacktype和http://docs.jquery.com/Events/ready#fn。此外，安装Firebug并检查错误控制台以查看JavaScript出现问题的位置 - 您可以转到“脚本”选项卡并设置断点以查看代码的执行情况，以了解出现问题的位置。< / p>
答案 4 :(得分：0)
$(#content) // This is definitely a problem.
选择器必须是字符串，因此$("#content")是正确的。
答案 5 :(得分：0)
您应该使用jQuery.forms.js插件。 http://malsup.com/jquery/form/