代码之家 › 专栏 › 技术社区 › The.Anti.9

开始jQuery帮助

mysql jquery javascript php

The.Anti.9 · 技术社区 · 16 年前

<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;
}
?>

编辑: 我已经根据一些答案的组合更新了代码,但是我仍然有同样的问题。

6 回复 | 直到 15 年前

cletus 16 年前

好的,首先 不要那样做

不要在Javascript中添加数据库连接详细信息;和
未经消毒,请勿使用用户输入。你只是要求被黑客攻击。

$(#content) 应该是 $("#content")

<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>

Jeff 16 年前

我希望这有帮助。我注意到您的代码有三点:

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

zihotki 16 年前

下面是一段工作代码:

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

$(document).ready(function() {
    $('#connectForm').ajaxForm({
        target: '#content'
    });
});

bhollis 16 年前

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

superUntitled 16 年前

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

davidsleeps 13 年前

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

$("#content")