Loading:

BLACK WEEK IT! [Zgarnij książkę GRATIS lub kupuj solo z rabatem do -50%]

Ostatnio dodane

php Upload dodaw PHP Tworzenia mi Logowanie obiekt Prosty system sz Lista plików z Jak zbudować pr Jak zamienić w IP uzytkownika Obiekt Timer [AS Proste skrypty w

Top 10

1.link 2.ssh2_exec 3.lchgrp 4.is_link 5.passthru 6.curl_init 7.chr() 8.count 9.trace() 10.sqrt

56853.05

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.

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

Laminas MVC: the most innovative framework in 2020 - get a book on Amazon

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