Fórum PHP + AJAX + Json (Problemas com servidor) #592821
28/04/2018
0
Este é o código chat.PHP
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>IA Fatec Ourinhos</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href=''http://fonts.googleapis.com/css?family=Open+Sans:400,300,700'' rel=''stylesheet'' type=''text/css''>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
<div class="burger">
<div class="burger__patty"></div>
<div class="burger__patty"></div>
<div class="burger__patty"></div>
</div>
<nav class="menu">
<div class="menu__brand">
<a href=""> <img src="img/logo.png" align="left" height="100" width="100"></a><br>
<h2>Você esta em: Chat ☑</h2>
</div>
<ul class="menu__list">
<li class="menu__item"><a href="home.html" class="menu__link">Incio</a></li>
<li class="menu__item"><a href="chat.php" class="menu__link">Chat ☑</a></li>
<li class="menu__item"><a href="index.html" class="menu__link">Sair ☓;</a></li>
</ul>
</nav>
</header>
<main>
<div id="watson" class="watson" width = "100%" height = "100%">
<div class="mensagens">
<div class="area" id="chat">
</div>
</div>
<form id="mensagem" class="mensagem">
<input type="text" id="texto" name="texto" placeholder="Digite sua mensagem"/>
<button type="submit">Enviar</button>
</form>
<script type="text/javascript">
$("#chat").append("<div class=\\\\"texto sistema\\\\"><center>Seja bem vindo ao IA Fatec Ourinhos <br>Uma inteligencia congnitiva que utiliza a Tecnologia IBM Watson ♥</center></div>");
//Submeter Formulário
$("#mensagem").submit(function(){
//Caso o usuário envie uma mensagem vazia
if($("#mensagem #texto").val() === ""){
//Adiciona na área de Chat a mensagem enviada pelo usuário
$("#chat").append("<div class=\\\\"texto usuario\\\\">...</div>");
//Faz um scroll para a mensagem mais recente, caso necessário
$(".mensagens").animate({scrollTop: $("#chat").height()});
setTimeout(function(){
//Adiciona uma resposta padrão afirmando que o usuário deixou o campo vazio
$("#chat").append("<div class=\\\\"texto chatbot\\\\">Você precisa digitar alguma coisa para prosseguir.</div>");
//Faz um scroll para a mensagem mais recente, caso necessário
$(".mensagens").animate({scrollTop: $("#chat").height()});
},1000);
return false;
}
//Inicia método AJAX
$.ajax({
//Substitua o caminho da URL pelo que você salvou o arquivo de backend
url: "conversa.php?texto=" + $("#mensagem #texto").val(),
dataType: ''json'', // Determina o tipo de retorno
beforeSend: function(){
//Adiciona a mensagem de usuário à lista de mensagens.
$("#chat").append("<div class=\\\\"texto usuario\\\\">" + $("#mensagem #texto").val() + "</div>");
},
success: function(resposta){
//Limpa o que o usuário digitou e foca no input para próxima interação.
$("#mensagem #texto").val("");
$("#mensagem #texto").focus();
//Caso haja um erro, o Watson retornará a mensagem de erro ao usuário
//Basta ler o objeto error para o usuário.
if(resposta.error){
$("#chat").append("<div class=\\\\"texto chatbot\\\\">" + resposta.error + "</div>");
return false;
}
//Colocar a resposta do Watson para o usuário ler
//A mensagem de texto pode ser lida a partir da lógica
//do json de exemplo da imagem no post
var mensagemChatbot = "<div class=\\\\"texto chatbot\\\\">";
mensagemChatbot += resposta.output.text[0];
mensagemChatbot += "</div>";
setTimeout(function(){
$("#chat").append(mensagemChatbot);
$(".mensagens").animate({scrollTop: $("#chat").height()});
},1000);
}
});
return false;
});
</script>
</div>
</main>
<script src="js/index.js"></script>
</body>
</html>
E aqui o arquivo conversa.php
<?php
//Garantir que seja lido sem problemas
header("Content-Type: text/plain");
//Worskspace
$workspace = "8be4d8e2-4d90-4694-869d-320145f86961";
//Dados de Login
$username = "b467c7c5-af82-4507-9fb6-ea317bbb2784";
$password = "iTo8f4OYiCMh";
//Capturar Texto
//Use $_POST em produção, por segurança
$texto = $_REQUEST["texto"];
//Verifica se existe identificador
//Caso não haja, crie um
if (session_status() == PHP_SESSION_NONE) {
session_start();
}
if(isset($_SESSION["identificador"])){
$identificador = $_SESSION["identificador"];
}else{
//Você pode usar qualquer identificador
//Você pode usar ID do usuário ou similar
$identificador = md5(uniqid(rand(), true));
$_SESSION["identificador"] = $identificador;
}
//URL da API
//(deve ser passado o método e a versão da API em GET)
$url = "https://gateway.watsonplatform.net/assistant/api/v1/workspaces/" . $workspace;
$urlMessage = $url . "/message?version=2017-05-26";
//Dados
$dados = "{";
$dados .= "\\\\"input\\\\": ";
$dados .= "{\\\\"text\\\\": \\\\"" . $texto . "\\\\"},";
$dados .= "\\\\"context\\\\": {\\\\"conversation_id\\\\": \\\\"" . $identificador . "\\\\",";
$dados .= "\\\\"system\\\\": {\\\\"dialog_stack\\\\":[{\\\\"dialog_node\\\\":\\\\"root\\\\"}], \\\\"dialog_turn_counter\\\\": 1, \\\\"dialog_request_counter\\\\": 1}}";
$dados .= "}";
//Cabeçalho que leva tipo de Dados
$headers = array(''Content-Type:application/json'');
//Iniciando Comunicação cURL
$ch = curl_init();
//Selecionando URL
curl_setopt($ch, CURLOPT_URL, $urlMessage);
//O cabeçalho é importante para definir tipo de arquivo enviado
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
//Habilitar método POST
curl_setopt($ch, CURLOPT_POST, 1);
//Enviar os dados
curl_setopt($ch, CURLOPT_POSTFIELDS, $dados);
//Capturar Retorno
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
//Autenticação
curl_setopt($ch, CURLOPT_USERPWD, "$username:$password");
curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC);
//Executar
$retorno = curl_exec($ch);
//Fechar Conexão
curl_close($ch);
//Imprimir com leitura fácil para humanos
$retorno = json_decode($retorno);
echo json_encode($retorno, JSON_PRETTY_PRINT);
?>Se alguém puder me ajudar, ficarei muito feliz :)
Desde já, muito Obrigado!
Leonardo Silva
Curtir tópico
+ 0Posts
28/04/2018
Leonardo Silva
Uncaught TypeError: Cannot read property 'error' of null
at Object.success (chat.php:87)
at i (jquery-3.2.1.min.js:2)
at Object.fireWith [as resolveWith] (jquery-3.2.1.min.js:2)
at A (jquery-3.2.1.min.js:4)
at XMLHttpRequest.<anonymous> (jquery-3.2.1.min.js:4)
Gostei + 0
22/05/2019
Jucelio
Uncaught TypeError: Cannot read property 'error' of null
at Object.success (chat.php:87)
at i (jquery-3.2.1.min.js:2)
at Object.fireWith [as resolveWith] (jquery-3.2.1.min.js:2)
at A (jquery-3.2.1.min.js:4)
at XMLHttpRequest.<anonymous> (jquery-3.2.1.min.js:4)
Estou com um problema semelhante .. no meu caso o erro mostra a linha " Object.fireWith [as resolveWith]" .. alguém sabe resolver isso ?
Gostei + 0
22/05/2019
William Nascimento
Este é o código chat.PHP
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>IA Fatec Ourinhos</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href=''http://fonts.googleapis.com/css?family=Open+Sans:400,300,700'' rel=''stylesheet'' type=''text/css''>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
<div class="burger">
<div class="burger__patty"></div>
<div class="burger__patty"></div>
<div class="burger__patty"></div>
</div>
<nav class="menu">
<div class="menu__brand">
<a href=""> <img src="img/logo.png" align="left" height="100" width="100"></a><br>
<h2>Você esta em: Chat ☑</h2>
</div>
<ul class="menu__list">
<li class="menu__item"><a href="home.html" class="menu__link">Incio</a></li>
<li class="menu__item"><a href="chat.php" class="menu__link">Chat ☑</a></li>
<li class="menu__item"><a href="index.html" class="menu__link">Sair ☓;</a></li>
</ul>
</nav>
</header>
<main>
<div id="watson" class="watson" width = "100%" height = "100%">
<div class="mensagens">
<div class="area" id="chat">
</div>
</div>
<form id="mensagem" class="mensagem">
<input type="text" id="texto" name="texto" placeholder="Digite sua mensagem"/>
<button type="submit">Enviar</button>
</form>
<script type="text/javascript">
$("#chat").append("<div class=\\\\\\\\"texto sistema\\\\\\\\"><center>Seja bem vindo ao IA Fatec Ourinhos <br>Uma inteligencia congnitiva que utiliza a Tecnologia IBM Watson ♥</center></div>");
//Submeter Formulário
$("#mensagem").submit(function(){
//Caso o usuário envie uma mensagem vazia
if($("#mensagem #texto").val() === ""){
//Adiciona na área de Chat a mensagem enviada pelo usuário
$("#chat").append("<div class=\\\\\\\\"texto usuario\\\\\\\\">...</div>");
//Faz um scroll para a mensagem mais recente, caso necessário
$(".mensagens").animate({scrollTop: $("#chat").height()});
setTimeout(function(){
//Adiciona uma resposta padrão afirmando que o usuário deixou o campo vazio
$("#chat").append("<div class=\\\\\\\\"texto chatbot\\\\\\\\">Você precisa digitar alguma coisa para prosseguir.</div>");
//Faz um scroll para a mensagem mais recente, caso necessário
$(".mensagens").animate({scrollTop: $("#chat").height()});
},1000);
return false;
}
//Inicia método AJAX
$.ajax({
//Substitua o caminho da URL pelo que você salvou o arquivo de backend
url: "conversa.php?texto=" + $("#mensagem #texto").val(),
dataType: ''json'', // Determina o tipo de retorno
beforeSend: function(){
//Adiciona a mensagem de usuário à lista de mensagens.
$("#chat").append("<div class=\\\\\\\\"texto usuario\\\\\\\\">" + $("#mensagem #texto").val() + "</div>");
},
success: function(resposta){
//Limpa o que o usuário digitou e foca no input para próxima interação.
$("#mensagem #texto").val("");
$("#mensagem #texto").focus();
//Caso haja um erro, o Watson retornará a mensagem de erro ao usuário
//Basta ler o objeto error para o usuário.
if(resposta.error){
$("#chat").append("<div class=\\\\\\\\"texto chatbot\\\\\\\\">" + resposta.error + "</div>");
return false;
}
//Colocar a resposta do Watson para o usuário ler
//A mensagem de texto pode ser lida a partir da lógica
//do json de exemplo da imagem no post
var mensagemChatbot = "<div class=\\\\\\\\"texto chatbot\\\\\\\\">";
mensagemChatbot += resposta.output.text[0];
mensagemChatbot += "</div>";
setTimeout(function(){
$("#chat").append(mensagemChatbot);
$(".mensagens").animate({scrollTop: $("#chat").height()});
},1000);
}
});
return false;
});
</script>
</div>
</main>
<script src="js/index.js"></script>
</body>
</html>
E aqui o arquivo conversa.php
<?php
//Garantir que seja lido sem problemas
header("Content-Type: text/plain");
//Worskspace
$workspace = "8be4d8e2-4d90-4694-869d-320145f86961";
//Dados de Login
$username = "b467c7c5-af82-4507-9fb6-ea317bbb2784";
$password = "iTo8f4OYiCMh";
//Capturar Texto
//Use $_POST em produção, por segurança
$texto = $_REQUEST["texto"];
//Verifica se existe identificador
//Caso não haja, crie um
if (session_status() == PHP_SESSION_NONE) {
session_start();
}
if(isset($_SESSION["identificador"])){
$identificador = $_SESSION["identificador"];
}else{
//Você pode usar qualquer identificador
//Você pode usar ID do usuário ou similar
$identificador = md5(uniqid(rand(), true));
$_SESSION["identificador"] = $identificador;
}
//URL da API
//(deve ser passado o método e a versão da API em GET)
$url = "https://gateway.watsonplatform.net/assistant/api/v1/workspaces/" . $workspace;
$urlMessage = $url . "/message?version=2017-05-26";
//Dados
$dados = "{";
$dados .= "\\\\\\\\"input\\\\\\\\": ";
$dados .= "{\\\\\\\\"text\\\\\\\\": \\\\\\\\"" . $texto . "\\\\\\\\"},";
$dados .= "\\\\\\\\"context\\\\\\\\": {\\\\\\\\"conversation_id\\\\\\\\": \\\\\\\\"" . $identificador . "\\\\\\\\",";
$dados .= "\\\\\\\\"system\\\\\\\\": {\\\\\\\\"dialog_stack\\\\\\\\":[{\\\\\\\\"dialog_node\\\\\\\\":\\\\\\\\"root\\\\\\\\"}], \\\\\\\\"dialog_turn_counter\\\\\\\\": 1, \\\\\\\\"dialog_request_counter\\\\\\\\": 1}}";
$dados .= "}";
//Cabeçalho que leva tipo de Dados
$headers = array(''Content-Type:application/json'');
//Iniciando Comunicação cURL
$ch = curl_init();
//Selecionando URL
curl_setopt($ch, CURLOPT_URL, $urlMessage);
//O cabeçalho é importante para definir tipo de arquivo enviado
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
//Habilitar método POST
curl_setopt($ch, CURLOPT_POST, 1);
//Enviar os dados
curl_setopt($ch, CURLOPT_POSTFIELDS, $dados);
//Capturar Retorno
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
//Autenticação
curl_setopt($ch, CURLOPT_USERPWD, "$username:$password");
curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC);
//Executar
$retorno = curl_exec($ch);
//Fechar Conexão
curl_close($ch);
//Imprimir com leitura fácil para humanos
$retorno = json_decode($retorno);
echo json_encode($retorno, JSON_PRETTY_PRINT);
?>Se alguém puder me ajudar, ficarei muito feliz :)
Desde já, muito Obrigado!
Olá Leonardo, acredito que se você mudar a url do seu ajax apara o caminho do seu servidor, volte a funcionar como o da sua máquina local. Substitua esse trecho :
$.ajax({
url: "conversa.php?texto=" + $("#mensagem #texto").val(),Por esse:
[code=js] $.ajax({
url: window.location.origin"/conversa.php?texto=" + $("#mensagem #texto").val(),Gostei + 0
Clique aqui para fazer login e interagir na Comunidade :)