给我用js写一个用户写入信息后的页面信息传递
时间: 2023-06-06 08:06:58 浏览: 50
的示例代码。
当用户在页面上输入信息后,需要通过AJAX异步请求将用户输入的信息传递给后台服务器。下面是一个示例代码:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户信息录入</title>
</head>
<body>
<h1>用户信息录入</h1>
<form>
<label>姓名:</label>
<input type="text" name="username" id="username">
<br>
<label>年龄:</label>
<input type="text" name="age" id="age">
<br>
<input type="button" value="提交" onclick="submitInfo()">
</form>
<div id="result"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="index.js"></script>
</body>
</html>
```
JS代码:
```
function submitInfo() {
var username = $("#username").val();
var age = $("#age").val();
$.ajax({
url: "https://api.example.com/saveUserInfo",
type: "POST",
data: {
username: username,
age: age
},
dataType: "json",
success: function (data) {
if (data.code === 0) {
// 成功保存用户信息
$("#result").html("<p>保存成功</p>");
} else {
// 失败
$("#result").html("<p>保存失败,请重试</p>");
}
},
error: function (xhr, textStatus, errorThrown) {
console.log(xhr.responseText);
console.log(textStatus);
console.log(errorThrown);
}
});
}
```
在上面的代码中,当用户点击“提交”按钮时,submitInfo()函数会被调用,该函数会获取到用户输入的姓名和年龄,将这些信息通过AJAX请求发送到后台服务器(这里假设后台接口是https://api.example.com/saveUserInfo),当请求成功后,服务器会返回一个JSON格式的数据,根据返回的code值确定是否保存成功,并将结果显示在页面中。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)