Saya sedang mengusahakan projek menggunakan fungsi ajax jquery. Saya hanya mahu fungsi ajax memaparkan beberapa teks daripada fail pada pelayan apabila butang diklik, tetapi apabila saya mengklik butang itu ia tidak melakukan apa-apa. Saya cuba menambah mesej ralat tetapi itu nampaknya tidak berfungsi sama ada. Saya telah memastikan untuk menggunakan versi jquery yang menyokong fungsi ajax, malah saya telah menyalin dan menampal kod daripada sumber yang saya tahu berfungsi, tetapi tiada apa yang nampaknya berfungsi.
Fail skrip java saya
window.onload=loadDoc();
$(document).ready(function(){ // the function that should be getting called
$("#accountInfo").click(function(){
$.ajax({url: "accountPerks.txt",
error: function(xhr, status, error) {
var err = eval("(" + xhr.responseText + ")");
alert(err.Message);
},
success: function(result){
$("#perksDiv").text(result);
}});
});
});
//everything below here are functions for separate pages
$(document).ready(function(){
$("#member1Info").click(function(){
$("#BandMember1").css("visibility", "visible");
});
});
$(document).ready(function(){
$("#member2Info").click(function(){
$("#BandMember2").css("visibility", "visible");
});
});
$(document).ready(function(){
$("#member3Info").click(function(){
$("#BandMember3").css("visibility", "visible");
});
});
function newAlbum(){
var node = document.createElement("li");
var textNode = document.createTextNode("aaaaallllpxas(2023)");
node.appendChild(textNode);
document.getElementById("albumList").appendChild(node);
$("#sneakPeak").css("visibility", "hidden");
}
var getAlbum = document.getElementById("sneakPeak");
getAlbum.onclick=function(){
newAlbum();
}
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function(){
if(xhttp.readyState == 4 && xhttp.status == 200){
document.getElementById("ExtraText").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "TourInfo.txt", true);
xhttp.send();
}
Halaman yang saya mahu fail teks dipaparkan
<?php
session_start();
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CMP204 Unit Two Coursework Template</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>User Profile</h1>
<nav>
<?php include_once "includes/links.php" ?>
</nav>
<?php
echo "Welcome " . $_SESSION["accountName"] . ".<br>";
?>
<button id="accountInfo" type="button" class="btn btn-info btn-md">Click here to learn about account privileges</button> // this button should display the text from the server
<p id="perksDiv"> <p> // the text from the server should be showing in this paragraph
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<form action="addGigsAttended.php" method="post">
add gig attended
<input type="text" name="GigToAdd">
<input type="submit">
</form>
</div>
<div class="col-sm-4">
<form action="editGigsAttended.php" method="post">
edit gig you want to change
<input type="text" name="GigToEdit">
<br>
select gig to replace it with
<input type="text" name="GigToReplace">
<input type="submit">
</form>
</div>
<div class="col-sm-4">
<form action="deleteGigsAttended.php" method="post">
delete gig attended
<input type="text" name="GigToDelete">
<input type="submit">
</form>
</div>
</div>
</div>
<p>Here are all the gigs you have attended</p>
</br>
<?php
$servername = "lochnagar.abertay.ac.uk";
$username = "sql2100904";
$password = "ftAYZgzXz6au";
$dbname = "sql2100904";
$conn = mysqli_connect($servername, $username, $password, $dbname);
$accountName = $_SESSION["accountName"];
$getGigs = mysqli_prepare($conn, "SELECT gigName FROM $accountName");
$results = mysqli_stmt_execute($getGigs);
mysqli_stmt_bind_result($getGigs, $GigLocation);
while (mysqli_stmt_fetch($getGigs)) {
echo $GigLocation . " ";
}
mysqli_stmt_close($getGigs);
myslqi_close($conn);
?>
<!--these scripts are necessary for Bootstrap and must be before the close body tag-->
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="javascript/script2.js"></script>
</body>
</html> 
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Gunakan hanya 1 fungsi dokumen, jika anda menggunakan terlalu banyak fungsi $(document), hanya fungsi terakhir akan dikembalikan dalam respons.
$(document).ready(function(){ //use one doc ready and do your code in this })dan gunakan fungsi lain yang anda ingin jalankan yang akan dimuatkan dalam window.load function