$.ajax伝送データ検証練習とサービス側運用node.jsはローカルサーバを構築します.
2875 ワード
まずnodejsをダウンロードします
serveを作成します.js配置バックグラウンドのコードはindexを確立する.htmlフロントエンドのコードを配置してフロントエンドとバックエンドのインタラクティブな記録を行うことができるのは練習と理解です
フロントエンド部分コード
バックグラウンド部分コード
serveを作成します.js配置バックグラウンドのコードはindexを確立する.htmlフロントエンドのコードを配置してフロントエンドとバックエンドのインタラクティブな記録を行うことができるのは練習と理解です
フロントエンド部分コード
：
：
$(document).ready(function() {
$("#btn").click(function() {
var phone = $("#phone").val();
var password = $("#password").val();
var data_val = {
"phone": phone,
"password": password
};
$.ajax({
url: 'http://localhost:8083/hhh',
dataType: "json", //jsonp get
data: data_val,
type: 'POST',
success: function(data) {
console.log(data);
if (data.data) {
$('.calltext').html(" ")
} else {
$('.calltext').html(" ")
}
},
error: function(xhr, status, error) {
console.log('Error: ' + error.message);
},
});
});
});
バックグラウンド部分コード
// express
const express = require('express');
const app = express();
// post
var bodyParser = require('body-parser');
//
app.all('*', function(req, res, next) {
//
res.header("Access-Control-Allow-Origin", "*");
// ， ， ，
res.header("Access-Control-Allow-Headers", "Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild");
res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
//
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By", ' 3.2.1')
next();
});
app.use(bodyParser.urlencoded({ extended: false }));
app.post('/hhh', (req, res) => {
console.log(req.body)
if (req.body.phone == "12345678" && req.body.password == "123123") {
res.send({ "data": true })
} else {
res.send({ "data": false })
}
});
app.listen(8083, () => {
console.log('Server is running at http://localhost:8083')
})