开始 jQuery 帮助答案

【问题标题】：Beginning jQuery help开始 jQuery 帮助
【发布时间】：2010-10-07 17:18:47
【问题描述】：

我正在尝试使用 php 和 jQuery 制作一个简单的 MySQL Admin。我从未使用过 jQuery，所以我的代码可能非常值得大笑。我遇到的代码问题是，当我单击按钮时，什么也没有发生。我知道偶数会触发，因为如果我在 firefox 中打开 html 文件（不转到 url，使用 file:/// 东西）并单击它，它会在我希望返回的内容进入的框中显示我的 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' />&nbsp;
                    Username: <input type='text' id='username' />&nbsp;
                    Password: <input type='password' id='password' />&nbsp;
                    Database: <input type='text' id='database' />&nbsp;
                    <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;
}
?>

编辑：我已经根据几个答案的组合更新了代码，但我仍然遇到同样的问题。

【问题讨论】：

标签： php javascript jquery mysql

【解决方案1】：

好的，首先不要那样做，我所说的“那样”是指：

不要将数据库连接详细信息放在 Javascript 中；和
请勿在未净化的情况下使用来自用户的输入。你只是要求被黑。

话虽如此，您的主要问题似乎是$(#content) 应该是$("#content")。在按钮上放置一个 onclick 并不是真正的 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>

【讨论】：

我根据你的回答更新了我的代码，但我仍然遇到同样的问题。新代码现在有问题了。
您在每个循环中添加了一个关闭。认真安装 Firefox，获取 Firebug 并查看错误控制台。
好的，我解决了这个问题，用 firebug 尝试了 firefox，然后查看了我的错误控制台，没有任何错误，但是，它仍然无法正常工作。
直接到 display.php 是否正确调出 XML 文档？你有一个根元素吗？
另外，您的表格文档顶部似乎没有标题。

【解决方案2】：

我希望这会有所帮助。我注意到关于您的代码的三件事：

1) display.php 不会关闭标签。

2) 您使用 $(#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);
});

【讨论】：

Firebug 是一个很棒的工具，我在查看这段代码时肯定使用过它。

【解决方案3】：

这是一段工作代码：

<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'
    });
});

【讨论】：

【解决方案4】：

我不确定问题是什么。但是您不需要 $.get 回调中的 $(function() {}) - 将函数传递给 $() 实际上会将事件处理程序绑定到“就绪”事件，该事件仅在您的页面首次加载时被调用.您只需提供一个将您的 XML 作为参数的函数（在这里您将其作为“数据”但将其引用为“xml”？）并使用它。我会先阅读http://docs.jquery.com/Ajax/jQuery.get#urldatacallbacktype 和http://docs.jquery.com/Events/ready#fn。此外，安装 Firebug 并检查错误控制台以查看您的 JavaScript 出现问题的位置 - 您可以转到“脚本”选项卡并设置断点以查看您的代码是如何执行的，以了解哪里出了问题。

【讨论】：

【解决方案5】：

您应该使用 jQuery.forms.js 插件。 http://malsup.com/jquery/form/

【讨论】：

【解决方案6】：

$(#content) // This is definitely a problem.

选择器必须是字符串，所以$("#content") 是正确的。

【讨论】：