update sql w javascript. AJAX ?

Question

Siemanko. Jestem amatorem.
Chciałbym, aby po kliknięciu w span(link1,link2,link3...) zrobil sie update w bazie danych w tabeli o nazwie "uzytkownicy",  i zostaly wpisane dane z inputów "in1, in2, in3...". Jak to zrobic? Nawet nie umiem tego za bardzo opisać.... co wpisać tu?: link1.addEventListener("click", e=>{ if(in1.value!=="") {.......????....... }

<?php                        
                        

$uzyt= $db->prepare("SELECT * FROM uzytkownicy WHERE id=".$_SESSION['logged_id']);
$uzyt->execute();
$result3 = $uzyt->fetch(PDO::FETCH_ASSOC);

                        
            ?>

	
	
     
	
     
    <ul>
        <li class="elo_lan"><span class="in_elo imi1">Imię: </span> <a href="updejt.php" id="link1"><span class="ed0" id="edi1"></span></a><input type="text" placeholder ='<?php print_r($result3['imie']); ?>'
          onfocus="this.placeholder=''" onblur="this.placeholder='<?php print_r($result3['imie']); ?>'"  class="in_dane in_1"/></li>
        
         <li><span class="in_elo">Nazwisko: </span><a href="updejt.php" id="link2"><span class="ed0" id="edi2"></span></a><input type="text" placeholder ='<?php print_r($result3['nazwisko']); ?>'
          onfocus="this.placeholder=''" onblur="this.placeholder='<?php print_r($result3['nazwisko']); ?>'"  class="in_dane in_2"/></li>
        
         <li><span class="in_elo">Miasto: </span><a href="updejt.php" id="link3"><span class="ed0" id="edi3"></span></a><input type="text" placeholder ='<?php print_r($result3['miasto']); ?>'
          onfocus="this.placeholder=''" onblur="this.placeholder='<?php print_r($result3['miasto']); ?>'"  class="in_dane in_3"/></li>
        
         <li><span class="in_elo">Nr. tel: </span><a href="updejt.php" id="link4"><span class="ed0" id="edi4"></span></a><input type="text" placeholder ='<?php print_r($result3['telefon']); ?>'
          onfocus="this.placeholder=''" onblur="this.placeholder='<?php print_r($result3['telefon']); ?>'"  class="in_dane in_4"/></li>
        
         <li><span class="in_elo">Email: </span><a href="updejt.php" id="link5"><span class="ed0" id="edi5"></span></a><input type="text" placeholder ='<?php print_r($result3['email']); ?>'
          onfocus="this.placeholder=''" onblur="this.placeholder='<?php print_r($result3['email']); ?>'"  class="in_dane in_5"/></li>
        
         <li class="elo_lan2"><span class="in_elo">Wiek: </span><a href="updejt.php" id="link6"><span class="ed0" id="edi6"></span></a><input type="text" placeholder ='<?php print_r($result3['data_urodzenia']); ?>'
          onfocus="this.placeholder=''" onblur="this.placeholder='<?php print_r($result3['data_urodzenia']); ?>'"  class="in_dane in_6"/></li>
     
     </ul>
    

let in1 = document.querySelector('.in_1');
let in2 = document.querySelector('.in_2');
let in3 = document.querySelector('.in_3');
let in4 = document.querySelector('.in_4');
let in5 = document.querySelector('.in_5');
let in6 = document.querySelector('.in_6');
let link1 = document.querySelector('#link1');
let link2 = document.querySelector('#link2');
let link3 = document.querySelector('#link3');
let link4 = document.querySelector('#link4');
let link5 = document.querySelector('#link5');
let link6 = document.querySelector('#link6');

let links = $('ul li a');
for(var i=0; i<links.length; i++)
    {
        let link = links[i];
link.addEventListener("click", e=>
                     {
    e.preventDefault();
    
});
    
        
        
    };


link1.addEventListener("click", e=>{
    if(in1.value!=="")
        {
    
        }
        });

 

Answer 1

Może nie powiem ci dokładnie co powinieneś tam wpisać, ale postaram się wskazać Ci drogę.

Generalnie wszystko co musimy zrobić to wysłać "formularz" z danymi na nasz serwer i po stronie serwera obsłużyć w jakiś sposób te dane ( czyli np ten update na tabeli users ).

Wspomniałeś o AJAX'ie więc skorzystamy z tej drogi.

Na początek zajmijmy się wysłaniem danych na nasz serwer i odpowiedzią na pytanie 

co wpisać tu

 A więc powinieneś tutaj wpisać coś co utworzy zapytanie i wyśle je na serwer.

Oto co mogłoby to być:

    /**
     * Tworzymy sobie obiekt, dzięki któremu będziemy mogli wysłać zapytanie na nasz serwer
     */
    const xhr = new XMLHttpRequest();

    /**
     *  Używamy metody "open" w celu ustawienia sposobu wysłania danych na serwer
     *  w naszym przypadku będzie to POST.
     *  Drugim parametrem jest adres, na który chcemy wysłać nasze zapytanie
     *  zakładam, że nie utworzyłeś sobie żadnej domeny więc pewnie będzie to adres naszego pliku php, w którym obsłużymy zapytanie
     *  podam przykładowy adres
     */
    xhr.open('POST', 'localhost/moja_strona/user_update.php');

    /**
     * Teraz musimy jakoś poskładać dane, które chcemy wysłać na serwer
     * Użyjemy do tego obiektu FormData, więc tworzymy nowy obiekt tego typu:
     */
     const formData = new FormData();

    /**
     * Obiekt ten pozwala nam na przypisywanie do niego wartości na zasadzie klucz => wartość przy pomocy metody append('klucz', 'wartosc'),
     * coś jak w tablicy asocjacyjnej, a więć zróbmy to:
     */
    formData.append('updateValue', in1.value);

    /**
     * Teraz musimy wysłać nasze zapytanie i stworzone dane przy pomocy wcześniej utworzonego obiektu
     * robimy to w taki sposób:
     */
    xhr.send(formData);

 

Na koniec wypadałoby jeszcze sprawdzić status żądania i ewentualne błędy jakoś obsłużyć.

Tutaj pomocne linki, które dokładniej wyjaśnią ci jak działają użyte tutaj rzeczy:

XMLHttpRequest, FormData

 

No ok, ale to tylko połowa drogi.

Posiadamy już javaScript, który wyśle zapytanie na nasz serwer, teraz wypadałoby to obsłużyć po stronie serwera i tam zaktualizować dane naszego użytkownika.

Proponuję do tego utworzyć skrypt .php, który się tym zajmie.

Nazwijmy do tak samo jak w opisanym javascripcie, czyli "user_update.php"

Co w tym pliku musimy umieścić?

odpowiedź:

<?php

/**
 * używamy specjalnej zmiennej, w której znajdują się wartości wysłane nam w zapytaniach
 * w naszym przypadku będzie to $_POST gdyż jak w przykładzie wyżej - ustawiliśmy do wysłania danych metodę POST
 * a więc:
 */
$odebranaWartosc = $_POST['nazwaPolaPodanaWFormData'];

/**
 * Tutaj aktualizujemy naszą bazę danych
 */

Dalej pomóc nie mogę ponieważ brakuje mi informacji, a i pisanie kodu za kogoś nie ma sensu.

W każdym razie, widzę, że umiesz łączyć się z bazą danych (robisz to w swoim skrypcie, który wysłałeś), więc wierzę, że dalej sobie poradzisz.

Comments

Na początku wspomniałeś, że nie opiszesz mi tego dokładnie, a nawet po cichu nie marzyłem o tak pomocnym i konstruktywnym komentarzu. Dzięki wielkie za pomoc i za poświęcenie czasu.

Answer 2

Moja propozycja (częściowo w oparciu o Twój kod), może coś wykorzystasz. 

index.php

<?php
//$uzyt = $db->prepare("SELECT * FROM uzytkownicy WHERE id=".$_SESSION['logged_id']);
//$uzyt->execute();
//$result3 = $uzyt->fetch(PDO::FETCH_ASSOC);

// Symulacja pobrania danych z bazy danych - do usunięcia
$result3['imie'] = "Tomasz";
$result3['nazwisko'] = "Nowyklemens";
$result3['miasto'] = "Sosnowiec"; // ;-)
$result3['telefon'] = "555123321";
$result3['email'] = "Nowyklemens@briftryjger.pl";
$result3['data_urodzenia'] = "13.12.1980";
// ... koniec symulacji
?>
<style>
@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

ul {
    list-style-type: none;
}
li {
    line-height: 2.2em;
}
input[type="text"] {
    width: 300px;
    height: 30px;
    padding-right: 55px;
}
button {
    font-size: 11px;
    margin-left: -55px;
    height: 25px;
    width: 50px;
    padding: 2px;
    color: white;
    background-color: darkgray;
    border: 1px solid white;
    border-radius: 2px;
    font-variant: small-caps;
    outline: none;
    cursor: pointer;
    transition: background 0.5s;
}
button:hover {
    background-color: gray;
}
button:active {
    transform: translateY(1px);
}
#update_message {
    padding: 0px 5px;
}
#update_message:before {
    font-family: FontAwesome;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    display: inline-block;
    text-decoration: none;
    width: 1rem;
    margin-right: 1rem;
    text-align: center;
    text-transform: none;
    line-height: 1em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.update:before {
    content: "\f05a";
}
.update {
    color: #4F8A10;
    background-color: #DFF2BF;
}
.success:before {
    content: "\f00c";
}
.success {
    color: black;
    background-color: #DFF2BF;
}
.empty_value:before {
    content: "\f071";
}
.empty_value {
    color: #9F6000;
    background-color: #FEEFB3;
}
.error:before {
    content: "\f057";
}
.error {
    color: #D8000C;
    background-color: #FFD2D2;
}
</style>
<ul id="user_form">
    <li class="elo_lan">
        <!-- <span class="in_elo imi1">Imię: </span> -->
        <label for="in-imie">Imię:</label>
        <input type="text" class="in_dane in_1" id="in-imie" name="imie" placeholder="<?php echo $result3['imie']; ?>">
        <button id="imie">Update</button>
    </li>
    <li>
        <!-- <span class="in_elo">Nazwisko: </span> -->
        <label for="in-nazwisko">Nazwisko:</label>
        <input type="text" class="in_dane in_2" id="in-nazwisko" name="nazwisko" placeholder="<?php echo $result3['nazwisko']; ?>">
        <button id="nazwisko">Update</button>
    </li>
    <li>
        <!-- <span class="in_elo">Miasto: </span> -->
        <label for="in-miasto">Miasto:</label>
        <input type="text" class="in_dane in_3" id="in-miasto" name="miasto" placeholder="<?php echo $result3['miasto']; ?>">
        <button id="miasto">Update</button>
    </li>
    <li>
        <!-- <span class="in_elo">Nr. tel: </span> -->
        <label for="in-telefon">Nr. tel:</label>
        <input type="text" class="in_dane in_4" id="in-telefon" name="telefon" placeholder="<?php echo$result3['telefon']; ?>">
        <button id="telefon">Update</button>
    </li>
    <li>
        <!-- <span class="in_elo">Email: </span> -->
        <label for="in-email">Email:</label>
        <input type="text" class="in_dane in_5" id="in-email" name="email" placeholder="<?php echo $result3['email']; ?>">
        <button id="email">Update</button>
    </li>
    <li class="elo_lan2">
        <!-- <span class="in_elo">Wiek: </span> -->
        <label for="in-data_urodzenia">Wiek:</label>
        <input type="text" class="in_dane in_6" id="in-data_urodzenia" name="data_urodzenia" placeholder="<?php echo $result3['data_urodzenia']; ?>">
        <button id="data_urodzenia">Update</button>
    </li>
    <li>
        <span id="update_message"></span>
    </li>
</ul>
<script>
    const update_message = document.getElementById("update_message");
    const buttons = document.querySelectorAll("#user_form button");
    buttons.forEach((button) => {
        button.addEventListener("click", ({target}) => {
            const input = `in-${target.id}`;
            const i_value = document.getElementById(input).value;
            let u_message = "";

            if (i_value.trim() == "") {
                update_message.className = "empty_value";
                u_message = `Pole: <b>${target.id}</b> jest puste`;
                update_message.innerHTML = u_message;
            } else {
                update_message.className = "update";
                u_message = `Uaktualniam pole: <b>${target.id}</b>: ${i_value}`;
                update_message.innerHTML = u_message;
                setTimeout(update, 2000, target.id, i_value);
            }
        });
    });

    function update(name, value) {
        //Tutaj ajax lub fetch do np.: update_user.php

        fetch("update_user.php", {
                method: "post",
                body: `${name}=` + encodeURIComponent(`${value}`),
                headers: { 'Content-type': 'application/x-www-form-urlencoded' }
            })
            .then(res => {
                if (res.ok) {
                    return res.text();
                } else {
                    throw new Error(`Wystąpił błąd połączenia: ${res.status} ${res.statusText}`);
                }
            })
            .then(res => {
                update_message.className = "success";
                update_message.innerHTML = res;
            })
            .catch(error => {
                update_message.className = "error";
                update_message.innerHTML = error;
            });
    }
</script>

wygląd formularza w css (pobieżny), sam chyba potrafisz go "uporządkować" ? 

update_user.php

<?php
  // Symulacja pobrania danych z sesji - do usunięcia
  $_SESSION['logged_id'] = 34;
  // ... koniec symulacji

  if ($_SERVER["REQUEST_METHOD"] == "POST") {
    //$db = new PDO('mysql:dbname=dbtest;host=127.0.0.1;charset=utf8', 'user', 'password');
    //$db->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
    //$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    if (isset($_POST['imie'])) {
      //$uzyt = $db->prepare("UPDATE uzytkownicy SET imie=:imie WHERE id=:id");
      //$uzyt->bindValue(':id', $_SESSION['logged_id']);
      //$uzyt->bindValue(':imie', $_POST['imie']);
      //$uzyt->execute();
    }

    if (isset($_POST['nazwisko'])) {
      //$uzyt = $db->prepare("UPDATE uzytkownicy SET nazwisko=:nazwisko WHERE id=:id");
      //$uzyt->bindValue(':id', $_SESSION['logged_id']);
      //$uzyt->bindValue(':nazwisko', $_POST['nazwisko']);
      //$uzyt->execute();
    }

    //if (isset($_POST['miasto'])) { ... }
    //if (isset($_POST['telefon'])) { ... }
    //if (isset($_POST['email']) && filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) { ... }
    //if (isset($_POST['data_urodzenia'])) { ... }

    echo "Dane zostały uaktoalnione";
    var_dump($_POST); // test
  } else {
    echo "Uaktualnienie nie powiodło się";
  }
?>

[ What's the difference between echo, print, and print_r in PHP? ]
[ Fetch API:   1   2 ] [ How can I prevent SQL injection in PHP? ]
[ PHP validate filters: filter_var , sanitization , validate filters , sanitize filters ]