Question

我的JSP页面中有一个表单。我正在使用Ajax来调用action类。它对我来说很好。我得到的结果是一个包含HTML页面的变量。

这是我的剧本

$(document).ready(function() {

        var form = $('#ComponentForm');

    form.submit(function () {
        $('#saveComponent').html('Loading...').fadeIn();
    $.ajax({
    type: form.attr('method'),
    url: form.attr('action'),
    data: form.serialize(),
    success: function (data) {
    var ajaxResult=data.html().$("#ajaxContent").html();
    alert(ajaxResult);
    $('#actionResult').html(ajaxResult);
    }
    });
return false;
        });
    });

脚本中的

数据获取完整的JSP页面，如下所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Cache-Control" content="no-store"/>
    <meta http-equiv="Pragma" content="no-cache"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="/myapp/images/favicon.ico"/>
    <title>Application Detail | AppFuse</title>

    <link rel="stylesheet" type="text/css" media="all" href="/myapp/styles/lib/bootstrap-2.2.1.min.css" />
    <link rel="stylesheet" type="text/css" media="all" href="/myapp/styles/lib/bootstrap-responsive-2.2.1.min.css" />
    <link rel="stylesheet" type="text/css" media="all" href="/myapp/styles/style.css" />

    <script type="text/javascript" src="/myapp/scripts/script.js"></script>
    <script type="text/javascript" src="/myapp/jquery-ui-1.10.0/tests/jquery-1.9.0.js"></script>
    <script type="text/javascript" src="/myapp/jquery-ui-1.10.0/ui/jquery-ui.js"></script>

<body>
    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container-fluid hometab-header" style="height: 40px;">
                <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="brand liborder" href="/myapp/">AppFuse</a>
        <div class="nav-collapse collapse homepagetabs">
        <ul class="nav menuhover">
            <li class="liborder active"><a href="/myapp/login">Login</a></li>
            <li class="liborder" id="dashboard"><a href="#">Dashboard</a></li>
            <li class="liborder"><a href="#">Reports</a></li>
            <li class="liborder" id="enterprise"><a href="#">Enterprise</a></li>
        </ul>
    </div>

    <div id="ajaxContent" class="container-fluid includestyle">
    <table id="ComponentList" class="table table-condensed table-hover">
<thead>
<tr>
<th class="sortable">
<a href="?d-6712549-s=0&amp;d-6712549-o=2&amp;appKey=6">Component Key</a></th>
<th class="sortable">
<a href="?d-6712549-s=1&amp;d-6712549-o=2&amp;appKey=6">Alternate Id</a></th>
<th class="sortable">
<a href="?d-6712549-s=2&amp;d-6712549-o=2&amp;appKey=6">Client Key</a></th>
<th class="sortable">
<a href="?d-6712549-s=3&amp;d-6712549-o=2&amp;appKey=6">Component Desc</a></th>
<th class="sortable">
<a href="?d-6712549-s=13&amp;d-6712549-o=2&amp;appKey=6">Technology Owner Key</a></th></tr></thead>
<tbody><tr class="empty"><td colspan="14">Nothing found to display.</td></tr></tbody></table>

</div>
</body>
</html>

因此变量数据包含上述字符串。从那里我如何通过 id="ajaxContent" 获得 Div ？我上面尝试的脚本不起作用。

Answer 1

只需使用

$('#actionResult').html(data);

Answer 2

试试：

var ajaxResult= $('<div/>').html(data),  //by convention, should be $ajaxResult instead
    $ajaxContent = ajaxResult.find('#ajaxContent');
//$ajaxContent.html() ...

Answer 3

试试这个.........

var myHtml = $(ajaxResult).find('#actionResult').html();
//alert(myHtml); -- optional, just to verify

Answer 4

这有效吗？

success: function (data) {
    var wantedDatas = $(datas).find('div#ajaxContent').first().html();
}

通过字符串变量中包含的Id获取div内容

4 个答案: