Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [ajax] kłopot z Integracją Ajax'a z MySQL
GiMax
post 13.04.2006, 03:22:56
Post #1





Grupa: Zarejestrowani
Postów: 2
Pomógł: 0
Dołączył: 13.04.2006

Ostrzeżenie: (0%)
-----

Witam

Mam problem z integracją mysql'a z ajaxem, własnie robie czat i w sieci natknołem się na taką instrukcje jednak nic się się nie dodaje do bazy mimo prawidłowego wypełnienia danych dostępowych sad.gif i pytanie do expertów co tu może być zle ?

na stronie index.html pojawia się tylko przycisk z napisem "add to post" nie ma nawet miejsca gdzie wpisywało by się tekst, po kliknieciu pokazuje ponizej na ułamek sekundy "loading" i tyle i do bazy nic się nie dodaje bo co miało by się dodać skoro się nie da wpisać tekstu :|

Utworzyłem baze według instrukcji

[SQL] pobierz, plaintext 
  1. CREATE TABLE ´informit_ajax´ (
  2.  ´id´ int(11) NOT NULL AUTO_INCREMENT,
  3.  ´date´ datetime NOT NULL DEFAULT ’0000-00-00 00:00:00’,
  4.  ´description´ longtext NOT NULL,
  5.  ´title´ varchar(100) NOT NULL DEFAULT ’’,
  6.  PRIMARY KEY (´id´)
  7. ) TYPE=MyISAM;
[SQL] pobierz, plaintext


Plik index.html

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>How to Integrate a Database with AJAX</title>
  5. <link href="css/layout.css" rel="stylesheet" type="text/css" />
  6. <script src="js/request.js"></script>
  7. <script src="js/post.js"></script>
  8. </head>
  9.  
  10. <body onload="javascript:makeRequest('services/post.php?method=get');">
  11. <div id="layout" align="center">
  12.       <div id="posts"></div>
  13.       <p><input type="button" value="add a post" onmousedown="javascript:makeRequest('services/post.php?method=save');" /></p>
  14.       <p><div id="loading"></div></p>
  15. </div>
  16.  
  17. </body>
  18. </html>
[HTML] pobierz, plaintext


mysql_connect.php

[PHP] pobierz, plaintext 
  1. <?
  2. DEFINE (&#8217;DB_USER’, ’moja nazwa uzytkownika w bazie’);
  3. DEFINE (&#8217;DB_PASSWORD’, ’hasło’);
  4. DEFINE (&#8217;DB_HOST’, ’localhost’);
  5. DEFINE (&#8217;DB_NAME’, ’nazwa bazy danych’);
  6. $dbc = @mysql_connect (DB_HOST, DB_USER, DB_PASSWORD) OR die (&#8217;Could not connect to MySQL: ’ . mysql_error() );
  7. ?>
[PHP] pobierz, plaintext


Post.class.php

[PHP] pobierz, plaintext 
  1. <?
  2.  
  3. class Post
  4. {
  5. 	var $table;
  6.  
  7. 	function Post()
  8. 	{
  9. 		require_once('mysql_connect.php');
  10. 		$this->table = "informit_ajax";
  11. 	}
  12.  
  13. 	function dbConnect()
  14. 	{
  15. 		DEFINE ('LINK', mysql_connect (DB_HOST, DB_USER, DB_PASSWORD));
  16. 	}
  17.  
  18. 	function get()
  19. 	{
  20. 		$this->dbConnect();
  21. 		$query = "SELECT * FROM $this->table ORDER BY id";
  22. 		$result = mysql_db_query (DB_NAME, $query, LINK);
  23.  
  24. 		$xml = "<?xml version=\"1.0\" encoding=\"ISO-8859-1\" ?>\n";
  25. 		$xml .= "<posts>\n";
  26. 		while($row = mysql_fetch_array($result))
  27. 		{
  28. 			$xml .= "<post>\n";
  29. 			$xml .= "<id>" . $row['id'] . "</id>\n";
  30. 			$xml .= "<date>" . $row['date'] . "</date>\n";
  31. 			$xml .= "<title><![CDATA[" . $row['title'] . "]]></title>\n";
  32. 			$xml .= "<description><![CDATA[" . $row['description'] . "]]></description>\n";
  33. 			$xml .= "</post>\n";
  34. 		}
  35. 		$xml .= "</posts>";
  36. 		mysql_close();
  37.  
  38. 		header("Content-Type: application/xml; charset=UTF-8");
  39. 		echo $xml;
  40. 	}
  41.  
  42. 	function save($id, $title, $description)
  43. 	{
  44. 		$this->dbConnect();
  45. 		$query = "SELECT * FROM $this->table WHERE id='$id'";		
  46. 		$result = @mysql_query ($query);
  47. 		if (mysql_num_rows($result) > 0)
  48. 		{
  49. 			$query = "UPDATE $this->table SET title='$title', description='$description', date=NOW() WHERE id='$id'";
  50. 			$result = @mysql_query($query);
  51. 		}
  52. 		else
  53. 		{
  54. 			$query = "INSERT INTO $this->table (title, description, date) VALUES ('$title', '$description', NOW())";
  55. 			$result = @mysql_query($query);
  56. 		}
  57. 		mysql_close();
  58. 		$this->get();
  59. 	}
  60.  
  61. 	function delete($id)
  62. 	{
  63. 		$this->dbConnect();
  64. 		$query = "DELETE FROM $this->table WHERE id='$id'";
  65. 		$result = @mysql_query($query);
  66. 		mysql_close();
  67. 		$this->get();
  68. 	}
  69.  
  70. }
  71.  
  72. ?>
[PHP] pobierz, plaintext


layout.css

Kod
/* CSS Document */
body
{
    margin: 25px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
}

#posts
{
    width: 500px;
}

.post
{
    text-align: left;
    border-bottom-style: dashed;
    border-bottom-color: #cccccc;
    border-bottom-width: 1px;
}

.title
{
    font-size: 18px;
    font-weight: bold;
    color: #003366;
    padding-bottom: 10px;
}

.description
{
    color: #333333;
}

.date
{
    font-size: 9px;
    color: #cccccc;
    text-align: right;
}


post.js

Kod
var index;

function onResponse()
{
    if(checkReadyState(request))
    {
  document.getElementById('posts').innerHTML = "";
  var    response = request.responseXML.documentElement;
  var _post = response.getElementsByTagName('post');
  
  if(_post.length == 0)
  {
      document.getElementById('posts').innerHTML = "There are currently no available posts.<br/>Click the \"add a post\" button above to add a new post";    
  }
  
  var postDisplay = "";
  var formPostDisplay = "";
  
  for(var i=0; i<_post.length; i++)
  {
      var _title = response.getElementsByTagName('title')[i].firstChild.data;
      var _description = response.getElementsByTagName('description')[i].firstChild.data
      var _date = response.getElementsByTagName('date')[i].firstChild.data;
      var _id = response.getElementsByTagName('id')[i].firstChild.data;
      
      if(_title == "" && _description == "")
      {
    postDisplay = "style='display:none'";
    formPostDisplay = "style=''";
      }
      else
      {
    postDisplay = "style=''";
    formPostDisplay = "style='display:none'";    
      }
      
      var html = "<div class='post' id='post_"+ i +"' "+ postDisplay +">"
        + "<div class='title' id='title_"+ i +"'>"+ _title +"</div>"
        + "<div class='description' id='description_"+ i +"'>"+ _description +"</div>"
        + "<div class='date' id='date_"+ i +"'>"+ _date +"</div>"
        + "<a href=\"javascript:toggle('"+ i +"');\">edit this post</a><br/>"
        + "</div>"
        + "<div class='post' id='formPost_"+ i +"' "+ formPostDisplay +">"
        + "<div class='title'><input type='text' name='title' id='formTitle_"+ i +"' size='60' value='"+ _title +"'></div>"
        + "<div class='description'><textarea type='text' id='formDescription_"+ i +"' wrap='virtual' cols='60' rows='15'>"+ _description +"</textarea></div>"
        + "<div class='date'>"+ _date +"</div>"
        + "<input type='button' name='cancel' value='cancel' onclick=\"javascript:toggle('"+ i +"');\">"
        + "<input type='button' name='delete' value='delete this post' onclick=\"javascript:deletePost("+ _id +");\">"
        + "<input type='button' name='submit' value='save this post' onclick=\"javascript:saveNewPost("+ _id +","+ i +");\">"
        + "</div>"
        + "<p>&nbsp;</p>";
      
      document.getElementById('posts').innerHTML += html;
  }
    }
}

function saveNewPost(_id, _index)
{
    var newDescription = document.getElementById("formDescription_"+ _index).value;
    var newTitle = document.getElementById("formTitle_"+ _index).value;
    setIndex(_index);
    sendRequest("services/post.php?method=save&id="+ _id +"&title="+ newTitle +"&description="+ newDescription, getPost);
}

function deletePost(_id)
{
    sendRequest("services/post.php?method=delete&id="+ _id, onResponse);
}

function getPost()
{
    if(checkReadyState(request))
    {
  var response = request.responseXML.documentElement;
  var _title = response.getElementsByTagName('title')[getIndex()].firstChild.data;
  var _description = response.getElementsByTagName('description')[getIndex()].firstChild.data;
  var _date = response.getElementsByTagName('date')[getIndex()].firstChild.data;
  
  document.getElementById("title_"+ getIndex()).innerHTML = _title;
  document.getElementById("description_"+ getIndex()).innerHTML = _description;
  document.getElementById("date_"+ getIndex()).innerHTML = _date;
  toggle(getIndex());
    }
}

function toggle(id)
{
    if(document.getElementById("formPost_"+id).style.display == 'none')
    {
  document.getElementById("formPost_"+id).style.display = '';
  document.getElementById("post_"+id).style.display = 'none';
    }
    else if(document.getElementById("post_"+id).style.display == 'none')
    {
  document.getElementById("post_"+id).style.display = '';
  document.getElementById("formPost_"+id).style.display = 'none';
    }
}

function setIndex(_index) { index = _index; }
function getIndex() { return index; }


request.js

Kod
function makeRequest(url)
{
    sendRequest(url, onResponse);
}

function sendRequest(url, callbackMethod)
{
    request = createRequestObject();
    request.onreadystatechange = callbackMethod;
    request.open("POST", url, true);
    request.send(url);
}

function createRequestObject()
{
    if(window.XMLHttpRequest)
    {
  obj = new XMLHttpRequest();
    }
    else if(window.ActiveXObject)
    {
  obj = new ActiveXObject("MSXML2.XMLHTTP");
    }
    return obj;
}

function checkReadyState(obj)
{
    if(obj.readyState == 0) { document.getElementById('loading').innerHTML = "Sending Request..."; }
    if(obj.readyState == 1) { document.getElementById('loading').innerHTML = "Loading..."; }
    if(obj.readyState == 2) { document.getElementById('loading').innerHTML = "Loading..."; }
    if(obj.readyState == 3) { document.getElementById('loading').innerHTML = "Loading..."; }
    if(obj.readyState == 4)
    {
  if(obj.status == 200)
  {
      document.getElementById('loading').innerHTML = "";
      return true;
  }
  else
  {
      document.getElementById('loading').innerHTML = "HTTP " + obj.status;
  }
    }
}


post.php

[PHP] pobierz, plaintext 
  1. <?
  2.  
  3. 	require_once("../classes/Post.class.php");
  4. 	$post = new Post();
  5. 	$post->$method($id, $title, $description);
  6.  
  7. ?>
[PHP] pobierz, plaintext


Ten post edytował GiMax 13.04.2006, 03:45:23
Go to the top of the page
+Quote Post
« Następny starszy · AJAX · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 25.04.2024 - 19:08
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn