Loading:


Wysyłanie danych z Formularza - AJAX PHP

Skrypt zapisuje dane przesłane za pomocą formularza do pliku dane.txt, Aby więc skrypt działał musimy utworzyć dodatkowo plik dane.txt w tym samym katalogu copliki skryptu.



Napisz Artyku³

Listing


//index.html   #############################################

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ajax</title>
<link href="ajaxcss.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="ajaxcore.js"></script>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
<div id="formDiv" class="mainDiv">
<div>
<div style="float:left;width:80px;">Imię:</div>
<div><input type="text" value=""
       id="tfImie" class="myTextInput"/>
</div>
<div style="float:left;width:80px;">Nazwisko:</div>
<div><input type="text" value=""
       id="tfNazwisko" class="myTextInput"/>
</div>
<div style="width:50%;margin:0 auto;text-align:center;">
  <input type="button" value="Wyślij" class="myButton" id="btnWyslij"
         onclick="wyslijDane();" style="margin-top:10px;" />
</div>
</div>

</body>
</html>



//dane.php   #############################################

<?php
if(isSet($_GET["imie"]) && isSet($_GET["nazwisko"])){
  $imie = $_GET["imie"];
  $nazwisko = $_GET["nazwisko"];
  $str = "imię = $imie, nazwisko = $nazwisko\n";

  if(!$fp = fopen("./dane.txt", 'a')){
    die("error");
  }

  if (fwrite($fp, $str) === FALSE){
    die("error");
  }
  echo "ok";
  @fclose($fp);
}
else{
  echo "error";
}
?>



//ajaxcss.css   #############################################

.mainDiv
{
  color: #333333;
  position: relative;
  background-color: #EFEFEF;
  border: 1px solid #000000;
  margin: 10px 10px 10px 10px;
  padding: 14px 14px 14px 14px;
  width: 350px;
  visibility: visible;
}

.dataDiv
{
  color: #333333;
  position: relative;
  background-color: #ffffff;
  border: 1px solid #000000;
  margin: 10px 10px 10px 10px;
  padding: 14px 14px 14px 14px;
  width: 420px;
  visibility: visible;
}

.myButton
{
  font-family:helvetica,sans-serif;
  font-size:84%;
  font-weight:bold;
  border:1px solid;
  border-top-color:#696;
  border-left-color:#696;
  border-right-color:#363;
  border-bottom-color:#363;
  width:120px;
  margin:5px;
}

.myTextInput
{
  border:1px solid;
  background-color: #F8F8F8;
  border-top-color:#696;
  border-left-color:#696;
  border-right-color:#363;
  border-bottom-color:#363;
  width:70%;
}



//ajaxcore.js   #############################################

function getXMLHttpRequestObject()
{
  try{
    return new XMLHttpRequest();
  }
  catch(e){
    try{
      return new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch(e){
      return false;
    }
  }
}

function startGETRequest(url, onComplete, onEnd)
{
  var XMLHttpRequestObject = getXMLHttpRequestObject();
  if(XMLHttpRequestObject){
    XMLHttpRequestObject.open("GET", url);
    XMLHttpRequestObject.onreadystatechange = function()
    {
      if (XMLHttpRequestObject.readyState == 4){
        if(XMLHttpRequestObject.status == 200){
          var responseXML = XMLHttpRequestObject.responseXML;
          var responseText = XMLHttpRequestObject.responseText;
          onComplete(responseText, responseXML);
        }
        delete XMLHttpRequestObject;
        onEnd();
      }
    }
    XMLHttpRequestObject.send(null);
  }
}

function startPOSTRequest(url, params, onComplete, onEnd)
{
  var XMLHttpRequestObject = getXMLHttpRequestObject();
  if(XMLHttpRequestObject){
    XMLHttpRequestObject.open("POST", url);
    XMLHttpRequestObject.setRequestHeader(
      'Content-Type', 'application/x-www-form-urlencoded');
    XMLHttpRequestObject.onreadystatechange = function()
    {
      if (XMLHttpRequestObject.readyState == 4){
        if(XMLHttpRequestObject.status == 200){
          var responseXML = XMLHttpRequestObject.responseXML;
          var responseText = XMLHttpRequestObject.responseText;
          onComplete(responseText, responseXML);
        }
        delete XMLHttpRequestObject;
        onEnd();
      }
    }
    XMLHttpRequestObject.send(params);
  }
}


//ajax.js   #############################################

disableButton = false;

function wyslijDane()
{
  var tfImieText = document.getElementById("tfImie").value;
  var tfNazwiskoText = document.getElementById("tfNazwisko").value;
  var btnWyslij = document.getElementById("btnWyslij");

  url = "http://localhost/dane.php?imie=" + tfImieText;
  url += "&nazwisko=" + tfNazwiskoText;
  url = encodeURI(url);

  btnWyslij.disabled = true;
  startGETRequest(url, onComplete, onEnd);
}

function onComplete(text, xml)
{
  if(text == "error"){
    alert("Wystąpił błąd. Dane nie zostały zapisane.");
    disableButton = false;
  }
  else{
    alert("Dane zostały zapisane na serwerze.");
    disableButton = true;
  }
}

function onEnd()
{
  if(!disableButton){
    var btnWyslij = document.getElementById("btnWyslij");
    btnWyslij.disabled = false;
  }
}
 




Dodano przez: igor
Ranga: Administrator serwisu Punktów: 0
Komentarze użytkowników
Nie wiem czy dobrze zrobiłem, ale nie chciało mi działać. Usunąłem z pliku ajax.js "http://localhost/" z linijki: url = "http://localhost/dane.php?imie=" + tfImieText; czyli zostało: url = "dane.php?imie=" + tfImieText; Nie wiem czy dobrze, ale ak czy inaczej działa i jest świetny :)
autor: Batgraf | 453 | 2009-08-29 22:22:36


Oczywiście jak najbardziej jest to poprawy zabieg :)
autor: igor | 455 | 2009-08-29 22:45:43


    • Tre¶æ komentarza
      Kod do komentarza (opcjonalnie)
      PHP JavaScript MySQL Smarty SQL HTML CSS ActionScript
      Autor
      Token
      token

       

       








funkcje.net
Wszelkie prawa zastrzeżone©. | Funkcje.net 2008-2024 v.1.5 | design: diviXdesign & rainbowcolors