A pergunta não inclui jQuery mas usar esse framework as vezes facilita o trabalho, então uma forma que você poderia fazer o que quer é a seguinte:
- Coletar os dados do
form
: Olhe esse post sobre serializeArray()
- Convertê-los para o formato JSON: Explicado abaixo
- Enviá-los via AJAX para o PHP
- No script PHP convertê-los para array com
json_decode()
e salvar no BD
- Se obtiver resposta de sucesso do PHP, insere o item na página.
OBS:
PASSO 1
Os dados coletados do form com serializeArray()
estarão no seguinte formato
[ { name: "domain-input", value: "meuConteúdo" },
{ name: "domain-input2", value: "conteúdo qualquer" }
]
PASSO 2
var unindexed_array = $("form").serializeArray(); // Coleta os dados do form
var jsonData = {}
$.each(unindexed_array, function(i, item) {
// Para cada item em 'unindexed_array', fazer o que está aqui dentro.
jsonData[item["name"]] = item["value"]; // salva
});
Depois disso, jsonData
estará no seguinte formato (JSON):
jsonData = {
"domain-input" : "meuConteúdo",
"domain-input2" : "conteúdo qualquer"
}
PASSO 3
$.ajax({
data: jsonData, // dados a serem enviados
dataType: "json", // Formato do dado **recebido como resposta do servidor**. html, json, text ...
method: "post", // post ou get
url: "myPHPscript.php", // url invocada
success: function(data, textStatus, jqXHR) {
// Executado em caso de sucesso.
alert(data+" "+textStatus+" "+jqXHR+" ");
},
error: function (jqXHR, textStatus, errorThrown) {
// Executado em caso de erro.
alert(jqXHR+" "+ textStatus+" "+ errorThrown);
error();
}
});
Você pode ver mais nesse post ou na documentação do jQuery.
PASSO 4
Receber os dados em PHP com json_decode()
.
Arquivo PHP:
$domain-input = json_decode($_POST["domain-input"], true);
$domain-input2 = json_decode($_POST["domain-input2"], true);
// Salva no BD
if (sucesso) {
$resposta_array['status'] = 'success';
} else {
$resposta_array['status'] = 'error';
}
echo json_encode($resposta_array);
Espero ter ajudado.
EDIÇÃO
No PASSO 3, para garantir que os dados passados estejam no formato JSON, você pode usar a função JSON.stringify
do Javascript. O que ela faz é converter o argumento passado à ela para uma string JSON - o que já era de se esperar pelo seu nome hehe. Ainda, acrescentar contentType: "application/json"
ao objeto de opções passado à função $.ajax
. Então:
$.ajax({
contentType: "application/json",
data: JSON.stringify(jsonData), // dados a serem enviados agora com a certeza de estarem em JSON.
dataType: "json", // Formato do dado **recebido como resposta do servidor**. html, json, text ...
method: "post", // post ou get
url: "myPHPscript.php", // url invocada
success: function(data, textStatus, jqXHR) {
// Executado em caso de sucesso.
alert(data+" "+textStatus+" "+jqXHR+" ");
},
error: function (jqXHR, textStatus, errorThrown) {
// Executado em caso de erro.
alert(jqXHR+" "+ textStatus+" "+ errorThrown);
error();
}
});
No PASSO 4, o correto seria
header('Content-Type: application/json; charset=utf-8'); // Altera o cabecalho para que o retorno seja em JSON
$aDados = json_decode(file_get_contents("php://input"), true); // Ver comentário abaixo.
// Verificar se foi recebido dados
// Usar assim: $aDados['domain-input']
// Salvar no BD
if (sucesso) {
$resposta_array['status'] = 'success';
} else {
$resposta_array['status'] = 'error';
}
echo json_encode($resposta_array); // Converte para JSON e imprime na página.
A expressão file_get_contents("php://input")
é usada para coletar os dados enviados pelo AJAX porque $_POST
estará vazio já que o content-type
do pedido (leia mais aqui) será application/json
(passado pela função ajax) o que não é suportado pela variável $_PHP
segundo a sua documentação.
Um problema causado por isso (e que talvez não faça diferença para a maioria dos casos) é que php://input
não estará disponível caso o form
seja enviado usando enctype="multipart/form-data"
o que significa que não será possível incluir, por exemplo, uploads de imagens. Para o seu caso, não parece haver problemas já que você enviará apenas textos.