jQuery Ajax 跨域前端實現登入
封裝好的請求物件
(function() {
var ajax = {
ajax_cors: function(url, data, fn, dataType, contentType) {
$.ajaxSetup({
type: 'post',
dataType: dataType == null ? 'json' : dataType,
global: true,
contentType: contentType == null ? 'application / x - www - form - urlencoded' : contentType,
success: function(xhr, status, success) {
console.log('請求成功! ' + '當前狀態 ' + status)
console.log('響應體: ' + JSON.stringify(success))
fn(xhr, status, data)
},
error: function(xhr, status, error) {
console.log('請求失敗! ' + '當前狀態 ' + status)
console.log('響應體: ' + JSON.stringify(error))
fn(xhr, status, data)
},
xhrFields: {
withCredentials: true
},
crossDomain: false,
beforeSend: function(xhr) {
console.log('正在傳送請求: url => ' + url)
console.log('傳送資料型別: ' + this.contentType)
console.log('當前傳送資料: ' + this.data)
},
complete: function(xhr, status) {
console.log('請求已經完成')
console.log('響應型別: ' + this.dataType)
},
cache: false,
timeout: 3000,
})
$.ajax({
url: url,
data: data,
})
}
}
window.$kongjs = ajax;
})()
具體程式碼,跨域通過驗證碼登入
$(function() {
var imageUrl = 'http://127.0.0.1:8080/user?method=doYanCode';
var bool = true;
if (bool) {
$('#imageCode').attr('src', imageUrl);
}
$('#imageCode').click(function() {
bool = false
$kongjs.ajax_cors("http://127.0.0.1:8080/user?method=doYanCode", {}, function(data) {
$('#imageCode').attr("src", imageUrl)
console.log(data)
}, '*')
})
$('#submit').click(function() {
var formData = $("#loginForm").serialize();
$kongjs.ajax_cors("http://127.0.0.1:8080/user?"+formData,{'Access-Control-Ajax-Headers': 'cors'}, function(data) {
console.log(data)
if (data.code == 1) {
// 調整到首頁
location.href = "/web/index.html";
} else {
console.log(data.message);
}
}, '*','json')
})
})
相關文章
- Ajax 跨域難題 - 原生 JS 和 jQuery 的實現對比跨域JSjQuery
- CORS方式實現ajax跨域 — nginx配置CORS跨域Nginx
- Ajax+SpringMVC實現跨域請求SpringMVC跨域
- jquery 之 jsonp 與 laravel 實現跨域jQueryJSONLaravel跨域
- 跨域分散式系統單點登入的實現(CAS單點登入)跨域分散式
- 跨域請求之jQuery的ajax jsonp的使用解惑跨域jQueryJSON
- AJAX 跨域問題跨域
- AJAX 跨域請求解跨域
- 解決 ajax 跨域跨域
- node+ajax+mysql實現登入註冊MySql
- KKB : Jquery實現Ajax請求jQuery
- 重學前端(8)封裝ajax,http,跨域問題前端封裝HTTP跨域
- 巧用javascript ajax,實現跨域請求外帶,增大漏洞危害JavaScript跨域
- ajax 實現微信網頁授權登入網頁
- JSP(ajax)+Servlet實現簡單的登入功能JSServlet
- Ajax 學習手記 Jquery實現jQuery
- 解決 jquery使用ajax請求發生跨域問題的辦法jQuery跨域
- layui使用html+servlet+ajax實現登入驗證UIHTMLServlet
- 實戰前端跨域問題前端跨域
- 前端跨域前端跨域
- 跨域總結(jquery,php)跨域jQueryPHP
- 理性分析 AJAX 跨域問題跨域
- ASP.NET MVC & WebApi 中實現Cors來讓Ajax可以跨域訪問ASP.NETMVCWebAPICORS跨域
- jQuery入門(五)Ajax和jsonjQueryJSON
- 讓面試中的Ajax、跨域和前端演算法見鬼去吧面試跨域前端演算法
- spring mvc解決ajax跨域問題SpringMVC跨域
- ajax跨域請求之CORS的使用跨域CORS
- 【學習筆記】-結合JQuery和Ajax實現區域性資料重新整理筆記jQuery
- 九種方式實現跨域跨域
- Nginx反向代理實現跨域Nginx跨域
- JSONP 跨域原理及實現JSON跨域
- 前端跨域方法論前端跨域
- 前端跨域詳解前端跨域
- 前端跨域問題前端跨域
- 絕對完全跨域統一單點登入登出跨域
- jQuery - AJAXjQuery
- jQuery AjaxjQuery
- Nginx解決前端跨域問題 CORS跨域配置Nginx前端跨域CORS