首页indexController实现前后端交互代码示例

indexController实现前后端交互代码示例

时间: 2023-05-27 16:04:52 浏览: 95

由于您没有说明具体的技术栈，我假设您是在使用基于MVC的Web开发框架进行前后端交互。以下是一个示例，使用Node.js和express框架作为后端，使用jQuery AJAX作为前端向后端发送请求： //indexController.js var express = require('express'); var router = express.Router(); router.get('/', function(req, res, next) { res.render('index', { title: 'Express' }); }); router.post('/submit', function(req, res, next) { var data = req.body; //处理数据并返回响应 res.send('Request received: '+ data); }); module.exports = router; //index.ejs <!DOCTYPE html> <html> <head> <title>Index Page</title> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> </head> <body> <form> <label>Name:</label><input type="text" id="name"><br> <label>Email:</label><input type="text" id="email"><br> <button type="button" id="submitBtn">Submit</button> </form> <script> $(document).ready(function(){ $('#submitBtn').click(function(){ var data = { name: $('#name').val(), email: $('#email').val() }; $.ajax({ type: "POST", url: "/submit", data: data, success: function(response){ alert(response); }, error: function(xhr, status, error) { alert(xhr.responseText); } }); }); }); </script> </body> </html> 在上面的示例中，我们定义了两个路由，一个用于渲染首页(index)，另一个用于处理数据提交(/submit)。在提交数据时，我们使用jQuery的AJAX方法向后端发送请求，如果请求成功则弹出一个提示框显示响应内容；如果请求失败，则显示错误信息。

阅读全文