javascript 获取 HTML Form Post 方法的返回值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19600596/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get the return value of a HTML Form Post method
提问by jas7
I have a HTML form in a Mason component(A.m) that uses the post method to call another Mason component(B.m). I want this Mason component(B.m) to return a value to the HTML form in the Mason component(A.m). Then I want to pass this returned value to a Javascript function.
我在梅森组件（Am）中有一个 HTML 表单，它使用 post 方法调用另一个梅森组件（Bm）。我希望这个梅森组件(Bm) 向梅森组件(Am) 中的HTML 表单返回一个值。然后我想将此返回值传递给 Javascript 函数。
How can I do this? I'm new to web development.
我怎样才能做到这一点？我是网络开发的新手。
回答by fthiella
You need to make an AJAX request. Although not strictly necessary, I would suggest you to use jQuery, it will make things a lot easier. Please also have a look at this question: jQuery AJAX submit form
您需要发出 AJAX 请求。虽然不是绝对必要的，但我建议你使用jQuery，它会让事情变得容易得多。也请看看这个问题：jQuery AJAX 提交表单
Here's a little example in Mason, it's very simplified of course, you should add some error checking and some escaping also, but I think it could be a good start. Your A.mccomponent could look like this:
这是 Mason 中的一个小例子，当然它非常简化，你应该添加一些错误检查和一些转义，但我认为这可能是一个好的开始。您的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>
it's just an HTML page that loads jQuery library and that contains your form, and that contains some code to instruct the form to make an AJAX request to B component when the user clicks the Submit button and then to show the contents returned by B component in your result div.
它只是一个加载 jQuery 库并包含您的表单的 HTML 页面，其中包含一些代码以指示表单在用户单击“提交”按钮时向 B 组件发出 AJAX 请求，然后显示 B 组件返回的内容你的结果div。
And this could be your B.mccomponent:
这可能是您的B.mc组件：
<%class>
has 'mytext';
</%class>
I got this text <strong><% $.mytext %></strong> from your form,
and its length is <strong><% length($.mytext) %></strong>.
Result will be like this:
结果将是这样的：
