1、jQuery中ajax請(qǐng)求需要了解的幾個(gè)知識(shí)點(diǎn)
- 使用$.ajax方法的時(shí)候，只接受一個(gè)參數(shù)，那就是一個(gè)對(duì)象。這個(gè)對(duì)象就是當(dāng)前請(qǐng)求的所要的所有配置
- 了解參數(shù)中的key、value值
$.ajax({
url:' ',//必填，請(qǐng)求的地址
type:' ',//選填，請(qǐng)求方式，如果不填，默認(rèn)的是GET請(qǐng)求方式
data:{ },//選填，這是發(fā)送請(qǐng)求的時(shí)候攜帶的參數(shù)
dataType:' json ',//選填，希望返回的數(shù)據(jù)類(lèi)型，默認(rèn)是string類(lèi)型
async:' true ',//選填，默認(rèn)是true
success:function(){ },//選填，成功的回調(diào)函數(shù)
error:function(){ },//選填，失敗時(shí)的回調(diào)函數(shù)
cache:true,//選填，是否進(jìn)行緩存，默認(rèn)是true
status:{ },//選填，根據(jù)對(duì)應(yīng)的狀態(tài)碼進(jìn)行函數(shù)執(zhí)行
timeout:1000,//超時(shí)時(shí)間
})
2、話(huà)不多說(shuō)，下面進(jìn)行代碼實(shí)操：
- 下面是前臺(tái)代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>前端與后臺(tái)交互之a(chǎn)jax(post請(qǐng)求)</title>
</head>
<body>
<form action="" method="">
<p class="inp">
用戶(hù)名：<input type="text" placehoder="請(qǐng)輸入內(nèi)容" id="username">
</p>
<p class="inp">
密碼:<input type="text" placehoder="請(qǐng)輸入內(nèi)容" id="password">
</p>
<p class="inp">
<input type="submit" id="submitBtn">
</p>
</form>
</body>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
<script src="https://cdn.jsdelivr.net/gh/jquery/jquery@3.4.1/dist/jquery.js"></script>
<script>
$("#submitBtn").click(function(e){
//阻止默認(rèn)行為
var e = e || window.event;
e.preventDefault();
//獲取表單數(shù)據(jù)
var username = $("#username").val().trim();
var password = $("#password").val().trim();
//請(qǐng)求的參數(shù)
var data = {'username':username,'password':password};
$.ajax({
//請(qǐng)求地址
url:'http://localhost:3000/users',
//請(qǐng)求參數(shù)
data,
// 請(qǐng)求方式
type:'POST',
//成功回調(diào)
success: function(kk){
console.log(kk);
}
});
})
</script>
</html>
-下面是后臺(tái)部分代碼，這里是由nodejs寫(xiě)的后臺(tái),負(fù)責(zé)設(shè)置接口數(shù)據(jù)類(lèi)型。
- 下面是app.js
const express = require('express');
const path = require('path');
const cors = require('cors');
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
const app = express();
app.use(cors());
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', indexRouter);
app.use('/users', usersRouter);
var port = 3000;
app.listen(port,()=>{
console.log('this server is running at ' + port);
});
module.exports = app;
- 下面是users.js 部分代碼，由于沒(méi)有連接數(shù)據(jù)庫(kù)，所有將用戶(hù)密碼，先用數(shù)組的形式來(lái)保存數(shù)據(jù)來(lái)模擬存入數(shù)據(jù)庫(kù)。
var express = require('express');
var router = express.Router();
const url = require('url');
//引入query-string （解析post請(qǐng)求過(guò)來(lái)的數(shù)據(jù)）
const queryString = require('querystring');
var dataInfo;
router.post('/', function(req, res, next) {
// console.log(location.search);
var str = '';
req.on('data', (data) => {
// console.log(data);//這里的數(shù)據(jù)是緩沖區(qū)中的二進(jìn)制編碼格式
// <Buffer 75 73 65 72 6e 61 6d 65 3d 61 6e 64 79 26 70 61 73 73 77 6f 72 64 3d 73 74 72 69 6e 67 69 66 79>
str += data;
});
var arr = [];
req.on('end', () => {
//需要用query-string解析編碼
POST = queryString.parse(str);
console.log(POST.password);//解析完畢后即可獲取到表單通過(guò)post請(qǐng)求過(guò)來(lái)的參數(shù)數(shù)據(jù)
var _username = POST.username;
var _password = POST.password;
//接下來(lái)就是把用戶(hù)注冊(cè)的數(shù)據(jù)通過(guò)加密后存入到數(shù)據(jù)庫(kù)中去。在這里不進(jìn)行相應(yīng)的操作，通過(guò)用數(shù)組來(lái)模擬
if(_username.length <= 0 || _username.length >= 10) {
dataInfo = {
error_code:4003,
reason:'用戶(hù)名長(zhǎng)度不能為空或者不能大于10',
data:{
token:''
}
}
}
if(_password.length <= 0 || _password.length >= 10) {
dataInfo = {
error_code:4003,
reason:'密碼長(zhǎng)度不能為空或者不能大于10',
data:{
token:''
}
}
}
// 一般來(lái)說(shuō)，在這里需要對(duì)用戶(hù)密碼進(jìn)行加密之后才存入數(shù)據(jù)庫(kù)的，可以用雙重md5來(lái)進(jìn)行密碼加密處理，也可以使用sha1來(lái)進(jìn)行加密等。
//存入數(shù)組（即保存到數(shù)據(jù)庫(kù)）
arr.push(POST);
//接口api所返回的數(shù)據(jù)類(lèi)型
dataInfo = {
error_code:0,
reason:'注冊(cè)成功',
data:{
token:''
}
}
});
//響應(yīng)數(shù)據(jù)
res.json(dataInfo);
});
module.exports = router;
-
最終結(jié)果如下圖所示：
image.png
