Начало справки jQuery - PullRequest
Новая
       39

Начало справки jQuery

0 голосов
/ 15 февраля 2009

Я пытаюсь сделать простую вещь для администрирования MySQL с помощью php и jQuery. Я никогда не использовал jQuery, так что мой код, вероятно, вполне достойный. Проблема с кодом заключается в том, что когда я нажимаю кнопку, ничего не происходит. Я знаю четные события, потому что если я открою html-файл в Firefox (не обращаясь к URL-адресу, используя file: /// thing) и щелкну по нему, он отобразит мой 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;
}
?>

EDIT: Я обновил код в соответствии с сочетанием нескольких ответов, но у меня все еще остается та же проблема.

Ответы [ 6 ]

8 голосов
/ 15 февраля 2009

Хорошо, во-первых, не делайте этого , и под "этим" я подразумеваю:

  • Не помещайте детали подключения к БД в Javascript; и
  • Не используйте ввод от пользователя без его очистки. Вы просто просите, чтобы вас взломали.

При этом ваша главная проблема в том, что $(#content) должно быть $("#content"). Кроме того, нажатие на кнопку на самом деле не способ 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 голос
/ 15 февраля 2009

Вот рабочий фрагмент кода: 

<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'
    });
});
1 голос
/ 15 февраля 2009

Надеюсь, это поможет. Я заметил три вещи в вашем коде:

1) display.php не закрывает тег.

2) Вы ссылаетесь на div 'content', используя $ (# content), который выдает ошибку 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);
});
0 голосов
/ 15 февраля 2009

Вы должны использовать плагин jQuery.forms.js. http://malsup.com/jquery/form/

0 голосов
/ 15 февраля 2009 
$(#content) // This is definitely a problem.

Селекторы должны быть строками, поэтому $("#content") будет правильным.

0 голосов
/ 15 февраля 2009

Я точно не знаю, в чем вопрос. Но вам не нужен $ (function () {}) внутри вашего обратного вызова $ .get - передача функции в $ () фактически связывает обработчик событий с событием «ready», которое вызывается только при первой загрузке вашей страницы. , Вы просто предоставляете функцию, которая принимает ваш XML в качестве параметра (здесь он у вас есть как «данные», но вы ссылаетесь на него как «xml»?) И используете его. Я бы начал с чтения http://docs.jquery.com/Ajax/jQuery.get#urldatacallbacktype, и http://docs.jquery.com/Events/ready#fn. Кроме того, установите Firebug и проверьте консоль ошибок, чтобы увидеть, где у вас проблемы с JavaScript - вы можете перейти на вкладку «Сценарий» и установить точки останова. чтобы увидеть, как работает ваш код, чтобы понять, что происходит не так.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...