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

开始jQuery帮助

  •  0
  • 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 年前
        1
  •  8
  •   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>
    
        2
  •  1
  •   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);
    });
    
        3
  •  1
  •   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'
        });
    });
    
        4
  •  0
  •   bhollis    16 年前

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

        5
  •  0
  •   superUntitled    16 年前

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

        6
  •  0
  •   davidsleeps    13 年前
    $(#content) // This is definitely a problem. 
    

    $("#content")