JavaScript Ajax使用案例
时间: 2024-05-03 13:22:58 浏览: 77
Ajax使用示例
以下是一个简单的JavaScript Ajax使用案例,用于获取服务器上的数据并将其显示在页面上:
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Ajax Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="data"></div>
<script>
$(document).ready(function(){
$.ajax({
url: "data.php",
type: "GET",
dataType: "json",
success: function(data){
for(var i=0; i<data.length; i++){
$('#data').append("<p>" + data[i].name + "</p>");
}
},
error: function(jqXHR, textStatus, errorThrown){
alert("Error: " + textStatus + " - " + errorThrown);
}
});
});
</script>
</body>
</html>
```
上述代码通过使用 jQuery 库中的 $.ajax() 方法来发起 Ajax 请求。该方法接受一个对象作为参数,该对象包含以下属性:
- url: 请求的 URL。
- type: 请求的方法(GET、POST 等)。
- dataType: 服务器响应的数据类型。
- success: 请求成功后执行的回调函数。
- error: 请求失败后执行的回调函数。
在该例中,我们使用 GET 方法请求名为 data.php 的服务器端脚本,该脚本将返回一组 JSON 数据。如果请求成功,我们将使用 jQuery 的 append() 方法将数据显示在页面上。如果请求失败,我们将弹出一个错误提示框。
阅读全文