0

这是我的 ajax 响应返回的页面。

<!DOCTYPE HTML>
<%@ taglib prefix="s" uri="/struts-tags"%>
<html>
<head>
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
</head>
<body>

    <div id = "div1">
        <h1>HI am a dashboard</h1>
        <h1>HI am a dashboard</h1>
        <h1>HI am a dashboard</h1>
    </div>
</body>
</html>

在我的 ajax 成功代码上，我正在这样做

$('body').on('submit', '#sign-in', function(e) {
    e.preventDefault();

    var data = $(this).serialize();

    var url = $(this).attr('action');
    $.ajax({
        //this is the php file that processes the data and send mail
        url : url,
        type : "POST",
        data : data,
        dataType:"html",
        //Do not cache the page
        cache : false,
        //success
        success : function(data) {
            console.log(data);
            console.log($(data).find('#div1').html());
        }
    });
})

是console.log($(data).find('#div1').html()); 未定义的。而

console.log(data);

返回我之前声明的页面。

更新 发现问题，我的代码中有两个“数据”变量。我已经成功更改了一个，但它仍然返回未定义

$('#submit-login').on('click',function(e){
        $('#hidden-submit-login').click();
})

    $('body').on('submit', '#sign-in', function(e) {
        e.preventDefault();

        var data = $(this).serialize();

        var url = $(this).attr('action');
        $.ajax({
            //this is the php file that processes the data and send mail
            url : url,
            type : "POST",
            data : data,
            dataType:"html",
            //Do not cache the page
            cache : false,
            //success
            success : function(response) {
                console.log($(response).find('#div1').html());
                console.log(response);
                //console.log($((html).find('#div1').html();
            }
        });
    });
4

1 回答 1

1

您在string非 DOM 元素上应用 jQuery 选择器。对象是请求的结果
；response它在您的 DOM 中不存在。

就像; document.getElementById('div1')会回来null的。

您应该在使用它之前创建/附加一个 HTML 元素到 DOM。

如果您要做的是解析<div id="div1">...</div>您发出请求的页面内的块：

首先我建议你去掉所有其他标签（包括<html>,<body>和<head>里面的所有东西<head>）。所以你的文件只包括：

<div id="div1">
    <h1>HI am a dashboard</h1>
    <h1>HI am a dashboard</h1>
    <h1>HI am a dashboard</h1>
</div>

然后在您的 AJAXsuccess()回调中；使用 jQuery DOM 插入方法（在此处选择适合您的方法：inside，outside）：

$.ajax({
    url : url,
    type : "POST",
    data : data,
    dataType: "text",
    cache : false,
    success : function(data) {
        if (data) {
            $('body').append(data); //this will append the html inside the response; at the end bottom of your page's body
            console.log($('#div1').html());
        }
    }
});

现在您已div1在页面正文的底部附加了您的内容，因此可以访问它。

console.log($('#div1').html());

注意：确保您的id div1是唯一的，这样您在进行进一步操作时就不会选择其他现有元素。

于 2013-02-03T08:24:11.400 回答