ajax表单数据提交，控制台报错无属性（空）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/component/pear/css/pear.css" />
<script src="/static/component/layui/layui.js"></script>
<script src="/static/component/pear/pear.js"></script>
</head>
<body>
<form>
<div style="display: flex;">
<div>
<div style="display: block;width: 78vw;border: solid 1px #c0c4cc;margin-left: 2vw;top: 0;position: relative">
<div style="text-align: center;font-size: 22px;">{$model['exname']??""}</div>
<div style="width: 80vw;display: flex;font-size: 18px;margin-top:5px;">
<div style="width: 15vw;margin-left: 15vw;">考试题数:<span>22</span></div>
<div style="width: 15vw;">考试时间:<span>{$model['duration']??""}分钟</span></div>
<div style="width: 15vw;">满分:<span>100分</span></div>
<div style="width: 15vw;">及格分:<span>{$model['PassScore']??""}分</span></div>
</div>
<input type="hidden" name="eid" id="eid" value="{$subject['eid']??""}">
</div>
<div style="width: 78vw;height: 1px;border-top: 1px solid #ccc;margin-top: 5px;margin-left: 2vw;"></div> <!--分隔线-->
<div style="display: block;width: 78vw;margin-left: 2vw;font-size: 20px;height: 500px;overflow: scroll; white-space: nowrap;">
<div style="display: flex;margin-top: 20px;">
<div>1、</div>
<div style="margin-left: 10px;">{$subjectdx.type}题</div>
<div style="margin-left: 10px;">(共{$dx}题)</div>
</div>
{foreach name="$sject" id="obj" }
{if condition="$obj.type eq '单选'" }
<div style="line-height: 25px;margin-top: 10px;"><span><input type="hidden" name="order{$key+1}" value="{$obj.order}">{$obj.order} /{$dx}、</span>{$obj.topic}
<span style="color: red;margin-left: 10px;">*({$obj.type})</span>
<div>
<td><input type="radio" name="dx{$obj.order}" hidden value="X" checked></td>
</div>
<div>
<td><input type="radio" name="dx{$obj.order}" value="A"></td>
<td>{$obj.option1}</td><br/>
</div>
<div>
<td><input type="radio" name="dx{$obj.order}" value="B"></td>
<td>{$obj.option2}</td><br/>
</div>
<div>
<td><input type="radio" name="dx{$obj.order}" value="C"></td>
<td>{$obj.option3}</td><br/>
</div>
<div>
<td><input type="radio" name="dx{$obj.order}" value="D"></td>
<td>{$obj.option4}</td><br/>
</div>
</div>
{/if}
{/foreach}
<div style="display: flex;margin-top: 20px;">
<div>2、</div>
<div style="margin-left: 10px;">{$subjectddx.type}题</div>
<div style="margin-left: 10px;">(共{$ddx}题)</div>
</div>
<div style="margin-top: 15px;margin-left: 10px;font-size: 20px ">
{foreach name="$sject" id="obj" }
{if condition="$obj.type eq '多选'"}
<div style="line-height: 25px;margin-top: 10px;"><span><input type="hidden" name="order{$key+1}" value="{$obj.order}">{$obj.order} /{$ddx}、</span>{$obj.topic}
<span style="color: red;margin-left: 10px;">*({$obj.type})</span>
<div>
<td><input type="checkbox" hidden name="ddx{$obj.order}[]" value="X" checked></td>
</div>
<div>
<td><input type="checkbox" name="ddx{$obj.order}[]" value="A"></td>
<td>{$obj.option1}</td><br/>
</div>
<div>
<td><input type="checkbox" name="ddx{$obj.order}[]" value="B"></td>
<td>{$obj.option2}</td><br/>
</div>
<div>
<td><input type="checkbox" name="ddx{$obj.order}[]" value="C"></td>
<td>{$obj.option3}</td><br/>
</div>
<div>
<td><input type="checkbox" name="ddx{$obj.order}[]" value="D"></td>
<td>{$obj.option4}</td><br/>
</div>
</div>
{/if}
{/foreach}
</div>
<div style="display: flex;margin-top: 20px;">
<div>3、</div>
<div style="margin-left: 10px;">{$subjecttk.type}题</div>
<div style="margin-left: 10px;">(共{$tk}题)</div>
</div>
<div style="margin-top: 15px;margin-left: 10px;font-size: 20px ">
{foreach name="$sject" id="obj" }
{if condition="$obj.type eq '填空'"}
<div style="line-height: 25px;margin-top: 10px;"><span><input type="hidden" name="order{$key+1}" value="{$obj.order}">{$obj.order} /{$tk}、</span>{$obj.topic}
<span style="color: red;margin-left: 10px;">*({$obj.type})</span>
<input type="hidden" value="X" required class="layui-textarea" name="tk{$obj.order}" style="width: 50vw;">
<textarea type="text" value="{$obj.option1}" required class="layui-textarea" name="tk{$obj.order}" style="width: 50vw;"></textarea>
</div>
{/if}
{/foreach}
</div>
<div style="display: flex;margin-top: 20px;">
<div>4、</div>
<div style="margin-left: 10px;">{$subjectpd.type}题</div>
<div style="margin-left: 10px;">(共{$pd}题)</div>
</div>
<div style="margin-top: 15px;margin-left: 10px;font-size: 20px ">
{foreach name="$sject" id="obj" }
{if condition="$obj.type eq '判断'"}
<div style="line-height: 25px;margin-top: 10px;"><span><input type="hidden" name="order{$key+1}" value="{$obj.order}">{$obj.order} /{$pd}、</span>{$obj.topic}
<span style="color: red;margin-left: 10px;">*({$obj.type})</span>
<div>
<input type="radio" hidden name="option1{$obj.order}" value="X" title="{$obj.option1}" checked>
<input type="radio" name="option1{$obj.order}" value="{$obj.option1}" title="{$obj.option1}">√
<input type="radio" name="option1{$obj.order}" value="{$obj.option2}" title="{$obj.option2}">×
</div>
</div>
{/if}
{/foreach}
</div>
<div style="display: flex;margin-top: 20px;">
<div>5、</div>
<div style="margin-left: 10px;">{$subjectjd.type}题</div>
<div style="margin-left: 10px;">(共{$jd}题)</div>
</div>
<div style="margin-top: 15px;margin-left: 10px;font-size: 20px">
{foreach name="$sject" id="obj" }
{if condition="$obj.type eq '简答'"}
<div style="line-height: 25px;margin-top: 10px;"><span><input type="hidden" name="order{$key+1}" value="{$obj.order}">{$obj.order} /{$jd}、</span>{$obj.topic}
<span style="color: red;margin-left: 10px;">*({$obj.type})</span>
<div>
<input type="hidden" value="X" required class="layui-textarea" name="jd{$obj.order}" style="width: 50vw;">
<textarea type="text" value="{$obj.option1}" required class="layui-textarea" name="jd{$obj.order}" style="width: 50vw;"></textarea>
</div>
</div>
{/if}
{/foreach}
</div>
</div>
<div style="display: block;text-align: center;bottom: 0px; position: absolute;width: 78vw;">
<button class="pear-btn pear-btn-primary pear-btn-sm" style="margin-top: 15px;margin-bottom: 15px;width: 14vw;font-size: 22px;" lay-submit="" lay-filter="save">交卷</button>
</div>
</div>
<div style="margin-left:2vw;width: 16vw;height:50vw;border: solid 1px #c0c4cc;">
<div style="margin-left: 15px;width: 14vw;margin-top: 10px;">
<div style="display: block;border: solid 1px #c0c4cc;">
<div style="display: flex;margin-left: 1vw;font-size: 24px;">
<div><i class="layui-icon layui-icon-time" style="font-size: 24px;"></i></div>
<div id="countdown" style="margin-left: 10px;"></div>
</div>
</div>
<div style="width: 14vw;height: 1px;border-top: 1px solid #ccc;"></div> <!--分隔线-->
<div style="display: block;border: solid 1px #c0c4cc;margin-top: 10px;">
<div style="display: flex;margin-left:1vw;font-size: 22px;">
<div>姓名:</div>
<div style="margin-left:10px;">{$user['username']??""}</div>
</div>
</div>
<!-- <div style="display: block;text-align: center;margin-top: 10px;bottom: 150px; position: absolute;">-->
<!-- <button class="pear-btn pear-btn-primary pear-btn-sm" style="margin-top: 15px;margin-bottom: 15px;width: 14vw;font-size: 22px;" lay-submit="" lay-filter="save">交卷</button>-->
<!-- </div>-->
<!-- <div style="width: 14vw;height: 1px;border-top: 1px solid #ccc;"></div> <!–分隔线–>-->
</div>
</div>
</div>
</form>
<script>
// 倒计时30分钟
const countdownDuration = 120 * 60 * 1000;
// 倒计时结束时间为当前时间加上倒计时时间
const countdownEndTime = new Date().getTime() + countdownDuration;
const countdownEl = document.getElementById('countdown');
function updateCountdown() {
// 当前时间与倒计时结束时间的时间差
const now = new Date().getTime();
const distance = countdownEndTime - now;
// 计算剩余的分钟和秒
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
let h = (hours<=9) ? '0' + hours : hours;
let m = (minutes<=9) ? '0' + minutes : minutes;
let s = (seconds<=9) ? '0' + seconds : seconds;
// 将剩余时间显示在页面上
countdownEl.innerHTML = `${h}:${m}:${s}`;
// 如果倒计时结束，则显示提示消息
if (distance < 0) {
clearInterval(countdownInterval);
countdownEl.innerHTML = '考试已结束！';
}
let time=countdownEl.innerHTML;
}
// 每秒更新一次倒计时
const countdownInterval = setInterval(updateCountdown, 1000);
layui.use(['form','jquery'],function(){
let form = layui.form;
let $ = layui.jquery;
form.on('submit(save)', function(data){
$.ajax({
data:JSON.stringify(data.field),
dataType:'json',
contentType:'application/json',
type:'post',
success:function(res){
res=JSON.decode(res);
//判断有没有权限
if(res && res.code==999){
layer.msg(res.msg, {
icon: 5,
time: 2000,
})
return false;
}else if(res.code==200){
layer.msg(res.msg,{icon:1,time:1000},function(){
parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
parent.layui.table.reload("dataTable");
});
}else{
layer.msg(res.msg,{icon:2,time:1000});
}
}
})
return false;
});
})
</script>
</body>
</html>
问题没有接收到数据
没传值，没获取到值，不对不对，请求得看XHR才行，其次控制台3个报错解决下，压根就没发请求，你请求路径都没写，一大堆错误
- 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/747343
- 这篇博客你也可以参考下：非常简单的适用的ajax提交数据
- 除此之外, 这篇博客: Ajax实现注册登录校验中的 但是我在这里遇到了一个问题，请求大佬支个招 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
就是中文乱码问题，我在web.xml中已经配置了过滤器。
<!-- 解决springmvc传递值乱码问题 --> <filter> <filter-name>encodingFilter</filter-name> <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class> <init-param> <param-name>encoding</param-name> <param-value>UTF-8</param-value> </init-param> <init-param> <param-name>forceEncoding</param-name> <param-value>true</param-value> </init-param> </filter> <filter-mapping> <filter-name>encodingFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>但是还是乱码啊，哭了。
- 以下回答由chatgpt基于相关博客总结生成:
由于问题描述比较笼统，无法针对具体报错进行解答。以下是一些可能导致问题的原因和建议的解决方案：
AJAX请求的URL地址不正确或请求方法不正确（例如，应该使用POST请求，实际使用了GET请求）。建议检查代码中的请求URL是否正确，并确保使用了正确的请求方法。
请求参数的格式不正确或缺失了必要的参数。建议检查请求参数的格式是否正确、是否缺失了必要的参数，并根据API文档进行调整。
服务器返回的数据格式和客户端代码中的预期不一致。建议在控制台中查看服务器返回的数据格式，并确认客户端代码中的解析逻辑是否正确。
服务器不支持跨域请求。如果请求的URL和页面的URL在域名或端口上不一致，服务器可能会拒绝跨域请求。建议在代码中设置合适的CORS配置或使用JSONP等跨域请求方式。
运行环境存在安全限制，例如浏览器的CORS限制或服务器的CSRF限制。建议查看控制台报错信息或服务器返回的HTTP响应头信息，确认是否存在安全限制，如果有，按照相应的方式进行处理。
需要指出的是，由于没有给出具体的错误信息或代码，以上解决方案只是一些常见的原因和建议，并不能保证一定能解决该问题。如果需要更具体的解决方案，请提供更多的细节和信息。