Jak załadować stronę PHP do elementu div za pomocą jQuery i AJAX?

Question

Próbuję napisać funkcję, która po kliknięciu wywoła getproduct.php?id=xxx. Mogę wyświetlić część innerHTML, ale jak mogę również zadzwonić na stronę php, która faktycznie wykonuje pracę?

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

Answer 1

Można to zrobić na przykład z jQuery.

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 
}); 

Answer 2

Edit: oryginalne pytanie nie odwołać jQuery. Pozostawiając tę ​​odpowiedź tutaj, inni mogą uznać ją za użyteczną.

Oto jak można to zrobić za pomocą obiektu XHR dla żądania ajaxowego bez jQuery lub Prototype lub innej biblioteki 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(); 
} 

Answer 3

można zadzwonić lub strona php obciążenie wewnątrz div przy użyciu tej linii jak: -

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

z "ajax/page_url.php" jego względną ścieżkę pliku php.

dzięki czemu można go również zastąpić zewnętrznym adresem URL.

podziel się swoją wiedzą, jeśli się mylę.

Answer 4

Można użyć dostać lub wniosek po użyciu kwerendy

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

example

Answer 5

Istnieje wiele sposobów, za pomocą którego można załadować stronę do podziału.

Sama metoda

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(); 
} 

to typowy sposób bez odniesienia zewnętrznego.

Jeśli pójdziesz z odniesieniem następnie istnieje 5 sposobów, aby wywołanie ajax z jQuery

---

• load(): załadować kawałek HTML do DOM pojemnika.
• jQuery.getJSON(): Załaduj JSON metodą GET.
• jQuery.getScript(): Załaduj JavaScript.
• jQuery.get(): Skorzystaj z tej opcji, jeśli chcesz wykonać wywołanie GET i grać intensywnie z odpowiedzią.
• jQuery.post(): Użyj tej opcji, jeśli chcesz wykonać wywołanie POST i nie chcesz ładować odpowiedzi do jakiegoś kontenera DOM.
• jQuery.ajax(): Użyj tego, jeśli musisz coś zrobić, gdy XHR się nie powiedzie, lub musisz określić opcje ajax (np. Cache: true) w locie .

---

Answer 6

Cześć Można zadzwonić poniżej funkcji, aby wykonać tę ładuje dane z serwera na sukces można tworzyć nie działają jak dobrze

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 

     } 
    }); 

}