整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
陸窗體的HTML就不復(fù)述了，就是用的AdminLTE的HTML, 主要是簡(jiǎn)單的AJAX請(qǐng)求，Session和PHP后端返回，公司的接口有倆。一個(gè)是LDAP驗(yàn)證用戶和密碼是否正確，還有一個(gè)接口是通過用戶名返回用戶的詳細(xì)信息，因?yàn)橹皇莾?nèi)部使用，很簡(jiǎn)單的驗(yàn)證，沒有設(shè)計(jì)token之類的，但是設(shè)計(jì)到同一html兩次AJAX請(qǐng)求，大概的流程是：
登陸頁(yè)面login.html->發(fā)送請(qǐng)求給check_user.php，返回flag和存儲(chǔ)session -> login.html ajax請(qǐng)求得到用戶詳細(xì)信息
login.html Jquery
//通過用戶名獲取用戶詳細(xì)信息
$.ajax({
url: 'url',
contentType: 'application/x-www-form-urlencoded', // 如果是post必須定義
async: false, //雙ajax請(qǐng)求必須設(shè)成false
type: 'post',
data: {'UserID': name},
beforeSend:function (){
Pace.restart(); //用的AdminLTE中的進(jìn)度條插件
},
dataType: 'html',
success: function (html) {
var quickExpr=/<.+?>[^<>]*?/gi;
var EEE_Name=String(html.match(/<name>(.*?)<\/name>/g)); //因?yàn)榉祷氐氖且粋€(gè)不標(biāo)準(zhǔn)xml，所以直接去抓的<name>標(biāo)簽
var EEE_Name_detail=EEE_Name.replace(quickExpr, "");
sessionStorage.usenameName=EEE_Name_detail;
}
});
//通過用戶名和密碼發(fā)送給LADP服務(wù)器驗(yàn)證
$.ajax({
url: '../json/login_adid_check.php',
contentType: "application/x-www-form-urlencoded", // 如果是post必須定義
type: 'post',
data: {'name': name, 'pwd': pwd, 'type': type, 'domin': domin},
dataType: 'json',
success: function (data) {
if (data.flag==1) {
sessionStorage.usenameID=data.usename;
location.href='../index.html';
}
},
error: function () {
modal_js.fail({ //這里用的modal.js小插件。。可以快速建立一個(gè)modal小窗口返回信息
'msg': 'Pls recheck your userName and Password"',
'icon': 2
});
}
});login_adid_check.php
<?php
header("content-type:application/json;charset=UTF-8"); //必須
$data=$_POST;
$flag=0;
if ($data['type']=='adid') {
// connect to AD server
$ldapconn=ldap_connect("LDAP服務(wù)器") or die("Could not connect to AD server."); //連接ad服務(wù)
$set=ldap_set_option($ldapconn, LDAP_OPT_PROTOCOL_VERSION, 3); //設(shè)置參數(shù)，這個(gè)目前還不了解。
$name_1=$data['domin'] . "\\" . $data["name"];
$name=$name_1 ? $name_1 : ""; //接受需要認(rèn)證的用戶名和密碼
$password=$data["pwd"] ? $data["pwd"] : "";
//驗(yàn)證用戶名和密碼。
$bd=ldap_bind($ldapconn, $name, $password);
$respose=[
'flag'=> $bd,
'usename'=> $data["name"],
];
echo json_encode($respose);
ldap_close($ldapconn);
};
?>附帶一個(gè)index.html上的按鈕可以識(shí)別回車鍵
人已經(jīng)過原 Danny Markov 授權(quán)翻譯
在本教程中，我們將學(xué)習(xí)如何使用 JS 進(jìn)行AJAX調(diào)用。
術(shù)語(yǔ)AJAX 表示 異步的 JavaScript 和 XML。
AJAX 在 JS 中用于發(fā)出異步網(wǎng)絡(luò)請(qǐng)求來獲取資源。當(dāng)然，不像名稱所暗示的那樣，資源并不局限于XML，還用于獲取JSON、HTML或純文本等資源。
有多種方法可以發(fā)出網(wǎng)絡(luò)請(qǐng)求并從服務(wù)器獲取數(shù)據(jù)。我們將一一介紹。
XMLHttpRequest對(duì)象（簡(jiǎn)稱XHR）在較早的時(shí)候用于從服務(wù)器異步檢索數(shù)據(jù)。
之所以使用XML，是因?yàn)樗紫扔糜跈z索XML數(shù)據(jù)。現(xiàn)在，它也可以用來檢索JSON, HTML或純文本。
function success() {
var data = JSON.parse(this.responseText)
console.log(data)
}
function error (err) {
console.log('Error Occurred:', err)
}
var xhr = new XMLHttpRequest()
xhr.onload = success
xhr.onerror = error
xhr.open("GET", ""https://jsonplaceholder.typicode.com/posts/1")
xhr.send()
我們看到，要發(fā)出一個(gè)簡(jiǎn)單的GET請(qǐng)求，需要兩個(gè)偵聽器來處理請(qǐng)求的成功和失敗。我們還需要調(diào)用open()和send()方法。來自服務(wù)器的響應(yīng)存儲(chǔ)在responseText變量中，該變量使用JSON.parse()轉(zhuǎn)換為JavaScript 對(duì)象。
function success() {
var data = JSON.parse(this.responseText);
console.log(data);
}
function error(err) {
console.log('Error Occurred :', err);
}
var xhr = new XMLHttpRequest();
xhr.onload = success;
xhr.onerror = error;
xhr.open("POST", "https://jsonplaceholder.typicode.com/posts");
xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
xhr.send(JSON.stringify({
title: 'foo',
body: 'bar',
userId: 1
})
);
我們看到POST請(qǐng)求類似于GET請(qǐng)求。我們需要另外使用setRequestHeader設(shè)置請(qǐng)求標(biāo)頭“Content-Type” ，并使用send方法中的JSON.stringify將JSON正文作為字符串發(fā)送。
早期的開發(fā)人員，已經(jīng)使用了好多年的 XMLHttpRequest來請(qǐng)求數(shù)據(jù)了。現(xiàn)代的fetch API允許我們發(fā)出類似于XMLHttpRequest（XHR）的網(wǎng)絡(luò)請(qǐng)求。主要區(qū)別在于fetch()API使用Promises，它使 API更簡(jiǎn)單，更簡(jiǎn)潔，避免了回調(diào)地獄。
Fetch 是一個(gè)用于進(jìn)行AJAX調(diào)用的原生 JavaScript API，它得到了大多數(shù)瀏覽器的支持，現(xiàn)在得到了廣泛的應(yīng)用。
fetch(url, options)
.then(response => {
// handle response data
})
.catch(err => {
// handle errors
});
API參數(shù)
fetch() API有兩個(gè)參數(shù)
API返回Promise對(duì)象
fetch() API返回一個(gè)promise對(duì)象。
錯(cuò)誤處理
請(qǐng)注意，對(duì)于成功的響應(yīng)，我們期望狀態(tài)代碼為200（正常狀態(tài)），但是即使響應(yīng)帶有錯(cuò)誤狀態(tài)代碼（例如404（未找到資源）和500（內(nèi)部服務(wù)器錯(cuò)誤）），fetch() API 的狀態(tài)也是 resolved，我們需要在.then() 塊中顯式地處理那些。
我們可以在response 對(duì)象中看到HTTP狀態(tài)：
const getTodoItem = fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.catch(err => console.error(err));
getTodoItem.then(response => console.log(response));
Response
{ userId: 1, id: 1, title: "delectus aut autem", completed: false }
在上面的代碼中需要注意兩件事:
錯(cuò)誤處理
我們來看看當(dāng)HTTP GET請(qǐng)求拋出500錯(cuò)誤時(shí)會(huì)發(fā)生什么：
fetch('http://httpstat.us/500') // this API throw 500 error
.then(response => () => {
console.log("Inside first then block");
return response.json();
})
.then(json => console.log("Inside second then block", json))
.catch(err => console.error("Inside catch block:", err));
Inside first then block
? ? Inside catch block: SyntaxError: Unexpected token I in JSON at position 4
我們看到，即使API拋出500錯(cuò)誤，它仍然會(huì)首先進(jìn)入then()塊，在該塊中它無法解析錯(cuò)誤JSON并拋出catch()塊捕獲的錯(cuò)誤。
這意味著如果我們使用fetch()API，則需要像這樣顯式地處理此類錯(cuò)誤：-
fetch('http://httpstat.us/500')
.then(handleErrors)
.then(response => response.json())
.then(response => console.log(response))
.catch(err => console.error("Inside catch block:", err));
function handleErrors(response) {
if (!response.ok) { // throw error based on custom conditions on response
throw Error(response.statusText);
}
return response;
}
? Inside catch block: Error: Internal Server Error at handleErrors (Script snippet %239:9)
fetch('https://jsonplaceholder.typicode.com/todos', {
method: 'POST',
body: JSON.stringify({
completed: true,
title: 'new todo item',
userId: 1
}),
headers: {
"Content-type": "application/json; charset=UTF-8"
}
})
.then(response => response.json())
.then(json => console.log(json))
.catch(err => console.log(err))
Response
? {completed: true, title: "new todo item", userId: 1, id: 201}
在上面的代碼中需要注意兩件事:-
Axios API非常類似于fetch API，只是做了一些改進(jìn)。我個(gè)人更喜歡使用Axios API而不是fetch() API，原因如下：
// 在chrome控制臺(tái)中引入腳本的方法
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://unpkg.com/axios/dist/axios.min.js';
document.head.appendChild(script);
axios.get('https://jsonplaceholder.typicode.com/todos/1')
.then(response => console.log(response.data))
.catch(err => console.error(err));
Response
{ userId: 1, id: 1, title: "delectus aut autem", completed: false }
我們可以看到，我們直接使用response獲得響應(yīng)數(shù)據(jù)。數(shù)據(jù)沒有任何解析對(duì)象，不像fetch() API。
錯(cuò)誤處理
axios.get('http://httpstat.us/500')
.then(response => console.log(response.data))
.catch(err => console.error("Inside catch block:", err));
Inside catch block: Error: Network Error
我們看到，500錯(cuò)誤也被catch()塊捕獲，不像fetch() API，我們必須顯式處理它們。
axios.post('https://jsonplaceholder.typicode.com/todos', {
completed: true,
title: 'new todo item',
userId: 1
})
.then(response => console.log(response.data))
.catch(err => console.log(err))
{completed: true, title: "new todo item", userId: 1, id: 201}
我們看到POST方法非常簡(jiǎn)短，可以直接傳遞請(qǐng)求主體參數(shù)，這與fetch（）API不同。
作者：Danny Markov 譯者：前端小智 來源：tutorialzine
原文：https://tutorialzine.com/2017/12-terminal-commands-every-web-developer-should-know
現(xiàn)代web開發(fā)中，表單是用戶與網(wǎng)站互動(dòng)的重要方式之一。HTML5為表單提交提供了強(qiáng)大的功能和豐富的輸入類型，讓收集和驗(yàn)證用戶輸入數(shù)據(jù)變得更加容易和安全。本文將詳細(xì)介紹HTML5表單的各個(gè)方面，包括基本結(jié)構(gòu)、輸入類型、驗(yàn)證方法和提交過程。
HTML表單由<form>標(biāo)簽定義，它可以包含輸入字段、標(biāo)簽、按鈕等元素。一個(gè)基本的表單結(jié)構(gòu)如下所示：
<form action="/submit_form" method="post">
<label for="name">姓名：</label>
<input type="text" id="name" name="name" required>
<label for="email">電子郵箱：</label>
<input type="email" id="email" name="email" required>
<input type="submit" value="提交">
</form>
在這個(gè)例子中，表單有兩個(gè)輸入字段：姓名和電子郵箱。每個(gè)輸入字段都有一個(gè)<label>標(biāo)簽，這不僅有助于用戶理解輸入的內(nèi)容，也有助于屏幕閱讀器等輔助技術(shù)。<form>標(biāo)簽的action屬性定義了數(shù)據(jù)提交到服務(wù)器的URL，method屬性定義了提交數(shù)據(jù)的HTTP方法（通常是post或get）。
HTML5提供了多種輸入類型，以支持不同的數(shù)據(jù)格式和設(shè)備。
<!-- 單行文本 -->
<input type="text" name="username" placeholder="請(qǐng)輸入用戶名" required>
<!-- 密碼 -->
<input type="password" name="password" required minlength="8">
<!-- 郵箱 -->
<input type="email" name="email" required placeholder="example@domain.com">
<!-- 搜索框 -->
<input type="search" name="search" placeholder="搜索...">
<!-- 數(shù)值 -->
<input type="number" name="age" min="18" max="100" step="1" required>
<!-- 滑動(dòng)條 -->
<input type="range" name="volume" min="0" max="100" step="1">
<!-- 電話號(hào)碼 -->
<input type="tel" name="phone" pattern="^\+?\d{0,13}" placeholder="+8613800000000">
<!-- 日期 -->
<input type="date" name="birthdate" required>
<!-- 時(shí)間 -->
<input type="time" name="appointmenttime">
<!-- 日期和時(shí)間 -->
<input type="datetime-local" name="appointmentdatetime">
<!-- 復(fù)選框 -->
<label><input type="checkbox" name="interest" value="coding"> 編程</label>
<label><input type="checkbox" name="interest" value="music"> 音樂</label>
<!-- 單選按鈕 -->
<label><input type="radio" name="gender" value="male" required> 男性</label>
<label><input type="radio" name="gender" value="female"> 女性</label>
<!-- 下拉選擇 -->
<select name="country" required>
<option value="china">中國(guó)</option>
<option value="usa">美國(guó)</option>
</select>
<!-- 顏色選擇器 -->
<input type="color" name="favcolor" value="#ff0000">
<!-- 文件上傳 -->
<input type="file" name="resume" accept=".pdf,.docx" multiple>
HTML5表單提供了內(nèi)置的驗(yàn)證功能，可以在數(shù)據(jù)提交到服務(wù)器之前進(jìn)行檢查。
<input type="text" name="username" required>
<input type="text" name="zipcode" pattern="\d{5}(-\d{4})?" title="請(qǐng)輸入5位數(shù)的郵政編碼">
<input type="number" name="age" min="18" max="99">
<input type="text" name="username" minlength="4" maxlength="8">
當(dāng)用戶填寫完表單并點(diǎn)擊提交按鈕時(shí)，瀏覽器會(huì)自動(dòng)檢查所有輸入字段的有效性。如果所有字段都滿足要求，表單數(shù)據(jù)將被發(fā)送到服務(wù)器。否則，瀏覽器會(huì)顯示錯(cuò)誤信息，并阻止表單提交。
<input type="submit" value="提交">
可以使用JavaScript來自定義驗(yàn)證或處理提交事件：
document.querySelector('form').addEventListener('submit', function(event) {
// 檢查表單數(shù)據(jù)
if (!this.checkValidity()) {
event.preventDefault(); // 阻止表單提交
// 自定義錯(cuò)誤處理
}
// 可以在這里添加額外的邏輯，比如發(fā)送數(shù)據(jù)到服務(wù)器的Ajax請(qǐng)求
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單提交并顯示JSON</title>
</head>
<body>
<!-- 表單定義 -->
<form id="myForm">
<label for="name">姓名：</label>
<input type="text" id="name" name="name">
<br>
<label for="email">電子郵件：</label>
<input type="email" id="email" name="email">
<br>
<input type="button" value="提交" onclick="submitForm()">
</form>
<script>
// JavaScript函數(shù)，處理表單提交
function submitForm() {
// 獲取表單元素
var form=document.getElementById('myForm');
// 創(chuàng)建一個(gè)FormData對(duì)象
var formData=new FormData(form);
// 創(chuàng)建一個(gè)空對(duì)象來存儲(chǔ)表單數(shù)據(jù)
var formObject={};
// 將FormData轉(zhuǎn)換為普通對(duì)象
formData.forEach(function(value, key){
formObject[key]=value;
});
// 將對(duì)象轉(zhuǎn)換為JSON字符串
var jsonString=JSON.stringify(formObject);
// 彈出包含JSON字符串的對(duì)話框
alert(jsonString);
// 阻止表單的默認(rèn)提交行為
return false;
}
</script>
</body>
</html>
在這個(gè)例子中：
注意，這個(gè)例子中我們使用了type="button"而不是type="submit"，因?yàn)槲覀儾幌Ｍ韱斡心J(rèn)的提交行為。我們的JavaScript函數(shù)submitForm會(huì)處理所有的邏輯，并且通過返回false來阻止默認(rèn)的表單提交。如果你想要使用type="submit"，你需要在<form>標(biāo)簽上添加一個(gè)onsubmit="return submitForm()"屬性來代替按鈕上的onclick事件。
HTML5的表單功能為開發(fā)者提供了強(qiáng)大的工具，以便創(chuàng)建功能豐富、用戶友好且安全的網(wǎng)站。通過使用HTML5的輸入類型和驗(yàn)證方法，可以確保用戶輸入的數(shù)據(jù)是有效的，同時(shí)提高用戶體驗(yàn)。隨著技術(shù)的不斷進(jìn)步，HTML5表單和相關(guān)API將繼續(xù)發(fā)展，為前端工程師提供更多的可能性。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
