Получить возвращаемое значение метода публикации HTML-формы

У меня есть HTML-форма в компоненте Mason (A.m), который использует метод post для вызова другого компонента Mason (B.m). Я хочу, чтобы этот компонент Mason (B.m) возвращал значение в форму HTML в компоненте Mason (A.m). Затем я хочу передать это возвращаемое значение функции Javascript.

Как я могу это сделать? Я новичок в веб-разработке.


person jas7    schedule 25.10.2013    source источник
comment
Почитайте о запросах Ajax.   -  person amon    schedule 26.10.2013


Ответы (1)


Вам нужно сделать запрос AJAX. Хотя это и не обязательно, я бы посоветовал вам использовать jQuery, это значительно упростит задачу. Также взгляните на этот вопрос: форма отправки jQuery AJAX

Вот небольшой пример в Мейсоне, он, конечно, очень упрощен, вы должны добавить проверку ошибок и экранирование, но я думаю, что это может быть хорошим началом. Ваш компонент A.mc может выглядеть так:

<html>
<head>
  <title>This is A</title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script>
  $(document).ready(function() {

    $("#myform").submit(function() { // intercepts the submit event
      $.ajax({ // make an AJAX request
        type: "POST",
        url: "B", // it's the URL of your component B
        data: $("#myform").serialize(), // serializes the form's elements
        success: function(data)
        {
          // show the data you got from B in result div
          $("#result").html(data);
        }
      });
      e.preventDefault(); // avoid to execute the actual submit of the form
    });

  });
  </script>
</head>
<body>
  <form id="myform">
  <input type="text" name="mytext" />
  <input type="submit" />
  </form>

  <div id="result"></div>
</body>
</html>

это просто HTML-страница, которая загружает библиотеку jQuery и содержит вашу форму, а также содержит некоторый код, чтобы указать форме сделать запрос AJAX к компоненту B, когда пользователь нажимает кнопку «Отправить», а затем показать содержимое, возвращаемое компонентом B в ваш результат div.

И это может быть ваш компонент B.mc:

<%class>
  has 'mytext';
</%class>
I got this text <strong><% $.mytext %></strong> from your form,
and its length is <strong><% length($.mytext) %></strong>.

Результат будет таким:

введите здесь описание изображения

person fthiella    schedule 26.11.2013