XMLHttpRequest的的ajax请求被取消，xmlHttp.status为0
来源：互联网 发布：苹果手机如何授权软件 编辑：程序博客网 时间：2024/05/21 10:41
我在做一个javaWeb的过程中，始终出现xmlHttp.readyState的状态值从1到4，但是xmlHttp.status的值始终未0，找了很多方法都没有解决，后来才知道，是因为我的form表单提交时，button上的click事件会同时触发，form action将表单内容以serach的形式追加至当前url上，url变更后会导致页面重新加载， 而这正是导致post请求在执行后就被终止的原因，无法找到原来的那个地址，地址已经被改变了，所以要添加点击事件时，在form表单中，最好不要设置成button，可以设置成a标签。
下面是我的代码：
页面的代码：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="renderer" content="webkit">
<title></title>
<link style="text/css" rel="stylesheet" href="CSS/style_admin.css">
<link style="text/css" rel="stylesheet" href="fonts/icomoon.css">
<link rel="stylesheet" href="css/pintuer.css">
<link rel="stylesheet" href="css/admink.css">
<script src="js/jquery.js"></script>
<script src="js/pintuer.js"></script>
</head>
<body>
<div class="panel admin-panel">
<div class="panel-head" id="add"><strong><span class="icon-pencil-square-o"></span>修改学生信息</strong></div>
<div class="body-content">
<form method="post" class="form-x" action="">
<div class="form-group">
<div class="label">
<label>学号：</label>
</div>
<div class="field">
<input type="text" class="input w50" value="" name="title" data-validate="required:请输入学号" id="num"/>
<div class="tips"></div>
</div>
</div>
<div class="form-group">
<div class="label">
<label>姓名：</label>
</div>
<div class="field">
<input type="text" class="input w50" value="" name="title" data-validate="required:请输入姓名" id="name"/>
<div class="tips"></div>
</div>
</div>
<div class="form-group">
<div class="label">
<label>专业：</label>
</div>
<div class="field">
<input type="text" class="input w50" value="" name="title" data-validate="required:请输入专业" id="major"/>
<div class="tips"></div>
</div>
</div>
<div class="form-group">
<div class="label">
<label>学院：</label>
</div>
<div class="field">
<input type="text" class="input w50" value="" name="title" data-validate="required:请输入学院" id="department"/>
<div class="tips"></div>
</div>
</div>
<div class="form-group">
<div class="label">
<label>年级：</label>
</div>
<div class="field">
<select name="cid" class="input w50" id="grade">
<option value="2013级1班">2014级</option>
<option value="2014级">2013级</option>
<option value="2014级">2012级</option>
<option value="2014级1班">2015级</option>
</select>
<div class="tips"></div>
</div>
</div>
<div class="form-group">
<div class="label">
<label>班级：</label>
</div>
<div class="field">
<input type="text" class="input w50" value="" name="title" data-validate="required:请输入班级" id="classs"/>
<div class="tips"></div>
</div>
</div>
<div class="form-group">
<div class="label">
<label>名族：</label>
</div>
<div class="field">
<select name="cid" class="input w50" id="nation">
<option value="汉族">汉族</option>
<option value="彝族">彝族</option>
<option value="藏族">藏族</option>
</select>
<div class="tips"></div>
</div>
</div>
<div class="form-group">
<div class="label">
<label>性别：</label>
</div>
<div class="field">
<select name="cid" class="input w50" id="sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
<div class="tips"></div>
</div>
</div>
<div class="form-group">
<div class="label">
<label>电话号码：</label>
</div>
<div class="field">
<input type="text" class="input w50" value="" name="title" data-validate="required:请输入电话号码" id="telephone"/>
<div class="tips"></div>
</div>
</div>
<div class="form-group">
<div class="label">
<label>email：</label>
</div>
<div class="field">
<input type="text" class="input w50" value="" name="title" data-validate="required:请输入email" id="email"/>
<div class="tips"></div>
</div>
</div>
<div class="form-group">
<div class="label">
<label>图片：</label>
</div>
<div class="field">
<input type="text" id="url1" name="img" class="input tips" style="width:25%; float:left;" value="" data-toggle="hover" data-place="right" data-image="" />
<input type="button" class="button bg-blue margin-left" id="image1" value="+ 浏览上传" style="float:left;">
<div class="tipss">图片尺寸：500*500</div>
</div>
</div>
<if condition="$iscid eq 1">
<div class="form-group">
<div class="label">
<label>分类标题：</label>
</div>
<div class="field">
<select name="cid" class="input w50">
<option value="">请选择分类</option>
<option value="">产品分类</option>
<option value="">产品分类</option>
<option value="">产品分类</option>
<option value="">产品分类</option>
</select>
<div class="tips"></div>
</div>
</div>
</if>
<div class="form-group">
<div class="field">
<a class="button bg-main icon-check-square-o" onclick="edit()" id=""> 修改</a>
<a class="button bg-red icon-history" > 返回</a>
</div>
</div>
</form>
</div>
</div>
js代码：
//创建XmlHttpRequest对象
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject){
try{
xmlHttp=new ActiveXObject("Msxml12.XMLHTTP");
}catch(e){
xml=new ActiveXObject("Microsoft.XMLHTTP")
}
}else{
xmlHttp=new XMLHttpRequest();
}
}
function edit(){
//createXMLHttpRequest();
//获取 id 为 num 元素转换为 jquery 对象
var $num = $('#num');
//判断学号必须输入 trim 去除前后空格
if ($num.val().trim() == '') {
//layer 插件提示
layer.msg('请输入学号', {
offset: '20%',
icon: 5,
time: 2000
});
//光标聚集
$num.focus();
return;
}
var $department=$('#department');
var $classs = $('#classs');
var $name = $('#name');
//限制必须输入姓名
if ($name.val().trim() == '') {
layer.msg('请输入姓名', {
offset: '20%',
icon: 5,
time: 2000
});
$name.focus();
return;
}
var $nation = $('#nation');
var $grade=$('#grade');
var $sex = $('#sex');
var $major=$('#major');
var $telephone=$('#telephone');
var $email=$('#email');
var datas="num="+ $num.val().trim()+"&name="+$name.val().trim()+"&department="+
$department.val().trim()+"&major="+$major.val().trim()+"&grade="+$grade.val().trim()+"&classs="
+$classs.val()+"&sex="+$sex.val()+"&nation="+$nation.val().trim()+
"&telephone="+$telephone.val().trim()+"&email="+$email.val().trim();
console.log(datas);
xmlHttp.open("post","http://localhost:8080/Management/EditStuServlet");
//常用有两种：application/x-www-form-urlencoded和multipart/form-data，
xmlHttp.setRequestHeader('Content-Type',"application/x-www-form-urlencoded");
xmlHttp.send(datas);
xmlHttp.onreadystatechange=function(){
console.log("xmlHttp.readyState="+xmlHttp.readyState+" xmlHttp.status=:"+xmlHttp.status);
if(xmlHttp.readyState==4 && xmlHttp.status==200){
if(xmlHttp.responseText=="success"){
//成功提示
layer.msg('修改成功', {
offset: '20%',
icon: 6,
time: 2000
}, function() {
window.location.href = 'studentInfoChange.jsp';
});
}
else{
layer.msg('修改失败', {
offset: '20%',
icon: 5,
time: 2000
});
}
}
}
}
- XMLHttpRequest的的ajax请求被取消，xmlHttp.status为0
- ajax的xmlHttpRequest请求
- Ajax中XMLHttpRequest对象的status为0时的解决方法
- xmlhttp.status为0的原因及其解决方案
- ajax请求导致status为canceled的原因
- ajax请求status为canceled的原因浅析
- jquery AJAX 返回总是error XMLHttpRequest.status 为0
- xmlHttp.status 的值
- xmlHttp.status的值
- xmlHttp.status的值
- 利用 Microsoft.XMLHTTP/XMLHttpRequest 对象 实现Ajax技术 的总结
- AJAX xmlHttp.status = 0 ,xmlHttp.status = 200
- XMLHttpRequest的status
- Ajax xmlHttpRequest的status的值的含义
- Ajax xmlHttpRequest的status的值的含义
- xmlHttp.status和XMLHttpRequest()…
- 第一个Ajax程序给我的下马威——xmlHttp的status=0？
- 基于 XMLHttpRequest实现的Ajax请求
- AndroidStudio offlineWork
- 访问数据层
- vmware虚拟机修复方法--还原
- Emoji 表情存入数据库 (一)
- jQuery中ready与load事件的区别
- XMLHttpRequest的的ajax请求被取消，xmlHttp.status为0
- U-boot简介及常用命令说明
- 使用正则表达式，确保传入的口令是强口令
- 网际协议IP(2)之IP地址与硬件地址
- 文章标题HTML5新增特性
- 讯飞开放平台sdk集成之android
- 异常
- searchInsertPlus
- [leetcode:python]27.Remove Element
