function ajax() {
};
ajax.prototype.iniciar = function() {
try{
this.xmlhttp = new XMLHttpRequest();
}catch(ee){
try{
this.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(E){
this.xmlhttp = false;
}
}
}
return true;
}
ajax.prototype.ocupado = function() {
estadoAtual = this.xmlhttp.readyState;
return (estadoAtual && (estadoAtual < 4));
}
ajax.prototype.processa = function() {
if (this.xmlhttp.readyState == 4 && this.xmlhttp.status == 200) {
return true;
}
}
ajax.prototype.enviar = function(url, metodo, modo) {
if (!this.xmlhttp) {
this.iniciar();
}
if (!this.ocupado()) {
if(metodo == "GET") {
this.xmlhttp.open("GET", url, modo);
this.xmlhttp.send(null);
} else {
this.xmlhttp.open("POST", url, modo);
this.xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
this.xmlhttp.setRequestHeader("Cache-Control", "no-store, no-cache, must-revalidate");
this.xmlhttp.setRequestHeader("Cache-Control", "post-check=0, pre-check=0");
this.xmlhttp.setRequestHeader("Pragma", "no-cache");
this.xmlhttp.send(url);
}
if (this.processa) {
return unescape(this.xmlhttp.responseText.replace(/\+/g," "));
}
}
return false;
}
function editar(id) {
elem = document.getElementById('campo'+id); //primeiro campo
elem2 = document.getElementById('campo_'+id); //segundo campo
bot = document.getElementById("enviar"+id); //botao de enviar
elem.innerHTML = "<input type=\"text\" value=\"" + elem.innerHTML + "\" id='"+id+"_c' />"; //inserir o primeiro input
elem2.innerHTML = "<input type=\"text\" value=\"" + elem2.innerHTML + "\" id='"+id+"d_c' />"; //inserir o segundo input
bot.innerHTML = '<a href="java script:editado(\''+ id +'\')">enviar</a>'; //inserir o botao de enviar a alteracao
}
function editado(id) {
envia = document.getElementById('enviar'+id); //span onde vai aparecer o botaozinho para enviar a alteracao
campo = document.getElementById(id+'_c').value; //primeiro campo
campod = document.getElementById(id+'d_c').value; //segundo campo
ecampo = escape(campo); //para não haver problemas de acentos e tal
ecampod = escape(campod); //para não haver problemas de acentos e tal
document.getElementById('campo'+id).innerHTML = campo; //alterar o registro na pagina
document.getElementById('campo_'+id).innerHTML = campod; //alterar o registro na pagina
envia.innerHTML = '<a href="java script:editar(\''+id+'\')">alterar</a>'; //depois de enviar, mostrar de novo o botão de editar
xmlhttp = new ajax();
xmlhttp.enviar('crucifier.php?acao=edit&id='+ id + '&nome='+ ecampo + '&sobrenome=' + ecampod, "POST", false); //endereco para enviar a alteração
}
function addrow(id) {
também = document.getElementById('tabela'); //id da tabela
campo = document.getElementById('nome'); //primeiro campo
campod = document.getElementById('sobrenome'); //segundo campo
var x=também.insertRow(-1); //inserir a linha
var y=x.insertCell(0); //inserir coluna 1
var z=x.insertCell(1); //inserir coluna 2
var w=x.insertCell(2); //inserir coluna 3
var b=x.insertCell(3); //inserir coluna 4
y.innerHTML=id; //na primeira coluna, inserir o id
z.innerHTML="<span id=\"campo"+id+"\">"+campo.value+"</span>"; //na segunda coluna, inserir o nome
w.innerHTML="<span id=\"campo_"+id+"\">"+campod.value+"</span>"; //na terceira coluna, inserir o sobrenome
b.innerHTML='<span id="enviar'+id+'"><a href="java script:editar(\''+id+'\')">alterar</a></span><br><a href="java script:;" onClick="deleterow(\''+id+'\', this.parentNode.parentNode.rowIndex);">del</a>'; //na quarta coluna, inserir as opções
}
function add() {
campo = document.getElementById('nome').value; //recupera primeiro campo
ecampo = escape(campo); //"escapa" primeiro campo
campod = document.getElementById('sobrenome').value; //recupera segundo campo
ecampod = escape(campod);//"escapa" segundo campo
xmlhttp = new ajax();
id = xmlhttp.enviar('crucifier.php?acao=add&nome='+ ecampo + '&sobrenome=' + ecampod, "POST", false); //manda adicionar
addrow(id); //adiciona a linha com os campos
campo.value = ""; //limpa o campo 1
campod.value = ""; //limpa o campo2
}
function apagar(id, rowIndex)
{
if (confirm('Tem certeza que deseja excluir este registro?'))
{
document.getElementById("tabela").deleteRow(rowIndex); //id da tabela + excluir linha
xmlhttp = new ajax();
xmlhttp.enviar('crucifier.php?acao=del&id='+ id, "POST", false); //envia o comando para deletar
}
}
crucifier.php
<?php
//conecta ao banco de dados
mysql_connect("localhost", "root", "");
mysql_select_db("tuto");
//essa function eu coloquei para retornar o id e inserir na tabela, ela é desnecessaria para o funcionamento...coloquei porq no meu tava xD
function autoindex($também)
{
$query = mysql_query('SHOW TABLE STATUS LIKE "' . $também . '"');
$data = mysql_fetch_array($query);
return $data['Auto_increment'];
}
switch ($_REQUEST['acao'] == "add") {
//se acao = add então adicionar
case 'add' :
$valor = urldecode($_REQUEST['nome']);
$valor2 = urldecode($_REQUEST['sobrenome']);
echo autoindex("tutorial");
mysql_query("INSERT INTO tutorial VALUES('','$valor','$valor2')");
break;
//se acao = del então deletar
case 'del' :
$id = $_REQUEST['id'];
mysql_query("DELETE FROM tutorial WHERE id = '$id'");
break;
//se acao = edit então editar
case 'edit' :
$id = $_REQUEST["id"];
$valor = urldecode($_REQUEST["nome"]);
$valor2 = urldecode($_REQUEST["sobrenome"]);
mysql_query("UPDATE tutorial SET nome = '$valor', sobrenome = '$valor2' WHERE id = '$id'");
break;
}
?>
Pergunta
crucifier
Olá galera, tudo certo?
faz um tempinho que não passo por aqui, voltei para ajudar a galerinha que curte ajax aih...
fiz um script de administração total de uma pagina (adicionar, deletar, alterar)...
são 3 paginas, index.php, crucifier.php (:lol:) e crucifier.js (:yay:)
aceito sugestões para mudar isso...tambem estou aprendendo esse negocio de ajax...
aih vai o codigo:
(comentem ^_^ )
estrutura da tabela
index.php
crucifier.js crucifier.phpLink para o comentário
Compartilhar em outros sites
7 respostass a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.