前端代碼
<div class="layui-form-item">
<label class="layadmin-user-login-icon layui-icon layui-icon-cellphone" for="phone"></label>
<input type="text" name="phone" id="phone" lay-verify="phone" placeholder="手機" class="layui-input">
</div>
<div class="layui-form-item">
<div class="layui-row">
<div class="layui-col-xs7">
<label class="layadmin-user-login-icon layui-icon layui-icon-vercode" for="code"></label>
<input type="text" name="code" id="code" lay-verify="required" placeholder="驗證碼"
class="layui-input">
</div>
<div class="layui-col-xs5">
<div style="margin-left: 10px;">
<button name="btn" type="button" class="layui-btn layui-btn-primary layui-btn-fluid"
id="btn" onclick="time(this)">獲取驗證碼
</button>
</div>
</div>
</div>
</div>
ajax請求，這里用的是layui框架
<script src="https://bbs.csdn.net/topics/resource/layuiadmin/layui/layui.js"></script>
<script>
layui.config({
base: 'resource/layuiadmin/' //靜態資源所在路徑
}).extend({
index: 'lib/index' //主入口模塊
}).use(['index', 'user'], function () {
var $ = layui.$
, setter = layui.setter
, admin = layui.admin
, form = layui.form
, router = layui.router()
, search = router.search;
form.render();
//$("body").on("click","#get-vercode",function(){
//alert(1);
//});
$("#get-vercode").click(function () {
this.src = "system/admin/validateCode?t=" + (new Date).getTime();
});
//提交
form.on('submit(user-login-submit)', function (data) {
doLogin(data.field);
});
/**
* 存字符形式
* @returns
*/
function doLogin(params) {
var index = layer.load(1, {shade: 0.7});
$.ajax({
type: 'post',
url: 'system/admin/dologin',
dataType: "json",
traditional: true,
//設定contentType型別為json
//contentType : 'application/json;charset=utf-8',
//json資料
data: params,
//請求成功后的回呼函式
success: function (data) {
layer.close(index);
if (data.success) {
layer.msg(data.msg, {
offset: 'auto'
, icon: 1
, shade: 0.3
, shadeClose: true
, anim: 1
, time: 2000
},
function () {
location.href = '/system/admin/index';
});
//后臺主頁
} else {
layer.msg(data.msg, {
offset: 'auto'
, icon: 2
, shade: 0.3
, shadeClose: true
, anim: 1
});
}
},
error: function () {
layer.close(index);
layer.msg("網路請求失敗！", {
offset: 'auto'
, icon: 2
, shade: 0.3
, shadeClose: true
, anim: 1
});
}
});
}
/**
* 短信驗證碼
* @type {string}
*/
var sms = "";
$("#btn").click(function () {
var phone = $("#phone").val();
if (phone != "") {
$.ajax({
type: "POST",
URL: "/smscode/sendsms/logged", //發送請求 admin\core\arm\controller\SmsCodeController system/core/arm/controller/sendSms
data: {
smsType: "1004",
phone: phone
},
success: function (res) {
sms = res;
}
});
} else {
alert("請輸入手機號");
return false;
}
});
$("#lo").click(function () {
var code = $("#code").val();
if (code == "") {
alert("請輸入驗證碼");
} else {
if (sms == code) {
window.location.href = "success.jsp";
} else {
alert("驗證碼錯誤");
};
};
});
});
</script>
controller
package com.zwh.admin.core.arm.controller.index;
import com.yhzq.base.ccl.datastructure.Dto;
import com.yhzq.base.ccl.datastructure.impl.ResponseDto;
import com.yhzq.base.mvc.BaseController;
import com.yhzq.common.service.core.SmsCodeService;
import org.springframework.http.MediaType;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import javax.annotation.Resource;
/**
*
* 功能描述 短信controller
*
* @author chenshuai QQ:394785275
* @date 2019/1/2 21:45
*/
@Controller
@RequestMapping("/smscode")
public class SmsCodeController extends BaseController {
@Resource(name = "smsCodeService")
private SmsCodeService smsCodeService;
@RequestMapping(value = "/sendsms/logged", produces = MediaType.APPLICATION_JSON_UTF8_VALUE)
@ResponseBody
public Object sendSms() throws Exception {
Dto<String, Object> pDto = super.getParamAsDto();
ResponseDto<String, Object> responseDto = super.newResponseDto();
smsCodeService.sendMsg(responseDto, pDto.getAsInteger("smsType"), pDto.getAsString("receiver"), pDto);
return super.write(responseDto, null);
}
}
沒有報錯 但是回傳登錄頁面 不知道為什么 難搞
uj5u.com熱心網友回復：
求大神幫忙呀，挺急的啊uj5u.com熱心網友回復：
你把問題描述清楚，api圖片代碼是獲取驗證碼，web瀏覽器圖片是請求的登錄api。你是要問什么，請求驗證碼的介面沒反應？但是你是請求的登錄介面啊怎么會走驗證碼的api流程？uj5u.com熱心網友回復：
不是，我ajax寫的是請求驗證碼的，只是我按了按鈕之后，就被改了，我也不懂為什么，然后回傳的就是這樣的東西
uj5u.com熱心網友回復：
獲取驗證碼按鈕上系結了一個click執行time(this)方法，然后下面又寫了一個$('#code').click(...)，自己debugger看下代碼運行流程是什么。先注釋掉請求登錄介面的代碼看看。估計你的代碼都沒走獲取驗證碼的流程uj5u.com熱心網友回復：
是的沒有走驗證碼，所以就。。。。
uj5u.com熱心網友回復：
但是走到我的
$("#btn").click(function () {
var phone = $("#phone").val();
if (phone != "") {
$.ajax({
然后下面就沒有了
uj5u.com熱心網友回復：
把ajax的屬性寫完整和登錄ajax請求一樣uj5u.com熱心網友回復：
其實有想過，但是這玩意看不懂。。。就怕寫錯更加麻煩
uj5u.com熱心網友回復：
api寫了application/json utf-8uj5u.com熱心網友回復：
contentType : 'application/json;charset=utf-8',dataType: 'json'
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/43813.html
標籤：Ajax