Mise à jour de MySQL avec contenu textuel sans rechargement

Question

Je construis une page qui charge le contenu de notre base de données MySQL pour l'éditer. Chaque ligne de la table est dans une zone de texte séparée et modifiable sur la page. J'ai besoin que l'utilisateur puisse mettre à jour chaque ligne (c'est-à-dire envoyer son contenu à la base de données) sans recharger la page entière, avec un clic sur un bouton responsable de cette zone de texte spécifique.

Je comprends qu'une telle procédure impliquerait du JavaScript, mais malheureusement je n'en connais aucune - j'ai fait tout ce que je pouvais avec PHP, donc j'ai besoin d'un pointage dans cette direction. Fondamentalement ma question (je pense) est comment je prends un texte d'une zone de texte éditée et l'envoie à MySQL sans recharger la page. Si je me dirige dans la mauvaise direction, je serais plus que disposé à entendre d'autres suggestions.

Answer 1

Oui, cela nécessitera javascript. À savoir un appel asynchrone à une page PHP que vous avez. Ceci est souvent appelé AJAX. Je déteste être la réponse "utiliser jquery" ici, mais la bosse de l'apprentissage jQuery pour utiliser les appels basés sur AJAX est très faible à la valeur que vous obtenez à partir d'appels comme celui-ci. La documentation a great examples et la plupart d'entre eux sont assez simples.

Answer 2

Essayez d'en savoir plus sur Ajax. Il y a beaucoup de bibliothèques pour cela.

Answer 3

Ce que vous cherchez est AJAX. jQuery rend beaucoup de cela plus facile; try starting here.

Answer 4

C'est exactement ce que fait AJAX: JavaScript asynchrone et XML. Il vous permet d'envoyer des demandes au serveur sans recharger la page.

Je vous recommande de commencer par jQuery qui, vous le remarquerez, a beaucoup de support dans la communauté StackOverflow, ainsi qu'ailleurs, et qui rend les requêtes AJAX cross-browser très faciles.

Avec le script jQuery sur votre page, vous pouvez faire quelque chose comme ceci:

$("#id-of-the-button-the-user-will-click").click(function() { 
    $.post('/path/to/your/script.php', { field1: value1, field2: value2 }, function(data) { 
     // This function is called when the request is completed, so it's a good place 
     // to update your page accordingly. 
    }); 
}); 

Comprendre les détails seront encore besoin d'une compréhension approfondie de JavaScript, donc vraiment la meilleure chose à faire est plongée et début écrire (et donc apprendre) beaucoup de JavaScript. AJAX est un bon endroit pour commencer.

Answer 5

Il y a un bon introduction to JavaScript at Opera. Jibbering couvre l'utilisation de the XHR object, qui est la manière habituelle d'envoyer des données au serveur sans quitter la page. Les bibliothèques telles que YUI ou jQuery peuvent faire une partie des tâches lourdes pour vous.

Answer 6

Vous pouvez ajouter un événement JavaScript pour textarea:

onblur="sendUpdate(this.value)" 

Cet événement se produira lorsque l'utilisateur a terminé de modifier le texte et laisse l'entrée.

Dans l'exemple, "this" fait référence au composant textarea actuel.

Ensuite, utilisez Ajax, comme mentionné précédemment. Un exemple serait:

function sendUpdate (text) { 
    $.post('script.php', {textarea_value:text},function(){}); 
} 

Answer 7

Vous devez effectuer des appels asynchrones vers le serveur de votre script (javascript) .Utilisation ajax pour y parvenir.Vous devez jeter un oeil à l'utilisation des objets XMLhttp pour communiquer avec le serveur/la base de données à partir de votre script côté client (javascript). Vous n'avez pas besoin de soumettre la page entière en cliquant sur un bouton, vous pouvez à la place appeler le code javscript dans un événement click click ou un événement onBlur ou un événement onTextChange etc ...

jQuery est une bibliothèque de framework javascript qui vous aide à: réduire le nombre de lignes de code pour l'implémenter. Mais il n'est pas nécessaire que vous ayez besoin d'utiliser jquery. Vous pouvez faire des appels ajax sans utiliser jquery.Usage de jQuery va réduire le nombre de lignes.

Cocher cette

http://docs.jquery.com/Ajax/jQuery.ajax

Answer 8

Vous aurez besoin certainement JavaScript, et une méthode d'envoyer une requête HTTP à votre serveur PHP sans recharger la page. Généralement, cela s'appelle AJAX.

Il est probablement préférable d'utiliser une bibliothèque JavaScript, car AJAX est un peu compliqué pour débuter les développeurs JavaScript. Un bon choix est JQuery ou MooTools

bibliothèques AJAX utilisent généralement XMLHttpRequest ou JSONP pour mettre en œuvre les requêtes HTTP. Comprendre ceux qui devraient le rendre un peu plus facile.

• JQuery AJAX:http://docs.jquery.com/Ajax
• MooTools AJAX:http://mootools.net/docs/core/Request/Request

Sélection de l'élément textarea, sa mise à jour, il faudrait utiliser la DOM (http://www.w3.org/DOM/). La plupart des frameworks JavaScript utilisent désormais une implémentation de sélecteurs CSS ou XSLT pour interroger le DOM.

• JQuery Selectors: http://docs.jquery.com/Selectors
• MooTools Selectors:http://mootools.net/docs/core/Utilities/Selectors

Answer 9

Vous pouvez le faire très bien sans JavaScript. Il suffit de demander à chaque textarea + bouton dans sa propre forme <>, puis soumettre le formulaire à un script qui met à jour la base de données de la valeur textarea et renvoie un:

204 No Content 

état au lieu de 200 OK et une nouvelle page. L'ancienne page restera en place.

Answer 10

Vous pouvez commencer par l'ajout d'une fonction jquery pour ramasser toutes les modifications apportées à savoir:

$('#inputelement').on('input propertychange', function(){ 
      alert("Alert to test jquery working"); 
     }); 

Vous devez alors utiliser AJAX pour créer un script php avec les données (comme php comment vous mettez à jour sur le serveur) et envoyer en utilisant une variable GET ou POST. Utilisez ensuite ce fichier de script pour télécharger les modifications sur votre serveur. par exemple.

$('#yourElement').on('input propertychange', function(){ 

     $.ajax({ 
      method: "POST", 
      url: "updatedatabase.php", 
      data: {content: $("#yourElement").val()} 
     }) 
      .done(function(msg) { 
      alert("Data Saved: " + msg); 
     }); 

    }); 

télécharger Script:

session_start(); 

    if(array_key_exists("content", $_POST)){ 

    include("connection.php");//link to your server 

    $query = "UPDATE `users` SET `updateColumn`= '".mysqli_real_escape_string($link, $_POST['content'])."' WHERE id= ".mysqli_real_escape_string($link, $_SESSION['id'])." LIMIT 1"; 

    if(mysqli_query($link, $query)){ 
     echo "success"; 

    }else { 
     echo "failed"; 
    } 

}