js函数、事件、常见提示信息、请求、Ajax
由于您的问题包含多个不同的主题,我将提供每个主题的简要示例代码。
- JavaScript 函数:
// 普通函数
function greet(name) {
return `Hello, ${name}!`;
}
// 箭头函数
const greetArrow = (name) => `Hello, ${name}!`;
- JavaScript 事件:
// 绑定点击事件到按钮
document.getElementById('myButton').addEventListener('click', function() {
alert('Button clicked!');
});
- 常见提示信息:
// 弹出警告框
alert('This is an alert!');
// 确认框
if (confirm('Are you sure?')) {
console.log('User confirmed');
} else {
console.log('User cancelled');
}
// 输入框
let userInput = prompt('Please enter your name:');
if (userInput) {
console.log(`User entered: ${userInput}`);
}
- XMLHttpRequest(简单的 AJAX 请求):
// 创建一个新的XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 配置HTTP请求
xhr.open('GET', 'https://api.example.com/data', true);
// 设置请求完成的处理函数
xhr.onload = function() {
if (this.status == 200) {
// 请求成功
console.log(this.response);
}
};
// 发送请求
xhr.send();
- Fetch API(现代的 AJAX 请求):
// 发送GET请求
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Error fetching data:', error);
});
// 发送POST请求
fetch('https://api.example.com/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ key: 'value' })
})
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Error posting data:', error);
});
这些代码示例展示了如何在JavaScript中创建函数、处理事件、使用常见的提示信息对话框、发起简单和现代的AJAX请求。
评论已关闭