form.on('submit(chengjiForm)', function(data){ $.ajax({ url: './chengjiAdd', method: 'post', data: data.field, //JSON.stringify(data.field), dataType: 'JSON', success: function(data){ if(data.code == "0"){ parent.layer.msg("添加成功",{ icon: 6, time: 500 }); setTimeout(function(){ //parent.location.reload(); var index = parent.layer.getFrameIndex(window.name); //操作父页面 parent.layer.close(index); }, 500); }else{ leyer.msg("添加失败"); } } }) return false; });
时间: 2024-01-18 21:04:34 浏览: 133
这段代码是一个表单提交的事件监听函数,当表单提交时,会发送一个ajax请求到`./chengjiAdd`地址,使用post方法,发送的数据为表单的数据,数据类型为JSON格式。如果请求成功,会根据返回的数据code判断是否添加成功,如果成功,则提示添加成功,并等待0.5秒后刷新父页面并关闭当前弹窗。如果失败,则提示添加失败。最后,返回false,防止表单默认提交行为。
相关问题
请按照我的意愿优化下面的代码,要求能自动适应手机等界面,全局字体为楷体<!DOCTYPE html> <html> <head> <meta lang="zn"> <meta charset="utf-8"> <title>文件实验室账号登录</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> </head> <body> <form id="login-form" action="#"> <label for="email"></label> <input type="email" id="email" name="email" placeholder="在此输入邮箱账号"> <button type="button" id="get-code-btn">获取验证码</button> <br><br> <label for="code"></label> <input type="text" id="code" name="code" placeholder="在此输入收到的验证码"> <button type="submit">登录</button> </form> <script> $(function() { $('#get-code-btn').click(function() { var email = $('#email').val(); $.ajax({ url: '/admin/', method: 'POST', data: {email: email}, success: function(data) { if (data.status == 'success') { // 获取验证码成功,开始倒计时 var count = 60; var timer = setInterval(function() { if (count == 0) { clearInterval(timer); $('#get-code-btn').prop('disabled', false).text('获取验证码'); } else { $('#get-code-btn').prop('disabled', true).text(count + '秒后重试'); count--; } }, 1000); } else { alert('获取验证码失败,请重试!'); } }, error: function() { alert('获取验证码失败,请重试!'); } }); }); $('#login-form').submit(function() { var email = $('#email').val(); var code = $('#code').val(); $.ajax({ url: '/response/', method: 'POST', data: {email: email, code: code}, success: function(data) { if (data.status == 'success') { // 验证码校验成功,跳转到目标页面 window.location.href = 'http://spacexs.cn'; } else { alert('验证码错误,请重新输入!'); } }, error: function() { alert('验证码错误,请重试!'); } }); return false; }); }); </script> </body> </html>
<!DOCTYPE html>
<html>
<head>
<meta lang="zn">
<meta charset="utf-8">
<title>文件实验室账号登录</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: 楷体;
font-size: 1.2rem;
padding: 1rem;
}
form {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 400px;
margin: auto;
}
label {
margin-bottom: 0.5rem;
}
input[type='email'], input[type='text'] {
padding: 0.5rem;
margin-bottom: 1rem;
border: none;
border-bottom: 2px solid #ddd;
width: 100%;
box-sizing: border-box;
font-size: 1.2rem;
}
button {
padding: 0.5rem;
border: none;
background-color: #007bff;
color: #fff;
font-size: 1.2rem;
cursor: pointer;
}
button:hover {
background-color: #0069d9;
}
button:disabled {
background-color: #ddd;
color: #333;
cursor: not-allowed;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<form id="login-form" action="#">
<label for="email">邮箱账号:</label>
<input type="email" id="email" name="email" placeholder="在此输入邮箱账号">
<button type="button" id="get-code-btn">获取验证码</button>
<label for="code">验证码:</label>
<input type="text" id="code" name="code" placeholder="在此输入收到的验证码">
<button type="submit">登录</button>
</form>
<script>
$(function() {
$('#get-code-btn').click(function() {
var email = $('#email').val();
$.ajax({
url: '/admin/',
method: 'POST',
data: {email: email},
success: function(data) {
if (data.status == 'success') {
// 获取验证码成功,开始倒计时
var count = 60;
var timer = setInterval(function() {
if (count == 0) {
clearInterval(timer);
$('#get-code-btn').prop('disabled', false).text('获取验证码');
} else {
$('#get-code-btn').prop('disabled', true).text(count + '秒后重试');
count--;
}
}, 1000);
} else {
alert('获取验证码失败,请重试!');
}
},
error: function() {
alert('获取验证码失败,请重试!');
}
});
});
$('#login-form').submit(function() {
var email = $('#email').val();
var code = $('#code').val();
$.ajax({
url: '/response/',
method: 'POST',
data: {email: email, code: code},
success: function(data) {
if (data.status == 'success') {
// 验证码校验成功,跳转到目标页面
window.location.href = 'http://spacexs.cn';
} else {
alert('验证码错误,请重新输入!');
}
},
error: function() {
alert('验证码错误,请重试!');
}
});
return false;
});
});
</script>
</body>
</html>
layui.use(['form'], function () { var form = layui.form; form.on('submit(addBook)', function (data) { console.log(data.field); $.ajax({ type: 'post', method: 'post', url: '/BookShopSystem_war/insertBook', data: JSON.stringify(data.field), // 将表单数据转换为 JSON 字符串 dataType: 'json', contentType: 'application/json', // 设置请求头的 Content-Type success: function (res) { layer.msg("提交成功", function () { setTimeout(function () { window.parent.frames.location.href = "bookList.html"; }, 5000); }); }, error: function (res) { layer.msg("提交失败", function () { setTimeout(function () { window.parent.frames.location.href = "bookList.html"; }, 5000); }); }, }); return false; }); });该代码调用接口成功,并能插入数据,但为什么提交数据后弹出的是error:function
可能是因为服务器返回的状态码不是 2xx(比如 200,201,204 等),而是 4xx 或 5xx 等错误状态码。你可以在 error 回调函数中查看服务器返回的具体信息,例如:
```
error: function (res) {
console.log(res.status); // 查看状态码
console.log(res.responseText); // 查看服务器返回的具体信息
layer.msg("提交失败", function () {
setTimeout(function () {
window.parent.frames.location.href = "bookList.html";
}, 5000);
});
},
```
如果是因为请求头的 Content-Type 不正确导致的错误,也会返回 4xx 错误状态码,你可以在浏览器的开发者工具中查看请求头和响应头的具体信息,以确定问题所在。
阅读全文