IE9的F12工具,"网络"页签,点击"开始捕获"之后,请求显示的状态是"挂起"的分析和解决

本文探讨了一个关于Ajax请求参数丢失的问题,详细分析了在使用jQuery发送POST请求时,参数未能正确传递给服务端的具体原因,并给出了有效的解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

      最近一个项目,客户端使用用jquery编写ajax请求,服务端采用struts2框架。JS发送请求和action处理请求过程中,遇到一个问题。刚开始觉得问题很诡异,仔细定位很久之后才发现问题,虽然问题解决了, 但更深层次的原因还不清楚,欢迎大牛们指导。

1.问题现象

  • 客户端问题
            通过IE9下的开发人员工具F12发现,浏览器的确是发送了post请求,但是该请求“结果”栏显示的是“已终止”,“发起程序”值 是“已挂起”。请求头、请求体、响应头、响应体都是空的。也就说浏览器发送了1个异常的请求。
  • 服务端问题
          Struts2的action能够接受到post的请求,但是获取不到请求参数的值。

2.相关JS代码

function sendMessage()   
{  
  $.post("indvAction!sendShortMsg.action", {  
     "configType" : "1"  
  });  
}  
   
//弹出确认对话框  
Nf.promptConfirm({  
                  message :”operation success”,
				  width : 300,
				  height : 150, 
				  handler : function(btn)
							{
								if (btn == "ok") 
								{  
									//向服务器发送ajax请求  
									sendMessage()
									//关闭当前页面  
									NfLayout.closeTab();  
								}  
							
							}

                  });

3.定位过程

    刚开始使用F12没有得到与定位问题有关的信息。后面使用httpWatch或burp suite进行http抓包,查看原始的http请求和响应报文。结果发现了问题。

1、浏览器发出的请求报文中,的确没有传递configType字段的值。请求报文如下:         
POST /mobile/jsp/indvconfig/indvAction!sendShortMsg.action HTTP/1.1
x-requested-with: XMLHttpRequest
Accept-Language: zh-CN,en;q=0.5
Referer: https://*.*.*.*:17243/mobile/jsp/indvconfig/indv_config.jsp
Accept: */*
Content-Type: application/x-www-form-urlencoded
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)
Host: 11.12.213.87:17243
Content-Length: 0
Connection: Keep-Alive
Cache-Control: no-cache
Cookie: JSESSIONID=62C9FF9CBC97731B120ABAC297C4E4C5

 2、浏览器的确收到了服务器的响应报文。
HTTP/1.1 200 OK
Server: Apache-Coyote/1.1
Content-Type: text/plain;charset=UTF-8
Vary: Accept-Encoding
Date: Fri, 22 Nov 2013 01:34:31 GMT
Content-Length: 6

this is my response!

其实一切都很正常了,浏览器确实发送了HTTP请求,只不过是没有携带请求参数值,只不过是被IE9的展示方式欺骗了,所以刚开始定位很久都没有头绪。现在产生了如下问题:为什么浏览器发送了ajax请求,但是没有携带请求参数?为什么IE9显示请求是“已挂起”、“已终止”

4.问题解决

    去掉NfLayout.closeTab();这行代码就可以解决问题了。这是因为jquery的POST请求是异步的,当post请求还没有准备好数据的时候,这个时候执行了NfLayout.closeTab();当前页面关闭,导致了浏览器终止了http请求。这样的话就,相当于是请求被异常终止,于是IE9显示请求“已挂起”、“已终止”。具体深层次的原因不清楚,下面是个人一些猜想和解释:

1、 JS代码只有加载才会被执行,而触发js加载的正是html/jsp页面的显示。所以,我觉得Html/jsp就是js的执行环境。如果js还没有执行完,页面关闭的话,后续js代不会再执行。测试代码如下:

<head>
 <script type='text/javascript'>
 function test()
 {
  alert(1111);
  window.opener = "";
  window.open("","_self");
  window.close();
  alert("我不会在执行了,因为页面已经关闭。");
  //setTimeout('callBack( )', 3000)
 }
 </script>
</head>
<body>
 <input id="button_-12你" type="button" value="testRight" onclick="test();">
</body>

个人感觉,可能是jquery拼post的请求体,会相对比较耗时,还没有执行完毕。此时页面关闭,JS终止了执行,浏览器发送了1个不完全的HTTP请求(没有附上请求体)。  这是个人的猜测,大家有自己见解的,欢迎指教。基于这个结论,我们将POST请求,改成Get请求,虽然IE9显示的还是请求终止,但是服务端能够收到请求的参数值了。

nodejs安装我现在就负责把管理员模块前端完善好,你告诉我我怎么做,以下是我现有的管理员模块代码addminadd.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> 管理员管理 </title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="format-detection" content="telephone=no"> <script type="text/javascript" src="lib/loading/okLoading.js"></script> <link rel="stylesheet" href="css/main.css" media="all"> </head> <style> .imgs{display: none;} .picture{display: none;} </style> <body> <div class="x-body"> <form class="layui-form" id="adminadd"> <input type="hidden" name="id" value=""> <div class="layui-form-item"> <label for="username" class="layui-form-label"> <span class="x-red">*</span>登录名 </label> <div class="layui-input-inline"> <input type="text" id="name" name="name" required="" lay-verify="required" autocomplete="off" class="layui-input" value=""> </div> <div class="layui-form-mid layui-word-aux"> <span class="x-red">*</span>将会成为您唯一的登入名 </div> </div> <div class="layui-form-item"> <label for="phone" class="layui-form-label"> <span class="x-red">*</span>手机 </label> <div class="layui-input-inline"> <input type="text" id="phone" name="phone" required="" lay-verify="phone" autocomplete="off" class="layui-input" value=""> </div> <div class="layui-form-mid layui-word-aux"> <span class="x-red">*</span>将会成为您唯一的登入名 </div> </div> <div class="layui-form-item"> <label for="role" class="layui-form-label"> <span class="x-red">*</span>用户组 </label> <div class="layui-input-inline"> <select name="group_id"> <option value="">请选择角色</option> <option value="1" >超级管理员</option> </select> </div> </div> <div class="layui-form-item"> <label for="link" class="layui-form-label"> <span class="x-red">*</span>缩略图 </label> <div class="layui-input-inline"> <div class="site-demo-upbar"> <div class=" layui-upload-button" style="border:#FFFFFF ;"> <button type="button" class="layui-btn" id="test1"> <i class="layui-icon"></i>上传图片 </button> <input class="layui-upload" type="file" accept="undefined" id="previewImg" name="img" onchange="upload(this,)"> </div> </div> </div> <a href="javascript:;" style="" class="layui-btn " id="cancel"><i class="layui-icon">ဂ</i>撤销上传</a> </div> <div class="layui-form-item imgs" id="imgshow"> <label class="layui-form-label">缩略图展示 </label> <img src="" id="pimages" name="pimages" style="width: 400px;height: 200px;"/> <input id="avatar" name="image" required="" type="hidden" value=""> </div> <div class="layui-form-item"> <label for="L_pass" class="layui-form-label"> <span class="x-red">*</span>密码 </label> <div class="layui-input-inline"> <input type="password" id="L_pass" name="password" required="" lay-verify="pass" autocomplete="off" class="layui-input" value=""> </div> <div class="layui-form-mid layui-word-aux"> 6到16个字符 </div> </div> <div class="layui-form-item"> <label for="L_repass" class="layui-form-label"> <span class="x-red">*</span>确认密码 </label> <div class="layui-input-inline"> <input type="password" id="L_repass" name="repass" required="" lay-verify="repass" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">状态</label> <div class="layui-input-block"> <input type="radio" name="status" value="1" title="启用" checked="checked"> <div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon layui-anim-scaleSpring"></i> <div>启用</div> </div> <input type="radio" name="status" value="0" title="禁用" checked="checked"> <div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i> <div>禁用</div> </div> </div> </div> <div class="layui-form-item"> <label for="L_repass" class="layui-form-label"> </label> <button class="layui-btn" lay-filter="add" lay-submit=""> 增加 </button> </div> </form> </div> <script src="lib/layui/layui.js" charset="utf-8"> </script> <script src="js/x-layui.js" charset="utf-8"> </script> <script> layui.use([&#39;form&#39;,&#39;layer&#39;], function(){ $ = layui.jquery; var form = layui.form() ,layer = layui.layer; okLoading.close($); //自定义验证规则 /*form.verify({ nikename: function(value){ if(value.length < 5){ return &#39;昵称至少得5个字符啊&#39;; } } ,pass: [/(.+){6,12}$/, &#39;密码必须6到12位&#39;] ,repass: function(value){ if($(&#39;#L_pass&#39;).val()!=$(&#39;#L_repass&#39;).val()){ return &#39;两次密码不一致&#39;; } } });*/ //监听提交 form.on(&#39;submit(add)&#39;, function(data){ var admindate=$("#adminadd").serialize(); //var data = data.field; $.ajax({ type:&#39;post&#39;, url:"xxx", data:admindate, datatype:"json", success:function (data) { if(data.status==1){ layer.msg(data.info,{icon:1,time:1000}); setTimeout(function(){ window.parent.location.reload(); var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index); },1000); return false; }else{ layer.msg(data.info,{icon:5,time:2000});return false; } } }) return false; }); }); </script> <script> //轮播图上传 function upload(obj,id) { var formData = new FormData(); formData.append(&#39;img&#39;, $(&#39;#previewImg&#39;)[0].files[0]); formData.append(&#39;id&#39;, id);//将id追加再id中 layer.msg(&#39;图片上传中&#39;, {icon: 16}); $.ajax({ type:"post", processData: false, contentType: false, url:"xxx", data:formData, success:function(data){ if(data.status == 1){ //console.log(data.image_name); layer.closeAll(&#39;loading&#39;); //layer.msg(data.info,{icon:1,time:1000}); $("#pimages").attr(&#39;src&#39;,data.image_name); $("#avatar").val(data.image_name); $(".imgs").show(); return false; }else{ layer.msg(data.info,{icon:2,time:1000}); } } }); } </script> </body> </html> adminlist.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> 管理员列表 </title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="format-detection" content="telephone=no"> <script type="text/javascript" src="lib/loading/okLoading.js"></script> <link rel="stylesheet" href="css/main.css" media="all"> <link rel="stylesheet" href="css/bootstrap.css"> </head> <body> <div class="x-nav"> <span class="layui-breadcrumb"> <a><cite>首</cite></a> <a><cite>管理员管理</cite></a> <a><cite>管理员列表</cite></a> </span> <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新"><i class="layui-icon" style="line-height:30px">ဂ</i></a> </div> <div class="x-body"> <form class="layui-form x-center" action="" style="width:80%"> <div class="layui-form-pane" style="margin-top: 15px;"> <div class="layui-form-item"> <label class="layui-form-label">日期范围</label> <div class="layui-input-inline"> <input class="layui-input" placeholder="开始日" id="LAY_demorange_s"> </div> <div class="layui-input-inline"> <input class="layui-input" placeholder="截止日" id="LAY_demorange_e"> </div> <div class="layui-input-inline"> <input type="text" name="username" placeholder="请输入登录名" autocomplete="off" class="layui-input"> </div> <div class="layui-input-inline" style="width:80px"> <button class="layui-btn" lay-submit="" lay-filter="sreach"><i class="layui-icon"></i></button> </div> </div> </div> </form> <xblock> <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button> <button class="layui-btn" onclick="admin_add(&#39;添加用户&#39;,&#39;adminadd.html&#39;,&#39;600&#39;,&#39;500&#39;)"><i class="layui-icon"></i>添加</button> <span class="x-right" style="line-height:40px">共有数据:88 条</span> </xblock> <table class="layui-table"> <thead> <tr> <th> <input type="checkbox" name="" value=""> </th> <th> ID </th> <th> 登录名 </th> <th> 手机 </th> <th> 邮箱 </th> <th> 角色 </th> <th> 加入时间 </th> <th> 状态 </th> <th> 操作 </th> </tr> </thead> <tbody> <tr> <td> <input type="checkbox" value="1" name=""> </td> <td> 1 </td> <td> admin </td> <td > 1111111111 </td> <td > 1111111@qq.com </td> <td > </td> <td> 1970-01-01 08:00:00 </td> <td class="td-status"> <span class="layui-btn layui-btn-normal " onclick="admin_stop(this,&#39;1&#39;,0)"> 启用 </span> </td> <td class="td-manage"> <!--<a style="text-decoration:none" onclick="admin_stop(this,&#39;1&#39;)" href="javascript:;" title="停用"> <i class="layui-icon"></i> </a>--> <a title="编辑" href="javascript:;" onclick="admin_edit(&#39;编辑&#39;,&#39;adminadd.html&#39;,&#39;1&#39;,&#39;&#39;,&#39;510&#39;)" class="ml-5" style="text-decoration:none"> <i class="layui-icon"></i> </a> <a title="删除" href="javascript:;" onclick="admin_del(this,&#39;1&#39;)" style="text-decoration:none"> <i class="layui-icon"></i> </a> </td> </tr> <tr> <td> <input type="checkbox" value="1" name=""> </td> <td> 2 </td> <td> admin1 </td> <td > 1111111111 </td> <td > 111111111@qq.com </td> <td > 超级管理员 </td> <td> 1970-01-01 08:00:00 </td> <td class="td-status"> <span class="layui-btn layui-btn-normal " onclick="admin_stop(this,&#39;2&#39;,0)"> 启用 </span> </td> <td class="td-manage"> <!--<a style="text-decoration:none" onclick="admin_stop(this,&#39;2&#39;)" href="javascript:;" title="停用"> <i class="layui-icon"></i> </a>--> <a title="编辑" href="javascript:;" onclick="admin_edit(&#39;编辑&#39;,&#39;adminadd.html&#39;,&#39;2&#39;,&#39;&#39;,&#39;510&#39;)" class="ml-5" style="text-decoration:none"> <i class="layui-icon"></i> </a> <a title="删除" href="javascript:;" onclick="admin_del(this,&#39;1&#39;)" style="text-decoration:none"> <i class="layui-icon"></i> </a> </td> </tr> <tr> <td> <input type="checkbox" value="1" name=""> </td> <td> 3 </td> <td> admin2 </td> <td > 11111111 </td> <td > 11111111@qq.com </td> <td > 超级管理员 </td> <td> 1970-01-01 08:00:00 </td> <td class="td-status"> <span class="layui-btn layui-btn-normal " onclick="admin_stop(this,&#39;3&#39;,0)"> 启用 </span> </td> <td class="td-manage"> <!--<a style="text-decoration:none" onclick="admin_stop(this,&#39;3&#39;)" href="javascript:;" title="停用"> <i class="layui-icon"></i> </a>--> <a title="编辑" href="javascript:;" onclick="admin_edit(&#39;编辑&#39;,&#39;adminadd.html&#39;,&#39;3&#39;,&#39;&#39;,&#39;510&#39;)" class="ml-5" style="text-decoration:none"> <i class="layui-icon"></i> </a> <a title="删除" href="javascript:;" onclick="admin_del(this,&#39;1&#39;)" style="text-decoration:none"> <i class="layui-icon"></i> </a> </td> </tr> <tr> <td> <input type="checkbox" value="1" name=""> </td> <td> 4 </td> <td> admin </td> <td > 1111111111 </td> <td > 111111111@qq.com </td> <td > </td> <td> 2019-07-20 17:03:28 </td> <td class="td-status"> <span class="layui-btn layui-btn-normal " onclick="admin_stop(this,&#39;4&#39;,0)"> 启用 </span> </td> <td class="td-manage"> <!--<a style="text-decoration:none" onclick="admin_stop(this,&#39;4&#39;)" href="javascript:;" title="停用"> <i class="layui-icon"></i> </a>--> <a title="编辑" href="javascript:;" onclick="admin_edit(&#39;编辑&#39;,&#39;adminadd.html&#39;,&#39;4&#39;,&#39;&#39;,&#39;510&#39;)" class="ml-5" style="text-decoration:none"> <i class="layui-icon"></i> </a> <a title="删除" href="javascript:;" onclick="admin_del(this,&#39;1&#39;)" style="text-decoration:none"> <i class="layui-icon"></i> </a> </td> </tr> <tr> <td> <input type="checkbox" value="1" name=""> </td> <td> 5 </td> <td> admin </td> <td > 11111111 </td> <td > 111111111@qq.com </td> <td > </td> <td> 2019-07-20 17:03:41 </td> <td class="td-status"> <span class="layui-btn layui-btn-normal " onclick="admin_stop(this,&#39;5&#39;,0)"> 启用 </span> </td> <td class="td-manage"> <!--<a style="text-decoration:none" onclick="admin_stop(this,&#39;5&#39;)" href="javascript:;" title="停用"> <i class="layui-icon"></i> </a>--> <a title="编辑" href="javascript:;" onclick="admin_edit(&#39;编辑&#39;,&#39;adminadd.html&#39;,&#39;5&#39;,&#39;&#39;,&#39;510&#39;)" class="ml-5" style="text-decoration:none"> <i class="layui-icon"></i> </a> <a title="删除" href="javascript:;" onclick="admin_del(this,&#39;1&#39;)" style="text-decoration:none"> <i class="layui-icon"></i> </a> </td> </tr> </tbody> </table> <div id="page"></div> </div> <script src="lib/layui/layui.js" charset="utf-8"></script> <script src="js/x-layui.js" charset="utf-8"></script> <script> layui.use([&#39;laydate&#39;,&#39;element&#39;,&#39;laypage&#39;,&#39;layer&#39;], function(){ $ = layui.jquery;//jquery laydate = layui.laydate;//日期插件 lement = layui.element();//面包导航 laypage = layui.laypage;//分 layer = layui.layer;//弹出层 okLoading.close($); //以上模块根据需要引入 /*laypage({ cont: &#39;page&#39; ,pages: 100 ,first: 1 ,last: 100 ,prev: &#39;<&#39; ,next: &#39;>&#39; }); */ var start = { min: laydate.now() ,max: &#39;2099-06-16 23:59:59&#39; ,istoday: false ,choose: function(datas){ end.min = datas; //开始日选好后,重置结束日的最小日期 end.start = datas //将结束日的初始值设定为开始日 } }; var end = { min: laydate.now() ,max: &#39;2099-06-16 23:59:59&#39; ,istoday: false ,choose: function(datas){ start.max = datas; //结束日选好后,重置开始日的最大日期 } }; document.getElementById(&#39;LAY_demorange_s&#39;).onclick = function(){ start.elem = this; laydate(start); } document.getElementById(&#39;LAY_demorange_e&#39;).onclick = function(){ end.elem = this laydate(end); } }); //批量删除提交 function delAll () { layer.confirm(&#39;确认要删除吗?&#39;,function(index){ //捉到所有被选中的,发异步进行删除 layer.msg(&#39;删除成功&#39;, {icon: 1}); }); } /*添加*/ function admin_add(title,url,w,h){ x_admin_show(title,url,w,h); } /*停用*/ function admin_stop(obj,id,e){ layer.confirm(e==1?&#39;你确定要启用吗?&#39;:&#39;你确定要禁用吗?&#39;,{icon: 3, title:&#39;提示&#39;},function(index){ $.ajax({ type:"post", url:"xxx", data:{id:id,status:e}, dataType:"json", success:function(data) { if(data.status==1){ //发异步把用户状态进行更改 $(obj).attr("class","layui-btn layui-btn-danger "); $(obj).text("隐藏"); $(obj).remove(); layer.msg(data.info,{icon: 6,time:1000}); setTimeout(function(){ window.location.reload(); },1000);return false; }else{ //发异步把用户状态进行更改 $(obj).attr("class","layui-btn layui-btn-normal "); $(obj).text("显示"); $(obj).remove(); layer.msg(data.info,{icon: 5,time:1000});return false; } } }); }); } /*启用*/ function admin_start(obj,id){ layer.confirm(&#39;确认要启用吗?&#39;,function(index){ //发异步把用户状态进行更改 $(obj).parents("tr").find(".td-manage").prepend(&#39;<a style="text-decoration:none" onClick="admin_stop(this,id)" href="javascript:;" title="停用"><i class="layui-icon"></i></a>&#39;); $(obj).parents("tr").find(".td-status").html(&#39;<span class="layui-btn layui-btn-normal layui-btn-mini">已启用</span>&#39;); $(obj).remove(); layer.msg(&#39;已启用!&#39;,{icon: 6,time:1000}); }); } //编辑 function admin_edit (title,url,id,w,h) { url = url+"?id="+id; x_admin_show(title,url,w,h); } /*删除*/ function admin_del(obj,id){ layer.confirm(&#39;确认要删除吗?&#39;,function(index){ //发异步删除数据 $(obj).parents("tr").remove(); layer.msg(&#39;已删除!&#39;,{icon:1,time:1000}); }); } </script> </body> </html>,这是我的admin.js:// js/admin.js const AdminManager = { // 获取所有管理员 getAll: function() { return JSON.parse(localStorage.getItem(&#39;admins&#39;)) || []; }, // 保存所有管理员 saveAll: function(admins) { localStorage.setItem(&#39;admins&#39;, JSON.stringify(admins)); }, // 获取单个管理员 getById: function(id) { return this.getAll().find(item => item.id == id); }, // 添加或更新管理员 save: function(admin) { let admins = this.getAll(); if (admin.id) { // 更新 const index = admins.findIndex(a => a.id == admin.id); if (index !== -1) { admins[index] = admin; } } else { // 新增 admin.id = this.generateId(); admin.create_time = new Date().toLocaleString(); admins.push(admin); } this.saveAll(admins); return admin; }, // 删除管理员 delete: function(id) { let admins = this.getAll().filter(a => a.id != id); this.saveAll(admins); }, // 生成ID generateId: function() { const admins = this.getAll(); return admins.length > 0 ? Math.max(...admins.map(a => a.id)) + 1 : 1; } }为什么运行出来添加删除键点了没反应,能帮帮我吗
最新发布
07-04
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值