怎么通过ajax传数据
时间: 2023-05-29 14:06:23 浏览: 37
1. 创建XMLHttpRequest对象。
2. 使用open()方法设置请求类型、请求地址和是否异步。
3. 使用setRequestHeader()方法设置请求头部信息。
4. 使用send()方法发送请求。
5. 在onreadystatechange事件中,通过readyState和status属性判断响应状态。
6. 使用responseText或responseXML属性获取响应数据。
示例代码:
```
var xhr = new XMLHttpRequest();
xhr.open('POST', '/api/data', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
console.log(data);
}
};
xhr.send(JSON.stringify({name: '张三', age: 20}));
```
相关问题
js通过ajax发送数据
可以使用XMLHttpRequest对象来发送Ajax请求,示例代码如下:
```
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://example.com/api', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send(JSON.stringify({name: 'John', age: 30}));
```
这段代码通过POST方法向http://example.com/api发送一个JSON格式的数据{name: 'John', age: 30},并在请求成功后打印出响应内容。其中,setRequestHeader方法设置请求头,onreadystatechange方法监听请求状态的变化。
通过ajax获取后台数据
要通过 AJAX 获取后台数据,可以使用 jQuery 提供的 `$.ajax()` 方法。该方法使用异步 HTTP 请求发送和接收数据,使得页面可以在不重新加载的情况下更新内容。
以下是一个简单的例子:
```
$.ajax({
url: '/api/getData', // 后台接口地址
type: 'GET', // 请求方式
dataType: 'json', // 响应数据类型
success: function(data) {
// 成功获取数据后的回调函数
console.log(data);
},
error: function(xhr, status, error) {
// 获取数据失败后的回调函数
console.log(status + ': ' + error);
}
});
```
在上面的代码中,使用 `$.ajax()` 方法发送一个 GET 请求到 `/api/getData` 接口地址,希望得到 JSON 格式的响应数据。如果请求成功,将会调用 `success` 回调函数,并且在控制台中打印出返回的数据;如果请求失败,则会调用 `error` 回调函数,并且在控制台中打印出错误信息。
需要注意的是,如果后台接口需要发送数据,比如 POST 请求,可以使用 `data` 参数传递数据。例如:
```
$.ajax({
url: '/api/submitData',
type: 'POST',
data: {
name: '张三',
age: 18
},
dataType: 'json',
success: function(data) {
console.log(data);
},
error: function(xhr, status, error) {
console.log(status + ': ' + error);
}
});
```
在上面的代码中,使用 `$.ajax()` 方法发送一个 POST 请求到 `/api/submitData` 接口地址,同时传递了一个对象 `{ name: '张三', age: 18 }` 作为请求数据。