Node.js
Express.JS를 사용하여 ajax 요청 라우팅
수색…
AJAX의 간단한 구현
기본 고속 생성기 템플릿이 있어야합니다.
app.js에서 add ( var app = express.app()
이후에 추가 할 수 var app = express.app()
) :
app.post(function(req, res, next){
next();
});
이제 index.js 파일 (또는 해당 일치 항목)에 다음을 추가하십시오.
router.get('/ajax', function(req, res){
res.render('ajax', {title: 'An Ajax Example', quote: "AJAX is great!"});
});
router.post('/ajax', function(req, res){
res.render('ajax', {title: 'An Ajax Example', quote: req.body.quote});
});
/views
디렉토리에 ajax.jade
/ ajax.pug
또는 ajax.ejs
파일을 만들고 다음을 추가하십시오.
옥 / PugJS 들어 :
extends layout
script(src="http://code.jquery.com/jquery-3.1.0.min.js")
script(src="/magic.js")
h1 Quote: !{quote}
form(method="post" id="changeQuote")
input(type='text', placeholder='Set quote of the day', name='quote')
input(type="submit", value="Save")
EJS의 경우 :
<script src="http://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="/magic.js"></script>
<h1>Quote: <%=quote%> </h1>
<form method="post" id="changeQuote">
<input type="text" placeholder="Set quote of the day" name="quote"/>
<input type="submit" value="Save">
</form>
이제 /public
magic.js
라는 파일을 만듭니다.
$(document).ready(function(){
$("form#changeQuote").on('submit', function(e){
e.preventDefault();
var data = $('input[name=quote]').val();
$.ajax({
type: 'post',
url: '/ajax',
data: data,
dataType: 'text'
})
.done(function(data){
$('h1').html(data.quote);
});
});
});
그리고 당신은 그것을 가지고 있습니다! 저장을 클릭하면 견적이 변경됩니다!
Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow