web-dev-qa-db-fra.com

Comment charger un PHP page dans une div avec jQuery et AJAX?

J'essaie d'écrire une fonction qui appellera getproduct.php?id=xxx lorsque l'utilisateur clique dessus. Je peux faire apparaître la portion innerHTML, mais comment appeler aussi la page php qui fait réellement le travail?

var id = id;
document.getElementById("digital_download").innerHTML = 
    "Downloading...Please be patient. The process can take a few minutes."; 
url = getproduct.php?id=id;
phpjavascriptjqueryajax
5
Refiking

Vous pouvez le faire avec jQuery par exemple.

var id = 1;
$('#digital_download').html('Downloading...'); // Show "Downloading..."
// Do an ajax request
$.ajax({
  url: "getproduct.php?id="+id
}).done(function(data) { // data what is sent back by the php page
  $('#digital_download').html(data); // display data
});
7
neumino

vous pouvez appeler ou charger une page php dans une div en utilisant cette ligne comme: -

$("#content_div").load("ajax/page_url.php");

"ajax/page_url.php" est un chemin relatif du fichier php.

alors ici, vous pouvez également le remplacer par une URL externe.

s'il vous plaît partagez vos connaissances si je me trompe.

11
praveen Sharma

Modifier: la question d'origine ne faisait pas référence à jQuery. Laisser cette réponse ici, car d’autres le trouveront peut-être utile.

Voici comment procéder à l'aide de l'objet XHR pour une demande ajax sans jQuery, Prototype ou autre bibliothèque JS.

var xmlhttp;
if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
} else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById('digital_download').innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET", 'getproduct.php?id=' + id,true);
    xmlhttp.send();
}
1
Steven Moseley

Il existe de nombreuses manières de charger une page dans une division.

La méthode même est

var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }

xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        document.getElementById('digital_download').innerHTML=xmlhttp.responseText;
    }
}
   xmlhttp.open("GET", 'getproduct.php?id=' + id,true);
   xmlhttp.send();
}

c'est une méthode typique sans référence externe.

Si vous y allez avec référence alors il y a 5 façons de faire un appel ajax avec jQuery

  • load (): Charge un morceau de HTML dans un conteneur DOM.
  • jQuery.getJSON (): Charge un JSON avec une méthode GET.
  • jQuery.getScript (): Charger un JavaScript.
  • jQuery.get (): Utilisez ceci si vous voulez passer un appel GET et jouer longuement avec la réponse.
  • jQuery.post (): Utilisez cette option si vous souhaitez effectuer un appel POST et ne souhaitez pas charger la réponse dans un conteneur DOM.
  • jQuery.ajax (): Utilisez ceci si vous devez faire quelque chose lorsque XHR échoue ou que vous devez spécifier des options ajax (par exemple, cache: true) à la volée.
1
myk.

Vous pouvez utiliser get ou post request en utilisant query

$.ajax({
type: "POST",
url: url,
data: data,
success: success,
dataType: dataType
});

Exemple

0
Sonu Sindhu

Bonjour Vous pouvez appeler la fonction ci-dessous pour effectuer cette opération. Il charge les données du serveur en cas de succès. Vous pouvez également créer une fonction d'échec

 function setValue(Id) {
 document.getElementById("digital_download").innerHTML = 
"Downloading...Please be patient. The process can take a few minutes.";
 var data1 = {
        message: Id,
    };

    $.ajax({
      data: data1,
      type: 'GET',
      url: "http://urltoscript/index.php",
     cache: false,
        dataType: "json",
        crossDomain: true,
        success: function(data) {
        console.log("Response for cancel is: " + data);

     document.getElementById("digital_download").innerHTML =  data

      }
    });

 }
0
njoshsn