在多个javascript函数之间传递参数答案

【问题标题】：Passing parameters between multiple javascript functions在多个javascript函数之间传递参数
【发布时间】：2012-01-11 20:57:27
【问题描述】：

我想要一个这样的 JSP：

<form id="form1">
 Name is: <%=request.getParameter("name") %>
 <a href="#" onclick="fun1('<%=request.getParameter("name") %>')">Show Email Form</a>
</form>

<form id="form2">
 <input type="text" name="emailid" />
 <a href="#" onclick="fun2('$('input[name=emailid]').val()', <name required here>)">Submit</a>
</form>

我的 javascript 是这样的：

function fun1() {
 //Nothing important here, just show second form
 $('#form2').show();
}

function fun2(myemail, myname) {
 //Do something important here,
 //Like update email for the given name
 xmlhttp = GetXmlHttpObject();
 var url = "updateEmail.do?email=" + myemail + "&name=" + myname;
 xmlhttp.open("POST", url, true);
}

注意事项：
1) 我的表单没有任何动作，我正在通过 Ajax 提交第二个表单。
2）我需要有两种不同的形式，第一种形式除了名称之外还有更多的元素。第二种形式除了电子邮件之外还有另一组不同的元素。 form2 中只有一个函数 (fun2) 需要 form1 中的名称参数和 form2 中的电子邮件 ID。
3）form1有一个不可编辑的name参数，form2有一个可编辑的email参数。 form2 中的 onclick 函数使用 jQuery 获取电子邮件文本输入。
4) 要考虑的另一种情况是 form1 中是否有多个名称条目，例如使用循环的名称列表。例如，

<form id="form1">
 <logic:iterate id="record" name="peoplerecords" property="records">
  Name is: <bean:write name="record" property="name">
 <a href="#" onclick="fun1('<bean:write name="record" property="name">')">Show Email Form</a>
 </logic:iterate>
 </form>

将form1中的name参数写入form2中的javascript onclick url的最佳方法是什么？

form1 :- onclick="fun1(name);"
form2 :- onclick="fun2(email, name);"

【问题讨论】：

标签： javascript jquery ajax parameters forms

【解决方案1】：

你可以直接用JSP把名字放进去：

<a href="#" onclick="fun2($('input[name=emailid]').val(), <%=request.getParameter("name") %>)">Submit</a>

或者你可以给包含名字的dom节点一个id，然后用jQuery访问它

Name is: <span id="nameNode"><%=request.getParameter("name") %></span>


<a href="#" onclick="fun2($('input[name=emailid]').val(), $('#nameNode').innerHTML)">Submit</a>

还可以考虑直接在您的函数中获取所需的参数，或者在您的脚本部分定义 onclick 处理程序，以避免代码变得混乱。注意 HTML 属性中的引号，您在第二个 onclick 处理程序中使用了两次单引号。

【讨论】：

谢谢，这服务于我的目的（从没想过 :)）但现在我想知道 form1 中是否有多个名称条目条目。在这种情况下我能做什么？我现在已经针对这种情况更新了问题。

【解决方案2】：

不要将“数据”放入 HTML 模型中。

如果您使用的是服务器端语言，请将所有数据直接传递到您的内联脚本中，而不是内联 HTML。

例子：

<a onclick="alert('<?php echo $the_string;?>');">alert!</a>

对

<a id="alert_link">alert!</a>

<script type="text/javascript">

    var the_string = <?php echo json_encode($the_string);?>;    // you get javascript safe encoding with json_encode, almost for free!

    document.getElementById("alert_link").onclick = function () {
        alert(the_string);
    };
</script>

第二个示例可能看起来更多的代码，但如果你有很多这样的东西，它真的很值得。

此时，您的所有数据都可以在 JavaScript 中使用，因此应该很容易将它们捆绑在一起。

【讨论】：

我不是PHP背景，所以不太了解这个。 Java/JSP 是否有类似的替代方案？这是否类似于使用 bean -

【解决方案3】：

由于您的 name 值是从服务器（在 JSP 中）写入的，您可以直接将其写入 fun2 调用吗？

onclick="fun2('$(\'input[name=emailid]\').val()', '<%=request.getParameter("name") %>')"

【讨论】：