PHP + AJAX + Json (Problemas com servidor)

28/04/2018

0

Gente estou necessitando de uma ajuda... Eu tenho um projeto em PHP no meu servidor localhost esta funcionado perfeitamente... Porém ao adicionar em um servidor, não es retornando no ajax... Alguém poderia me auxiliar... O que eu não entendo é, porque Local funciona e quando eu upo no servidor não funciona
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

Leonardo Silva

Responder

Posts

28/04/2018

Leonardo Silva

O Erro apresentado no console é este:

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)
Responder

22/05/2019

Jucelio

O Erro apresentado no console é este:

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 ?
Responder

22/05/2019

William Nascimento

Gente estou necessitando de uma ajuda... Eu tenho um projeto em PHP no meu servidor localhost esta funcionado perfeitamente... Porém ao adicionar em um servidor, não es retornando no ajax... Alguém poderia me auxiliar... O que eu não entendo é, porque Local funciona e quando eu upo no servidor não funciona
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(),


Responder

Assista grátis a nossa aula inaugural

Assitir aula

Saiba por que programar é uma questão de
sobrevivência e como aprender sem riscos

Assistir agora

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar