Jquery/AJAX 中的 Menuitem 选择函数调用问题答案

【问题标题】：Menuitem select function call issue in Jquery/AJAXJquery/AJAX 中的 Menuitem 选择函数调用问题
【发布时间】：2014-07-09 12:37:53
【问题描述】：

我想在选择并单击名为 "Log Report" (Code-2) 的菜单项时调用以下 AJAX Javascript 函数 (Code-1) 和在页面的 html 文本框中填充 test.txt 的结果。

下面的 code-1 可以读取 text.txt，我希望在我选择名为 Log Report 的 menuitem 选项时调用或调用它。任何人都可以建议我如何使我的以下代码工作。 如何在 menuitem 日志报告中调用 code 1 函数并将其中的文本填充到文本框中？

P.S: 复制test.txt中的代码，保存为test.html即可查看Code 2的下拉UI。在 IE 或 Firefox 中打开它。

CODE-1

      <script type="text/javascript">  
function  contentDisp()
{
    $.ajax({
    url : "test.txt",
    success : function (data) {
    $("#contentArea").html(data);
    }
    });
}
 </script>

CODE-2

<html lang="en">
<head>
<meta charset="utf-8">
<title>Test screen</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
<script>
$(function() {
$( "#menu" ).menu();
});
</script>
<style>
.ui-menu { width: 230px; }
</style>
</head>
<body>
<ul id="menu">
<li>Server</li>
<li>Logs
<ul>
<li>Log Report</li>
</ul>
</li>
</html>

【问题讨论】：

标签： jquery ajax jquery-ui drop-down-menu

【解决方案1】：

最简单的方法是给“日志报告”li一个ID，并在其上附加一个点击事件，如下所示：

<ul id="menu">
<li>Server</li>
<li>Logs
<ul>
<li id="log-report-link">Log Report</li>
</ul>
</li>

在脚本标签中是这样的：

<script>
    $( "#menu" ).menu();
    $("#log-report-link").click(function(){
        contentDisp();
    });
</script>

希望对你有帮助！

【讨论】：

如何将值填充到文本框中。在上面的建议中，您说我可以调用 AJAX 函数的方式，但是您能否建议我如何在 html 的文本框中绑定或显示此 .txt 文件的结果。
好吧，我猜#contentArea 是一个文本区域，你的“Code-1”应该可以工作。无论如何，使用$("input-or-textarea-selector").val(data);而不是使用.html()会更好