使用 AJAX load 方法加载 JSP 页面

Question

大家好，我需要一些关于Ajax load方法的帮助。基本上，我需要使用Ajax load()在主页面中显示一个jsp，一旦用户选中单选按钮。我已经附上了需要显示jsp的页面图片以及我的jsp代码。请帮忙！

   <div id="verification">
    <p align=center class="4f1_title" ><u>Verification Decision</u></p>
     <table border="0" cellpadding="0" cellspacing="0" align=center
width="100%">
<tbody>

    <tr>
        <td width="10%"></td>
        <td width="8%">Passed <input id="passed" type="radio"
            value="P" onclick="()"></td>
        <td colspan="2" width="8%">Pending <input id="pending"
            type="radio" value="H" onclick="()"></td>
        <td width="9%">True Hit <input id="failed" type="radio"
            value="F" onclick="()" disabled></td>
        <td width="13%">Parcel Returned <input id="returned"
            type="radio" value="S" onclick="()"></td>
        <td width="23%">Referred to Law Enforcement <input id="law"
            type="radio" value="L" onclick="()"></td>
        <td width="8%">Retired <input id="retired" type="radio"
            value="R" onclick="()" disabled></td>
              <td width="12%">Return Reason <input id="ac" 
              type="radio" value="C" onclick="()"></td>
         <td width="10%"></td>
    </tr>
         </tbody>
          </table>
         </div>
            <br>

                     <div align=center>
                <a href="javascript:handleClick()"><u>
              <div id='showhidecomment'>Show Comments</div></u></a>
              <div id='chkcomments'>
               </div>
    </div>
     <br>

- Fahad

---

所有这些 onclick="()" 是什么？你尝试过什么？你看过 jQuery 的 .load() 方法 吗？ - Gabriele Petrioli

抱歉造成困惑。我之前尝试使用处理程序来完成这个任务，但现在无法继续使用该方法，我将删除它。到目前为止，我已经尝试了这个，但它不起作用：$(document).ready(function () { $('#verification').find('#passed') { $("radio").click(function(){ $("#showhidecomment").load("sample.jsp"); { } }); - Fahad

Answer 1

尝试

$(function() { // when DOM is ready
    $("#showhidecomment").click(function(){ // when #showhidecomment is clicked
        $("#chkcomments").load("sample.jsp"); // load the sample.jsp page in the #chkcomments element
    }); 
});

并将您的HTML代码（链接部分）更改为以下内容：

<div>
    <div id='showhidecomment'>Show Comments</div>
    <div id='chkcomments'></div>
</div>

由于在a元素内部无法使用无效的div元素。

---

更新 评论用

我会为这些元素添加自定义的data-url属性（用于指定要加载的页面）。

<input id="passed" type="radio" value="P" data-url="some-page.jsp" />
<input id="law" type="radio" value="L" data-url="some-other-page.jsp" />
<input id="ac" type="radio" value="C" data-url="some-third-page.jsp" />

然后对它们应用一个单独的处理程序。

$('#verification').on('change','input[type="radio"][data-url]', function(){
    if (this.checked){
        var url = $(this).data('url');
        $("#chkcomments").load( url );
    }
});

- Gabriele Petrioli

---

感谢@Gaby aka G.Petrioli，但是这个函数应该在用户选择单选按钮而不是“showhidecomment”链接时调用。我该如何编写我的复选框以使其按照这种方式运行？ - Fahad

aka G.Petrioli，已通过执法和退回原因。这三个页面加载不同的页面。 - Fahad

Answer 2

如果您只想使用ajax加载页面，您可以使用jquery load：http://api.jquery.com/load/ 还有jquery get：http://api.jquery.com/jQuery.get/ 您可以在文档中找到一个简单的示例。

更新：

如果您尚未添加对jquery库的引用，则可能需要添加。请参阅以下示例代码。

简单页面显示“hello world”：http://jsbin.com/ivinuw/1/ 带按钮的页面。单击按钮时，它使用jquery load将上面的页面ajax加载到一个div容器中：http://jsbin.com/ubitat/1/edit

- uv_man