Ich arbeite derzeit an einem Projekt mit JQuery-Ajax-Funktionen. Ich möchte nur, dass die Ajax-Funktion Text aus einer Datei auf dem Server anzeigt, wenn auf eine Schaltfläche geklickt wird, aber wenn ich auf die Schaltfläche klicke, passiert nichts. Ich habe versucht, eine Fehlermeldung hinzuzufügen, aber das scheint auch nicht zu funktionieren. Ich habe darauf geachtet, eine Jquery-Version zu verwenden, die die Ajax-Funktionalität unterstützt. Ich habe sogar Code aus einer Quelle kopiert und eingefügt, von der ich weiß, dass sie funktioniert, aber nichts scheint zu funktionieren.
Meine Java-Skriptdatei
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();
}
Die Seite, auf der die Textdatei angezeigt werden soll
<?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-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
仅使用 1 个文档函数，如果您使用太多 $(document) 函数，则响应中只会返回最后一个函数。
$(document).ready(function(){ //use one doc ready and do your code in this })并使用您想要运行的其他函数将在 window.load 函数中加载