20200411 query AJAX post提交json示例和 ajax请求导致status为canceled

最新推荐文章于 2022-10-13 23:19:32 发布

hhcccchh

最新推荐文章于 2022-10-13 23:19:32 发布

阅读量247

点赞数

分类专栏：系统问题文章标签： javascript html jquery

原文链接：https://blog.csdn.net/u010855333/article/details/60766096

版权

系统问题专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Blockchain Platform</title>
</head>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
	
	function funcAAA(){
		//alert("hellos");
		// window.open("./demo.html","_parent");
		
		console.log("request...");
		$.ajax({
			url:"/api/xxx/ccc",
			type:"POST",
			dataType:"json",
			async:false,
			data:{
			},
			success:function(data){
				alert(data.code);
				alert("hello");
			},
		});
	}
	
	
    function funcBBB(){
        console.log("request...");
        $.ajax({
            url:"/api/xxx/bbb",
            type:"POST",
            dataType:"json",
            async:false,
            data:{
                "id":"id001",
		"name":"name001"
            },
            success:function(data){
                if("200"==data.code)
				{
				    alert(data.data);
				}else{
                    alert(data.code);
				}
            },
        });
    }
 
    function funcCCC(){
        console.log("request...");
        $.ajax({
            url:"/api/xxx/aaa",
            type:"POST",
            dataType:"json",
            async:false,
			contentType:"application/json;charset=utf-8",
            data: JSON.stringify({"id":"id0003","name":"name0003"}),
            success:function(message){
                if("200"==message.code)
                {
                    alert(message.data);
                }else{
                    alert(message.code);
                }
            },
			error:function(message){
                $("request-process-patent").html("fail to post");
			}
        });
    }
</script>
<body >
	<div style="text-align: center;">
		<table >
			<tr>
				<th>uu</th>
				<th><button οnclick="funcAAA()">click</button></th>
			</tr>
			<tr>
				<th>uu</th>
				<th><button οnclick="funcBBB()">issue</button></th>
			</tr>
			<tr>
				<th>uu</th>
				<th><button οnclick="funcCCC()">issueShow</button></th>
			</tr>
		</table>
	</div>
</body>
</html>

@RequestMapping(value="/aaa",method= RequestMethod.POST)
 
    public JsonResult userMgr(@RequestBody Map<String,String> map){
        String id=map.get("id");
        String name=map.get("name");
}


@RequestMapping(value="/bbb",method= RequestMethod.POST)
    public JsonResult usrAdmin(@RequestParam String id, @RequestParam String name){
        logger.info("assetIssue parameters:"+ id+":"+name);
}

刚看到这个请求返回状态时，也是觉着很诧异。经过确认参数等情况，发现并没有什么异常，且进行第二次登录操作时会返回正常。

排查思路:

发现url在第一次登录操作后由原来的 [*/login.html]更改为[*/login.html?email=123%40qq.com&password=123123]。

这是一个很明显的get请求方式，而login操作请求是由DOM节点$(‘#login-action’)通过post方式实现的。

可以肯定的是，有个操作将post请求干扰了。分析排查后发现是由于form标签导致的。

场景再现：

<form class="login-area well">  
    <header class="login-title">loveJavascript</header>
    <div class="form-group col-sm-12">
        <label class="control-label col-sm-2">email:</label>
        <input type="text" class="form-control col-sm-8" name="email"/>
    </div>
    <div class="form-group col-sm-12">
        <label class="control-label col-sm-2">password:</label>
        <input type="password" class="form-control col-sm-8" name="password"/>
    </div>
    <div class="form-group text-center">
        <button class="btn btn-primary" id="login-action">login</button>
    </div>
</form>

$('#login-action').bind('click', function(){
    $.post('/login/loguser', function(){
        //具体的执行....
    });
});

由于之前为了在输入账号时让浏览器进行自动补全，而将原先的div更换为了form,而不巧的是之前的登录事件源使用的是button。

而至于为什么status = canceled,是由于在提交时，form action与绑定于button上的click事件会同时触发。form action将表单内容以serach的形式追加至当前url上，url变更后会导致页面重新加载，而这正是导致post请求在执行后就被终止的原因。

总结：

1.在URL变更后，会对当前正在执行的ajax进求进行中止操作。中止后该请求的状态码将为canceled
2.在使用到ajax的时候，尽量不要在form内使用button进行提交，这些特殊的标签在特定的情况下往往会有让你迷茫的时候。

hhcccchh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
20200411 query AJAX post提交json示例和 ajax请求导致status为canceled

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Blockchain Platform</title></head><script type="text/javascript" src="js/j...
复制链接

扫一扫