Khmer Web | យន្តការ Ajax

ទន្ទឹមនឹងការប្រើប្រាស់ទំរង់បែបបទ យើងក៏អាចបញ្ជូនបណ្តាទិន្នន័យទាំងឡាយទៅកាន់ server និងទទួលទិន្នន័យពី server មកវិញ តាមរយៈការប្រើប្រាស់យន្តការ Ajax ។ ហើយដើម្បីអោយមានការងាយស្រួល យើងអាចប្រើប្រាស់កញ្ចប់ jQuery ក្នុងការប្រើប្រាស់យន្តការ Ajax ។ ដូចនេះ យើងចាំបាច់ត្រូវទាញយកកញ្ចប់ jQuery មកទុកនៅក្នុងថត public ជាមុនសិន។ ការប្រើប្រាស់យន្តការ Ajax ដោយប្រើប្រាស់កញ្ចប់ jQuery អាចត្រូវធ្វើឡើងដូចខាងក្រោមនេះ៖

import express from 'express'
import path from 'path'

const app = express()
const port = process.env.PORT || 3000
const __dirname = path.resolve()
 
import index from './routes/index.js'
import backend from './routes/backend.js'

app.set('views', path.join(__dirname, 'views'))
app.set('view engine', 'ejs')
app.use(express.static(path.join(__dirname, 'public')))
app.use(express.urlencoded({extended:false}))
app.use(express.json())
                                  
app.use('/',index) 
app.use('/backend',backend) 

app.listen(port,function(){
    console.log(`This application is listening to the port: ${port}`)
})

/* ./routes/index.js */
import express from 'express'
const index = express.Router()

let data = {}

index.get('/',(req,res,next)=>{
    data.message = ''
    res.render('base',data)
})

index.post('/',(req,res,next)=>{
    data.message = `ទំព័រលេខ ${req.body.page}`
    res.json(data)
})
 
export default index

<!--views/base.ejs-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>Express.js Web Framework</title>
        <link href="/fonts/setup.css" rel="stylesheet">
        <link href="/styles/base.css" rel="stylesheet">
        <script src="/scripts/jquery.js"></script>
    </head>
    <body>
        <script>
            let page = 0
            let paging = ()=>{
                $.ajax({
                    url:'/',
                    type:"POST",
                    data:JSON.stringify({page:page++}),
                    contentType:"application/json; charset=utf-8",
                    dataType:"json",
                    success:function(data){
                        alert(data.message)
                    }
                })
            }
        </script>
        <input type="submit" value="ទំព័រ" onclick="paging()" />
        <p><%= message %></p>
    </body>
</html>