5

post メソッドを使用して別の Mason コンポーネント (Bm) を呼び出す HTML フォームが Mason コンポーネント (Am) にあります。この Mason コンポーネント (Bm) が、Mason コンポーネント (Am) 内の HTML フォームに値を返すようにします。次に、この戻り値を Javascript 関数に渡したいと思います。

これどうやってするの？私はウェブ開発が初めてです。

4

1 に答える 1

6

AJAX リクエストを行う必要があります。厳密には必要ではありませんが、jQueryを使用することをお勧めします。この質問もご覧ください: jQuery AJAX submit form

これはメイソンの小さな例です。もちろん非常に単純化されています。エラーチェックとエスケープも追加する必要がありますが、これは良い出発点になると思います。コンポーネント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>

jQueryライブラリをロードし、フォームを含む単なるHTMLページであり、ユーザーが[送信]ボタンをクリックしたときにBコンポーネントにAJAXリクエストを送信し、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>.

結果は次のようになります。

ここに画像の説明を入力

于 2013-11-26T22:53:42.427 に答える