<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>兑换码</title> <script src="/static/supplier/js/jquery-3.3.1.min.js"></script> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /> </head> <body> <div class="header"> <!--<div class="login_error"><span>兑换成功!</span></div>--> </div> <div id="a"> <form name="form1" id="form1" class="key_form"> <input type="text" name="cdkey" class="key" value="" placeholder="请输入兑换码" autocomplete="off"> <input type="button" id="submit" class="key_sub" value="搜索"> </form> <div id="content"> </div> </div> </body> </html> <script> // $(function () { //查询CDK兑换信息 //http://www.huafen.cn //http://'+host+'/supplier/key/product //{:url('admin/Datacollated/getDate')} //../../../../supplier/key/product // host = location.host; $('#submit').on("click",function () { $.ajax({ url:"http://www.huafen.cn/supplier/key/product", type:"post", cache:false,//上传文件不需要缓存 dataType:'json', data:$("#form1").serialize(), success:function (data) { if (data.data) { var html=''; html = html+'<div class="key_body" >\n' + ' <div class="user_info">\n' + ' <p class="title">客户信息</p>\n' + ' <div class="header">\n' + ' <div class="head_img"><img src="'+data.data.user.head_img+'" title="客户"> </div><span>'+data.data.user.nickname+'</span>\n' + ' </div>\n' + ' <p>手机号码:'+data.data.user.phone+'</p>\n' + ' <p>性别:'+data.data.user.sex+'</p>\n' + ' <p>常住地:'+data.data.user.residence+'</p>\n' + ' </div>\n' + ' <div class="product">\n' + ' <p class="title">兑换信息</p>\n' + ' <div class="cdkey">\n' + ' <div class="img">\n' + ' <img src="'+data.data.product.product_img+'">\n' + ' </div>\n' + ' <div class="p_msg">\n' + ' <div class="p_name">'+data.data.product.name+'</div>\n' + ' <div class="p_content">'+data.data.product.content+'</div>\n' + ' </div>\n' + ' </div>\n' + ' <form name="form2" id="form2">\n' + ' <input type="text" name="cdkey_id" class="cdkey_hidden" value="'+data.data.cdkey_id+'">\n' + ' </form>\n' + ' <input type="submit" class="change" value="兑换">\n' + ' </div>\n' + '</div>'; $("#content").empty(""); $("#content").html(html); } else { var kong = ''; kong+= "<div class=\"kong\">\n" + " <img src=\"/static/supplier/img/kong.png\" height=\"243\" width=\"464\"/>\n" + " </div>"; $("#content").empty(); $("#content").html(kong); $(".kong").delay(2000).fadeOut() } return false; },error:function (data) { var suc = ''; suc+= "<h3 id=\"suc_change\">请求失败!</h3>" $("#content").empty(); $("#content").html(suc); $('#suc_change').delay(2000).fadeOut(); return false; } }); return false; }); // }) $(function () { //2.用户兑换 //http://www.huafen.cn/supplier/key/changes $('#content').on("click",".change",function () { $.ajax({ url:"http://www.huafen.cn/supplier/key/changes", type:"post", cache:false,//上传文件不需要缓存 dataType:'json', data:$("#form2").serialize(), success:function (data) { // console.log(data.msg) if (data.msg == '兑换成功') { var suc = ''; suc+= "<h3 id=\"suc_change\">兑换成功!</h3>" $("#content").empty(); $("#content").html(suc); $('#suc_change').delay(2000).fadeOut(); } else { var kong = ''; kong+= "<div class=\"kong\">\n" + " <img src=\"/static/supplier/img/kong.png\" height=\"243\" width=\"464\"/>\n" + " </div>"; $("#content").empty(); $("#content").html(kong); $('.kong').delay(2000).fadeOut(); } },error:function (data) { console.log(data) var suc = ''; suc+= "<h3 id=\"suc_change\">请求失败</h3>" $("#content").empty(); $("#content").html(suc); $('#suc_change').delay(2000).fadeOut(); return false; } }); return false; }); }) </script> <style> *{ padding: 0px;margin: 0px;background: url('/static/supplier/img/BJ.png') no-repeat;font-family: MicrosoftYaHei; } #a{ width: 650px;height: 600px;background: #fcfcfc;border-radius: 10px; position:absolute;left:0;top: 0;bottom: 0;right: 0;margin: auto;text-align: center; } #content{ background:#fcfcfc;} #form2{background: #fcfcfc;} .user_info{ margin-bottom: 5px;background: #fcfcfc;height: 178px;width: 95%;padding-top: 20px;text-align: left;border-bottom: 0.6px solid rgba(200, 200, 200, 0.43); } .title{ font-size: 20px;line-height: 32px;color: #000000;text-align: left;background: #fcfcfc; } .user_info .title{ font-size: 20px;line-height: 32px;color: #000000;margin-bottom: 5px;background: #fcfcfc; } .user_info p:not(first-child){ font-size: 14px;color: #000000;height: 24px;background: #fcfcfc; } .header{ display: inline-flex;flex-direction: row;align-items:center;margin-top: 10px;background: #fcfcfc; } .header span{ font-size: 18px;background: #fcfcfc;color: #010101; } .head_img{ width: 60px;height: 60px;border-radius: 100%;margin-right: 5px; } .head_img img{ width: 100%;height: 100%;border-radius: 100%; } .key_body{ margin: 0 auto;width: 512px;text-align: center;background: #fcfcfc; display: block; } .key_form{ display: inline-flex;width: 512px; margin: 36px 0 10px 0;box-shadow: 0px 3px 7px 0px rgba(208, 208, 208, 0.55); } .key{ width: 95%;height: 48px;border-radius: 4px 0 0 4px;padding-left: 5%;outline: none;border: none;background: #ffffff; } .key_sub{ width: 72px;height: 48px;background: #1a98ff;border-radius: 0px 4px 4px 0px;outline: none;border: none;font-size: 20px;letter-spacing: 0px;color: #ffffff;cursor: pointer; } .product{ width: 100%;margin-top: 15px;background: #fcfcfc; } .change{ width: 250px;height: 60px;background: #1a98ff;border-radius: 30px;outline: none;text-align: center;border: none;font-size: 20px; line-height: 64px;color: #fcfcfc; letter-spacing: 0px;cursor: pointer; } .cdkey{ font-size: 20px;width:450px;height: 95px;;background: #ffffff;box-shadow: 0px 3px 7px 0px rgba(208, 208, 208, 0.55);border-radius: 10px; margin: 10px 0 20px 0;padding: 4%;display: flex; } .cdkey .img{ width: 132px;height: 100%; } .cdkey .img img{ width: 100%;height: 100%; } .cdkey_hidden{display: none;} .p_msg{background: white;text-align: left;height: 100%;padding-left: 10px;flex-basis: auto; width: 318px; } .p_name{font-size: 16px;color: #000000;background: white; width: 318px;} .p_content{font-size: 14px;color: #7a7979;background: white;overflow: hidden;width: 318px;height: 80px;text-overflow:ellipsis; word-wrap:break-word;} .kong{width: 100%;height: 100%;background: #fcfcfc;} .kong img{width: 50%;height:50%;margin: 15% auto;} #suc_change{margin-top: 20%;background: #fcfcfc;font-size: 44px;color: #62ffaa;} .login_error{ background: white;color: orange;border-radius: 20px;text-align: center;line-height: 53px;width: 532px;height: 53px; margin:3px auto; /*visibility: hidden;*/ visibility: visible; } .login_error span{ background: white; } .header{width: 100%;height: 53px; background: none; } </style>
解决jQuery提交优先form表单,不实现ajax事件
最新推荐文章于 2021-02-12 11:45:30 发布