Mysql
 sql >> Base de Dados >  >> RDS >> Mysql

Alterando e salvando dados do usuário mysql em uma tabela de exibição que exibe os dados de um usuário


Usando ajax o básico:

  • Algumas noções básicas do lado do servidor e do lado do cliente;

  • Ned algumas noções básicas de javascript(jquery);

  • E algumas noções básicas de html e javascript.

Para a primeira parte:

A programação do lado do servidor é escrever código que é executado no servidor, usando linguagens suportadas pelo servidor (como Java, PHP, C#; é possível escrever código que é executado no lado do servidor em JavaScript). A programação do lado do cliente é escrever código que será executado no cliente e é feito em linguagens que podem ser executadas pelo navegador, como JavaScript, html e css.

Para o segundo:

O ajax é importante para declarar o jQuery Core.

Exemplo:
<head>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

Use a última versão do jQuery Core.

Tenha a noção de quem o AJAX trabalha.

Ajax funciona fazendo estes passos:
  1. Ocorre um evento em uma página da web (a página é carregada, um botão é clicado)
  2. Um objeto XMLHttpRequest é criado por JavaScript
  3. O objeto XMLHttpRequest envia uma solicitação para um servidor web
  4. O servidor processa a solicitação
  5. O servidor envia uma resposta de volta à página da web
  6. A resposta é lida por JavaScript
  7. A ação adequada (como atualização de página) é realizada por JavaScript

Para mais, use este link:https://www.w3schools.com/xml/ajax_intro.asp

Configure a solicitação:

URL:

Tipo:Corda

Descrição:uma string contendo a URL para a qual a solicitação é enviada.

dados:

Tipo:PlainObject ou String ou Array

Descrição:Dados a serem enviados ao servidor. Ele é convertido em uma string de consulta, se ainda não for uma string. É anexado ao URL para solicitações GET. Consulte a opção processData para evitar esse processamento automático. O objeto deve ser pares de chave/valor. Se value for um Array, o jQuery serializa vários valores com a mesma chave com base no valor da configuração tradicional (descrita abaixo).

dataType (padrão:Intelligent Guess (xml, json, script ou html)):

Tipo:Corda

Descrição:o tipo de dados que você espera do servidor. Se nenhum for especificado, o jQuery tentará inferir com base no tipo MIME da resposta (um tipo MIME XML produzirá XML, em 1.4 JSON produzirá um objeto JavaScript, em 1.4 script executará o script e qualquer outra coisa será retornado como uma string). Os tipos disponíveis (e o resultado passado como o primeiro argumento para seu retorno de chamada de sucesso) são:

xml:Retorna um documento XML que pode ser processado via jQuery.

html:Retorna HTML como texto simples; as tags de script incluídas são avaliadas quando inseridas no DOM.

script:avalia a resposta como JavaScript e a retorna como texto simples. Desativa o cache anexando um parâmetro de string de consulta, _=[TIMESTAMP], ao URL, a menos que a opção de cache esteja definida como true. Observação:isso transformará POSTs em GETs para solicitações de domínio remoto.

json:avalia a resposta como JSON e retorna um objeto JavaScript. As solicitações "json" entre domínios são convertidas em "jsonp", a menos que a solicitação inclua jsonp:false em suas opções de solicitação. Os dados JSON são analisados ​​de maneira estrita; qualquer JSON malformado é rejeitado e um erro de análise é gerado. A partir do jQuery 1.9, uma resposta vazia também é rejeitada; o servidor deve retornar uma resposta nula ou {}. (Consulte json.org para obter mais informações sobre a formatação JSON adequada.)jsonp:Carrega em um bloco JSON usando JSONP. Adiciona um extra "?callback=?" ao final do seu URL para especificar o retorno de chamada. Desativa o cache anexando um parâmetro de string de consulta, "_=[TIMESTAMP]", à URL, a menos que a opção de cache esteja definida como true.text:Uma string de texto simples.multiple, valores separados por espaço:A partir do jQuery 1.5, o jQuery pode converta um dataType do que recebeu no cabeçalho Content-Type para o que você precisa. Por exemplo, se você deseja que uma resposta de texto seja tratada como XML, use "text xml" para o dataType. Você também pode fazer uma solicitação JSONP, recebê-la como texto e interpretá-la pelo jQuery como XML:"jsonp text xml". Da mesma forma, uma string abreviada como "jsonp xml" tentará primeiro converter de jsonp para xml e, na falta disso, converter de jsonp para texto e, em seguida, de texto para xml.

tipo (padrão:'GET'):

Tipo:Corda

Descrição:o método HTTP a ser usado para a solicitação (por exemplo, "POST", "GET", "PUT"). (versão adicionada:1.9.0)

sucesso:

Tipo:Function( Qualquer dado, String textStatus, jqXHR jqXHR )

Descrição:Uma função a ser chamada se a solicitação for bem-sucedida. A função recebe três argumentos:Os dados retornados do servidor, formatados de acordo com o parâmetro dataType ou a função de retorno de chamada dataFilter, se especificada; uma string descrevendo o status; e o objeto jqXHR (no jQuery 1.4.x, XMLHttpRequest). A partir do jQuery 1.5, a configuração de sucesso pode aceitar um array de funções. Cada função será chamada por sua vez. Este é um evento Ajax.

Para obter mais informações sobre configuração, use o link:http://api.jquery.com/jquery.ajax /

Exemplo:

AJAX:
$.ajax({
        url: 'test.php',
        type: 'POST',
        datatype: 'Json',
        data: {'var1': val_1, 'var2': val_2},
        success: function (response) {
           $('.search-results').html(response);
        }
});

PHP:
$val = $_POST['var1'];//recive the values from ajax
$val = $_POST['var2'];
...// The code to recive and create html code.
echo json_encode($html);//send values back to the main page.

Para a terceira e última parte:

Um exemplo de trabalho completo:
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>

<form>
<select name="users" onchange="showUser(this.value)">
  <option value="">Select a person:</option>
  <option value="1">Peter Griffin</option>
  <option value="2">Lois Griffin</option>
  <option value="3">Joseph Swanson</option>
  <option value="4">Glenn Quagmire</option>
  </select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here...</b></div>
<script>
   function showUser(str) {
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else {
       var var_1 = 
       $.ajax({
        url: 'test.php',
        type: 'POST',
        datatype: 'Json',
        data: {'q': str},
        success: function (response) {
          if(response.error_state = ""){
             document.getElementById("txtHint").innerHTML = response.html;
          }
          else{
             document.getElementById("txtHint").innerHTML = response.response.error_state;
          }
        }
});
    }
}
</script>
</body>
</html>

PHP do lado do servidor (teste.php):
<!DOCTYPE html>
<html>
<head>
<style>
table {
    width: 100%;
    border-collapse: collapse;
}

table, td, th {
    border: 1px solid black;
    padding: 5px;
}

th {text-align: left;}
</style>
</head>
<body>

<?php
$q = intval($_POST['q']);
$error_state = "";
$con = mysqli_connect('localhost','peter','abc123','my_db');
if (!$con) {
    //die('Could not connect: ' . mysqli_error($con));
    $error_state = "<p>"."Could not connect:". mysqli_error($con)."</p>";
}

mysqli_select_db($con,"ajax_demo");
$sql="SELECT * FROM user WHERE id = '".$q."'";
$result = mysqli_query($con,$sql);

$html = "<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
    $html = $html. "<tr>";
    $html = $html. "<td>" . $row['FirstName'] . "</td>";
    $html = $html. "<td>" . $row['LastName'] . "</td>";
    $html = $html. "<td>" . $row['Age'] . "</td>";
    $html = $html. "<td>" . $row['Hometown'] . "</td>";
    $html = $html. "<td>" . $row['Job'] . "</td>";
    $html = $html. "</tr>";
}
$html = $html. "</table>";
mysqli_close($con);
echo json_encode (array(
                    'html'=>$html,
                    'error_state'=>$error_state
));
?>
</body>
</html>

Qualquer dúvida, é só pedir minha ajuda.

Bom trabalho! E não se esqueça de aceitar a resposta se ela ajudar.