JQuery yardım başlıyor

5 Cevap php

Ben php ve jQuery ile basit bir MySQL Yönetici şeyi yapmaya çalışıyorum. Ben bu yüzden benim kod muhtemelen oldukça lol-layık jQuery hiç kullanmadım. Ben kodu ile yaşıyorum sorun ben düğmesine tıkladığınızda, hiçbir şey olmuyor yani. Ben ateş (file :/ / / bir şey kullanarak, url gitmiyor) olarak html dosyasını açın ve onu tıklarsanız bile yangınlar, çünkü ben iade içerik gitmek istiyorum kutusuna benim php kodunu gösterir biliyorum . Ben yapmaya çalışıyorum ilk şey belirtilen veritabanına bağlanmak ve tabloların bir listesini döndürür olduğunu. Buyrun bu benim kod

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: I have updated the code according to a mix of a few answers, but I'm still having the same problem.

5 Cevap

Tamam, öncelikle don't do that ve ben demek "" by:

  • Javascript DB bağlantı ayrıntıları koymayın; ve
  • Onu sterilize etmeden kullanıcı girişi kullanmayın. Sadece kesmek soruyorsun.

Söyleniyor, ana sorun, $(#content) olması gerektiği gibi görünüyor $("#content"). Ayrıca butona onclick koyarak gerçekten jQuery yol değildir. Deneyin:

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

Yukarıdaki ve bu komut ile test için Edit: ufak düzeltmeler:

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

Bu yardımcı olur umarım. Ben kodu hakkında üç şey fark ettim:

1) display.php etiketi kapanmıyor.

2) Bir JavaScript hata atar hangi $ (# content) kullanarak div 'içeriği' bakın. $ ('# Content') gibi, tırnak içinde bu seçici saklanması emin olun.

3) "$ (" table ", xml). Text ()" hakkında emin değilim. Bunun yerine, çok serin find ('tag') kullanılır. Each () sözdizimi XML yanıt yürüyelim. Bu fonksiyonu (veri) deyimi için bir yedek olarak benim için çalıştı:

function(data) { 
	htmlTable = '<ul>';
	$(data).find('table').each(function(){ 
		htmlTable = htmlTable + '<li>' + $(this).text() + '</li>'; });
	htmlTable = htmlTable + '</ul>'
	$('#content').html(htmlTable);
});

İşte kod çalışma parçasıdır:

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

Ama bence o onunla (get işlevlerinin son satırlarını) çalışmak daha kolay, yerine xml JSON kullanmak daha iyi ve daha kolay:

              function(data){
                  $('#content').html('<ul></ul>');
                  var contentUL = $('#content>ul');
                  $.each(data.tables, function(){
                    $('<li></li>').html(this).appendTo(contentUL);
                  });                                        
              },
              'json');

Ayrıca bir formu göndermek için jquery.form eklentisini kullanabilirsiniz. Ayrıca tepki, örneğini kullanarak belirtilen unsurları güncelleyebilirsiniz:

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

Ben soru tam olarak ne olduğundan emin değilim. Ama sizin $ içindeki $ (function () {}) gerekmez geri almak -. Sayfanız ilk yükleme olduğunda $ (bir işlev geçen) aslında sadece çağrılır "hazır" olayına bir olay işleyicisi bağlar . Sen sadece bir parametre (burada? "Veri" olarak var ama "xml" olarak referans) olarak XML alır bir işlev sağlamak ve bunu kullanmak. I http://docs.jquery.com/Ajax/jQuery.get#urldatacallbacktype okuyarak başlayın, ve http://docs.jquery.com/Events/ready#fn. Istiyorum Ayrıca, Firebug yüklemek ve JavaScript sorunlarınız nerede görmek için hata konsolu check out - "Script" sekmesine gidin ve kod şeyler yanlış gidiyor nerede bir duygu almak için yürütme nasıl görmek için kesme noktaları ayarlayabilirsiniz.

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

Seçiciler dizeleri olmalıdır, bu yüzden $("#content") doğru olacaktır.

etiketler