click事件的ajax触发不了,请求大神解答
 <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>登录</title>
<link rel="icon" href="/assets/images/favicon.ico?verson=<%=Math.random()%>>">
<link href="/assets/css/base1.css" rel="stylesheet" type="text/css" />  
<link href="/assets/css/base.css" rel="stylesheet" type="text/css" />
<link href="/assets/css/global.css" rel="stylesheet" type="text/css" />
<style type="text/css">
    .login_fs {
        position: absolute;
        right: 0;
        top: 9.5%;
        width: 52px;
        height: 52px;
        cursor: pointer;
        z-index:100
    }
    .qrcode_btn {
        background: #ffffff url(/assets/images/loginfs.png) no-repeat;
    }
    .qrcode_btn:hover {
        background: #ffffff url(/assets/images/loginfs.png) no-repeat 0px -60px;
    }
</style>
<script type="text/javascript" src="/assets/js/jquery.min.js"></script>
<script type="text/javascript" src="/assets/js/jquery-ui.min.js"></script>
<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
</head>
<body class="login_bg">
<div class="logo"><div class="fl"><img src="/assets/images/logo.png?verson=<%=Math.random()%>>"/></div><div class="fl logolm">办公系统</div></div>
<div class="login">
<div class="login_fs qrcode_btn" title="微信扫码登录" onclick="showQrcode()"></div>
<div id="login">
<form action="/login" method="post" id="myform" class="form-horizontal" >
<div class="login_tab">
<div class="lm">员工登录</div>
<div class="login_form">
<ul>
<li class="login_user"><input id="userName" name="staffVO.userName" type="text" style="width:95%" class="login_text" value="" placeholder="登录用户名" required autofocus /></li>
<li class="login_pass"><input id="password" name="staffVO.password" type="password" style="width:95%" class="login_text" placeholder="登录密码" required/><span class="error">${errorMessage }</span></li>
<li class="login_btndiv" style="margin-top: 25px"><input id="Button1"  type="submit" value="登录" class="login_btn"/></li>
</ul>
</div>
<div class="mt10"><a href="/toResetStep1" style="color:#ee5252" >忘记密码/花名</a></div>

<div class="mt10">地区:通州,南通,如东,广州,南京,佛山</div>
</div>
</form>
<div class="login_banner">创新&nbsp;&nbsp;专业&nbsp;&nbsp;合作&nbsp;&nbsp;务实</div>
</div>
</div>
<div id="loginTab" style="position:absolute;top:20%;left:38%;display:none"></div>
<script type="text/javascript">
$(function(){
     var code = '${param.code}';
     if(code){
         location.href = "/index"+location.search;
     }
});
var appID = "wx9c2800cfc46895f0";
var uri = "http://www.zhizaolian.com:9090";
var obj = new WxLogin({
  id: "loginTab",
  appid: appID,
  scope: "snsapi_login", 
  redirect_uri: encodeURI(uri),
  state: guid()
});
function showQrcode(){
    $(".login").css("opacity", "0.1");
    $(".logo").css("opacity", "0.1");
    $("#loginTab").css("display", "block");
    $("input").css("pointer-events", "none");
    $(".qrcode_btn").css("pointer-events", "none");
}
$("#login, .logo").click(function(){
    if($("#loginTab").css("display")=='block'){
        $("#loginTab").css("display", "none");
        $(".login").css("opacity", "1");
        $(".logo").css("opacity", "1");
        $("input").css("pointer-events", "");
        $(".qrcode_btn").css("pointer-events", "");
    }
});
function guid() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
        return v.toString(16);
    });
}
$("#Button1").click(function(){
    alert(1);
    var userName =$("#userName").val();
    var password =$("#password").val();
    $.ajax({
        url:'/chaxunContract',
        type:'post',
        data:{userName:userName,password:password},
        dataType:'json',
        success:function(data){
            alert(2);
            alert(data.diff);

            if(data.diff>3){
                var params = $("#myform").serialize();
                window.location.href="/login"+ decodeURICompoent(params,true);
                Load.Base.LoadingPic.FullScreenShow(null);
            }else if(data.diff<=3 && data.diff>=0){
                layer.open({
                    offset:'100px',
                    title:'提醒',
                    content:"您的劳动合同于"+data.endDate+"到期,请联系人事部门进行续签",
                    success:function(index){
                        layer.close(index);
                        var params = $("#myform").serialize();
                        window.location.href="/login"+ decodeURICompoent(params,true);
                        Load.Base.LoadingPic.FullScreenShow(null);
                    }
                })
            }else if(data.diff<0){
                layer.alert("您的劳动合同已于"+data.endDate+"到期,请联系人事部门进行续签后再登录");
            }else if(data.diff=='no'){
                layer.alert("您暂时未签署劳动合同,请联系人事部门进行签署后再登录");
            }
        }
    })
})
</script>
</body>
</html>

click事件的ajax触发不了,请求大神解答

17个回答

还有就是你这ajax里面要加入错误检查机制,如果你发送的数据格式不正确或者其它错误,服务器会返回相关的错误信息,根据错误信息找到错误原因,你这里只有success: 成功后执行代码,没有错误处理机制

wodexinhao
wodexinhao 不客气
大约 2 年之前 回复
sunjianghua1985
sunjianghua2018 辛苦了,感谢
大约 2 年之前 回复

解决方案:首先检查js代码里面有没有错误,如果确保没有任何错误,可以执行到ajax里面,但是没有执行success:后面的代码,那就在ajax里面加上错误检查机制

 error: function (xhr, textStatus) {

                layer.open({
                    type: 1,
                    content: '错误' + textStatus
                });

看看服务器返回的错误类型是什么,根据错误类型修改,有可能是json数据格式不对,或者其它原因

sunjianghua1985
sunjianghua2018 error加上去了,没用反应啊,大神救我
大约 2 年之前 回复
sunjianghua1985
sunjianghua2018 可以触发事件的alert(1),但是后面的ajax还是触发不了
大约 2 年之前 回复

Button1是submit,表单提交了当然无法触发ajax,return false阻止表单提交

 $("#Button1").click(function(){
////..............原来的代码

return false////////////////阻止表单提交
});
wodexinhao
wodexinhao 请看这句“”Button1是submit,表单提交了当然无法触发ajax“”你不是来搞笑的是什么,错了还不承认,本来还想称赞你的,死鸭子嘴硬,你这种人真是悲哀,呵呵
大约 2 年之前 回复
showbo
支付宝加好友偷能量挖,胡杨在等着我的召唤 回复wodexinhao: 你就不要再来搞笑了,你补习你的html基础先吧,submit和button什么用途,放什么地方都搞不清楚就来说教,你就不知道我说的什么。不要说什么jquery兼容性,我当然知道jquery是什么。
大约 2 年之前 回复
sunjianghua1985
sunjianghua2018 后来找到原因了,是拦截器拦截了登录前的方法
大约 2 年之前 回复
wodexinhao
wodexinhao 本来不想回复了,但是你说的没错,不要误导大家,所以还是回复一下,你错在哪里?错在对这个执行顺序的搞错了,还有就是Ajax的兼容性问题搞错了,你可能都不知道原生的Ajax的和jquery的ajax的区别,jquery的ajax是经过封装的,兼容现在大部分浏览器的,而且他这里根本没涉及到兼容性问题,人非圣贤孰能无过,知错能爱善莫大焉,任何人都会犯错,这没有什么,但是要知错能改,首先要给你点赞,看看你的头衔是问答导师和热心人,应该是帮助了不少人了,这种助人为乐的精神值得称道,但是错了就要改,为了这个问题,专门写了一个博文来说明,有疑问的朋友也可以看看https://blog.csdn.net/wodexinhao/article/details/80751245
大约 2 年之前 回复
showbo
支付宝加好友偷能量挖,胡杨在等着我的召唤 回复wodexinhao: 你先搞清楚submit是干嘛用的先吧。。不阻止表单提交不同浏览器对异步ajax支持不一样。firefox就不会执行,chrome可能会执行可能会cancel掉。不要误导人家。我的也没用错误,不该button表单肯定会提交,除非楼主其他js有家代码阻止过表单提交
大约 2 年之前 回复
wodexinhao
wodexinhao 我之前就跟你说了,你这主要是js里面的代码有错误导致的,之前缺少layer.js和data.diff这两个地方导致的
大约 2 年之前 回复
wodexinhao
wodexinhao 嗯,你之前就是没有加<script src="/assets/js/layer/layer.js"></script>,所以导致js代码里面有错误,无法正确执行,弹出undfine,就是你这data.diffz这里错了,服务器返回的数据根本没有这个字段
大约 2 年之前 回复
sunjianghua1985
sunjianghua2018 把form表单的action去掉,input的type改成了button,然而还是就弹出了1,页面加了<script src="/assets/js/layer/layer.js"></script>,可以弹出2,undefined,url里面的方法还是走不到
大约 2 年之前 回复
wodexinhao
wodexinhao 回复sunjianghua1985: 虽然你把提交按钮都放在form里面,但是你并没有用form直接提交表单的方式,你这里是button加js的方式提交,你把type="submit" 改成 type="button"试试,你这样写是会有错误的,但是也不是你没有执行ajax的原因
大约 2 年之前 回复
wodexinhao
wodexinhao 如果他在这里用了submit方式提交表单,然后js里面又重复了一次,那会造成两次提交表单,不存在说阻止了表单提交这一说,不知道你是没弄懂,还是没有实际经验,所以我说你这个是错误的答案,并没有其他意思,只是指出错误
大约 2 年之前 回复
showbo
支付宝加好友偷能量挖,胡杨在等着我的召唤 回复wodexinhao: 你认真看楼主的代码。。<input id="Button1" type="submit" value="登录" class="login_btn"/>这个你和我说是和button一样?外层套了一层form。。。没用form差不多。
大约 2 年之前 回复
wodexinhao
wodexinhao 回复showbo: 你看看他的写法,他这里并没有直接用submit提交表单,虽然他写的是type="submit",但是其实他在这里就是type="button"一样的功能,所以不存在你说的那种情况
大约 2 年之前 回复
wodexinhao
wodexinhao 回复sunjianghua1985: 我是想看你添加对了地方没有,是不是添加到ajax里面,还有你这里的话,你只是一个button的功能,并没有直接用submit提供表单,直接用submit不是这样写的,当然你这样执行是没问题,但是这个习惯不好,如果你点击登录按钮就是按钮加js的方式来实现的话,就写type="button",这样比较清晰
大约 2 年之前 回复
showbo
支付宝加好友偷能量挖,胡杨在等着我的召唤 回复wodexinhao: 而且是这种必须要得到ajax返回值的不阻止刷新页面毛意义没有。不和和我说什么button,submit,我不知道就不会直接说重点了
大约 2 年之前 回复
showbo
支付宝加好友偷能量挖,胡杨在等着我的召唤 回复wodexinhao: 你多试几个浏览器就知道了,不是每个浏览器都会执行异步ajax
大约 2 年之前 回复
wodexinhao
wodexinhao 嗯,可能语气有点不好,大家都是为了帮助人,你这个答案确实是不对的,type="submit" 一样会执行js里面的点击事件的,跟type="button"的区别是你可以再去深入了解一下,不存在说是已经提交了表单,不执行ajax的说法
大约 2 年之前 回复
sunjianghua1985
sunjianghua2018 回复wodexinhao: error:function(xhr,textStatus){ layer.open({ type:1, content:'错误'+textStatus }) }
大约 2 年之前 回复
showbo
支付宝加好友偷能量挖,胡杨在等着我的召唤 回复sunjianghua1985: 自己F12打开浏览器开发工具看控制台报什么错误,网络选项卡看ajax请求发送出去了没有,返回了什么。你制定了dataType为json,一定要返回标准json字符串才会执行success会带哦
大约 2 年之前 回复
wodexinhao
wodexinhao 你把加了error错误处理后的代码贴出来看看,如果不行只能远程帮你解决
大约 2 年之前 回复
showbo
支付宝加好友偷能量挖,胡杨在等着我的召唤 回复wodexinhao: 你确认你看懂了
大约 2 年之前 回复
sunjianghua1985
sunjianghua2018 没有,URL里面的action也走不进去
大约 2 年之前 回复
wodexinhao
wodexinhao 你弹出alert(2)了吗?
大约 2 年之前 回复
wodexinhao
wodexinhao 你看看具体可以执行到哪一步,首先确保是可以执行到ajax里面,还是不能执行到里面,那么检查ajax外面的代码是否有错误,如果能执行到里面,但是不返回数据,或者返回错误信息
大约 2 年之前 回复
sunjianghua1985
sunjianghua2018 我按照你写的error:function,但是没有走不到那
大约 2 年之前 回复
wodexinhao
wodexinhao wodexinhao 2018.06.20 13:57 你先看看这个,加上去看看返回什么错误
大约 2 年之前 回复
wodexinhao
wodexinhao 你没看我的回答吗?你确保可以执行到ajax里面,那么加上错误处理机制,error:看看服务器返回什么错误提示
大约 2 年之前 回复
sunjianghua1985
sunjianghua2018 回复wodexinhao: 弹出了这个提示框
大约 2 年之前 回复
wodexinhao
wodexinhao 我看你加了alert(1),弹出这个提示框了吗?
大约 2 年之前 回复
sunjianghua1985
sunjianghua2018 回复wodexinhao: 大神帮帮忙阿
大约 2 年之前 回复
wodexinhao
wodexinhao 你确定你不是来搞笑的吗?居然还有人点赞
大约 2 年之前 回复
sunjianghua1985
sunjianghua2018 加了return false,阻止了表单提交,可以弹出1,但是ajax还是触发不了
大约 2 年之前 回复

出现这种情况的原因有很多种,比如说你js代码里面有错误,js代码自然不会执行,自然也就无法触发click事件, 你这发的乱七八糟,看不清楚,重新发

sunjianghua1985
sunjianghua2018 可以看清楚了
大约 2 年之前 回复

这应该是js里面的代码出错的原因

你这个错误显示也描述不清楚,先把问题整理好再问吧

ajax请求成功之前dom元素还未被绑定click事件,所以你不能去触发click事件,你这样写试试看$.ajax({ type: "POST", url: "purchase.php", data: { product_sn: product_sn, act: 'getProductInfo' }, dataType: "text", success: function(msg) { $("#add_one").bind('click', function() { alert(1); }); $("#add_one").trigger('click'); }})

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>




登录



.login_fs { position: absolute; right: 0; top: 9.5%; width: 52px; height: 52px; cursor: pointer; z-index:100 } .qrcode_btn { background: #ffffff url(/assets/images/loginfs.png) no-repeat; } .qrcode_btn:hover { background: #ffffff url(/assets/images/loginfs.png) no-repeat 0px -60px; }


办公系统
员工登录
  • ${errorMessage }
地区:通州,南通,如东,广州,南京,佛山


创新  专业  合作  务实


$(function(){ var code = '${param.code}'; if(code){ location.href = "/index"+location.search; } }); var appID = "wx9c2800cfc46895f0"; var uri = "http://www.zhizaolian.com:9090"; var obj = new WxLogin({ id: "loginTab", appid: appID, scope: "snsapi_login", redirect_uri: encodeURI(uri), state: guid() }); function showQrcode(){ $(".login").css("opacity", "0.1"); $(".logo").css("opacity", "0.1"); $("#loginTab").css("display", "block"); $("input").css("pointer-events", "none"); $(".qrcode_btn").css("pointer-events", "none"); } $("#login, .logo").click(function(){ if($("#loginTab").css("display")=='block'){ $("#loginTab").css("display", "none"); $(".login").css("opacity", "1"); $(".logo").css("opacity", "1"); $("input").css("pointer-events", ""); $(".qrcode_btn").css("pointer-events", ""); } }); function guid() { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8); return v.toString(16); }); } $("#Button1").click(function(){ alert(1); var userName =$("#userName").val(); var password =$("#password").val(); $.ajax({ url:'/chaxunContract', type:'post', data:{userName:userName,password:password}, dataType:'json', success:function(data){ alert(2); alert(data.diff); if(data.diff>3){ var params = $("#myform").serialize(); window.location.href="/login"+ decodeURICompoent(params,true); Load.Base.LoadingPic.FullScreenShow(null); }else if(data.diff<=3 && data.diff>=0){ layer.open({ offset:'100px', title:'提醒', content:"您的劳动合同于"+data.endDate+"到期,请联系人事部门进行续签", success:function(index){ layer.close(index); var params = $("#myform").serialize(); window.location.href="/login"+ decodeURICompoent(params,true); Load.Base.LoadingPic.FullScreenShow(null); } }) }else if(data.diff<0){ layer.alert("您的劳动合同已于"+data.endDate+"到期,请联系人事部门进行续签后再登录"); }else if(data.diff=='no'){ layer.alert("您暂时未签署劳动合同,请联系人事部门进行签署后再登录"); } } }) })


图片说明

图片说明

共17条数据 1 尾页
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐