Где и как разместить Ajax для модального контента Bootstrap - PullRequest
Новая
       13

Где и как разместить Ajax для модального контента Bootstrap

0 голосов
/ 29 июня 2018

Это простое тестовое приложение nodejs (ссылка на скачивание проекта добавлена ​​ниже), использующее экспресс, механизм шаблонов pug и jquery. Он предоставляет HTML-форму с вводом для двух чисел и добавляет их вместе на стороне сервера одним нажатием кнопки (вычисление должно быть заменено сложным вычислением и запросом к базе данных), а показывает результат в модальном режиме. диалоговое окно, которое появляется, когда пользователь нажимает кнопку отправки.

Очень простой на данный момент:

screenshot of the test app

Кнопка «Добавить классику чисел» отправляет на сервер классический POST и перезагружает страницу с добавленным результатом. «Добавить номера модальные» открывает модальные, но не более в данный момент.

Я застрял с

  • Где поставить функции, чтобы при нажатии на кнопку открывалось модальное И делает запрос к серверу.
  • Какую функцию добавить и с какими аргументами
  • Как обработать запрос в моем серверном app.js. это обычный POST маршрут? как структурировать результат и отправить его обратно, чтобы он отображался в модале?

Я пытался найти ответ онлайн в течение двух дней. Я благодарен за любую подсказку, которая может указать мне правильное направление!

Вы можете скачать папку проекта, просто "npm install", чтобы установить пакеты npm

app.js 

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var fetchRouter = require('./routes/fetch');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/fetch', fetchRouter);
app.use('/users', usersRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

index.js (маршрутизатор) 

var express = require('express');
var router = express.Router();

var sum = 0;

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'This is the website', resultnumber: sum  });
});

//my stuff
router.post('/', function(req, res, next) {
  sum = parseFloat(req.body.nb1) + parseFloat(req.body.nb2)
  setTimeout(function(){ 
    res.render('index', { title: 'This is the website', resultnumber: sum  });
  }, 1500);

});

module.exports = router;

index.pug (шаблон) 

extends layout

block content
  h1= title
  p Welcome to the Website

  form(method='POST' action='/')
    div.form-group
        label(for='nb1') Number 1:
        input#nb1.form-control(type='text', placeholder='Number 1' name='nb1')
    div.form-group
        label(for='nb2') Number 2:
        input#nb2.form-control(type='text', placeholder='Number 2' name='nb2')
    //button.btn.btn-primary(type='submit') Add these together
    button(type='submit' class='btn btn-info btn-lg') Add numbers classic

  button(type='button' class='btn btn-info btn-lg' data-toggle='modal' data-target='#myModal') Add numbers modal

  if(resultnumber != 0)
    p Sum:
    p #{resultnumber}

  // Modal
  #myModal.modal.fade(role='dialog')
    .modal-dialog
      // Modal content
      .modal-content
        .modal-header
          button.close(type='button', data-dismiss='modal') ×
          h4.modal-title Modal Result
        .modal-body
          p The result is supposed to be shown here. 
          script(type="text/javascript").
            var counter = 0
            console.log('das skript',counter++)
        .modal-footer
          button.btn.btn-default(type='button', data-dismiss='modal') Close

1 Ответ

0 голосов
/ 29 июня 2018

(как вы используете jQuery) После нажатия на кнопку Ajax вызовите конечную точку расчета. После получения ответа от конечной точки (желаемый результат) заполните модальное значение (используя jquery / js), а затем покажите модальное значение.

Пример кода: SERVER 

//my stuff
router.post('/calculation', function(req, res, next) {
  sum = parseFloat(req.body.nb1) + parseFloat(req.body.nb2);
  res.status(200).json({ data : sum });
});

КЛИЕНТ 

$.ajax({
  url: "/calculation",
  type: "POST",
  dataType: "json",
  data: {
    nb1: num1,
    nb2: num2
  },
  success: function(json) {
    if(json.status == 200){
      // Show your modal. For example:
      $('.modal-body p').text(json.data); // Setting result to modal
      $('#myModal').modal('show'); // Showing modal
    }else {
      // Show error message
      $('#login-error').text("Invalid login.");
    }
  },

  error: function() {
    // Probably something wrong with the server.
    $('#login-error').text("Server error.");
  }   
});

Надеюсь, это поможет вам.

...