Question

我想在新页面上显示ajax请求的结果，而不是在进行ajax调用的页面上显示。本质上，我有一个成员资格目录页面。当用户单击该页面上的成员ID单元格时，Ajax调用会将ID发送到服务器，并完成HTML表以显示该成员概要文件。如果在成员资格目录页面下方添加<div>元素，则可以使配置文件信息表显示在成员资格目录表下方。但是我希望个人资料表显示在不同的页面上。

JavaScript：

$jq.ajax({
    url : ajax_mmmp.ajax_url,
    type : 'post',
    data : {
        action: 'mmmp_profile_member_id_callback',
        mem_id : member_id
    },
    success:function(data) {
        // This outputs the result of the ajax request
        console.log(data);
        // Return response to client side
            alert("Submit Success");
            $jq('#display_profile').html( data );

            return false;
    },
    error: function(errorThrown){
        console.log(errorThrown);
    }
}); // End of AJAX function

但是，当我使用相同的<div>元素创建一个新页面并尝试在ajax调用之前打开该页面时，结果不会显示。

var mem_profile = "http://localhost:81/wordpress/view-member-profile"
window.open (mem_profile,'_self',false)

$jq.ajax({
    url : ajax_mmmp.ajax_url,
    type : 'post',
    data : {
        action: 'mmmp_profile_member_id_callback',
        mem_id : member_id
    },
    success:function(data) {
        // This outputs the result of the ajax request
        console.log(data);
        // Return response to client side
            alert("Submit Success");
            $jq('#display_profile').html( data );

            return false;
    },
    error: function(errorThrown){
        console.log(errorThrown);
    }
}); // End of AJAX function

Answer 1

撇开采用这种方法是否是一个好主意的问题，您的问题的答案是肯定的。您可以打开一个新窗口，然后将结果HTML写入其中：

// open a new window with no url and a title. check the docs for other args to open()
let win = window.open('','My New Window');
// write some HTML to that window
win.document.write('<table><tr><th>test</th></tr></table>');

Answer 2

经过进一步研究，我快到了。我目前没有要提交的“表格”。用户只需单击包含成员ID号的表格单元格。我想将该值“提交”为另一页上显示成员资格配置文件的输入。我成功地临时添加了一个HTML表单，该表单可以在输入字段中键入成员ID时按预期工作。因此，我决定需要在JS中创建一个隐藏的表单，该表单使用被单击的ID值。看来我无法在评论中插入修改后的代码，因此我选择了使用更新的代码来“回答”原始问题。

会员目录页面中包含的工作HTML表单：

$site_url = site_url();
$location = $site_url . "/view-member-profile";

?>

<form action="<?php echo $location;?>" method="post">
<input type="text" class="input_member_id" id="input_member_id" name="Member_ID">
<input type="submit" id="submit_member_id" name="submit_member_id" value="Submit">
</form>

我试图在JS中创建类似的隐藏表单：

var $jq = jQuery.noConflict();

$jq(document).ready(function(){

// Add listener for Member ID click in member directory

$jq("#mem_dir").delegate(".member_id", "click", function() {
    var mem_id = $jq(this).text();
    var mem_id = mem_id.trim();
    alert ("ID is: " + mem_id);

    var site_url = document.location.origin + '/wordpress';
    var form_location = site_url + '/view-member-profile';
    alert ("Submit to location is: " + form_location);

    var form = $jq('<form method="post" class="js:hidden">').attr('action', form_location);
    //var input = $jq('<input type="hidden"'>).attr('value', mem_id );
    //form.append(input);
    //$jq('body').append(form);
    form.submit();

}); // End of Click Member ID Listener

}); // End of Main Document Ready Function

我在JS文件中遇到的问题是将mem_id值插入输入表单。 JS文件正确打开了新的“查看成员个人资料”页面。（请注意form.submit之前的// 3行）。取消注释后，“个人资料”页面将打开，但表值为空（即mem_id值未传递到该页面）。

谢谢您的任何建议。如果应该将此作为新问题列出，请告诉我。

在新页面上显示ajax结果

2 个答案: