我一直在努力学习一些AJAX。这是我的代码,如果有人能指出我出错的方向,这将是一个很大的帮助!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8"></meta>
<style media="print">
#goBack,
#printRow {
display: none;
}
</style>
</head>
<body id="body" class="body">
<table>
<form id="addUser" onsubmit="return false;">
<tr>
<td>Username:</td>
<td>
<input name="user" />
</td>
<td rowspan="2">
<button id="createUser" name="submit" onclick="getAddUserStatus()">Add User</button>
</td>
</tr>
<tr>
<td>Password:</td>
<td>
<input name="pass" type="password" />
</td>
</tr>
</form>
</table>
<div id="container" class="container">
div contents here
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src=""></script>
<script>
function getAddUserStatus() {
$('#addUser').on('submit', function() {
var postData = $(this).serializeArray();
$.ajax({
url: 'response.php',
data: postData,
type: "POST",
}).done(function(data) {
console.debug(data);
marker = JSON.stringify(data.message);
console.debug(marker);
alert(marker);
$('.container').html(marker); // Or whatever
});
});
}
</script>
</body>
</html>
基本上我要求帮助的是我需要将json的响应写入DIV,json响应的例子是
Object {
saved: false,
user: "discoverexcel",
message: "User already exists"
}
我已经想出如何从中获取“消息”并将其投入警报,但DIV没有运气。我不知道我哪里出错了。
接下来的重点是,为什么页面重新加载?我的印象是使用AJAX的一个很好的理由,所以这里的任何东西都非常受欢迎!
另外,我的最后一个问题是,如果我要在页面上执行多个这样的操作,我将如何进行此操作?每次点击它们时,将每一个嵌套在一个新函数中?另外,加载图像看起来如何显示状态?
答案 0 :(得分:0)