Question

我知道HTML中的提交按钮可以提交打开目标页面的表单，但是如何让jQuery ajax调用POST信息到新页面并显示新页面。我提交的信息是通过单击元素（切换一个名为“select”的新类）收集的，然后将这些项中带有新类的标识符添加到字符串中并发布到新页面。此新页面将使用此数据提供上一页中选择的摘要。我目前可以将它发送到一个新的PHP页面，但似乎是ajax函数只是保留在当前页面上（这对于某些事情来说很棒，只是没有这个），而不是重定向到新页面。我该怎么做呢？

这是脚本部分：

//onload function
$(function() {

//toggles items to mark them for purchase
//add event handler for selecting items
$(".line").click(function() {
    //get the lines item number
    var item = $(this).toggleClass("select").attr("name");
    });

$('#process').click(function() {
    var items = [];

    //place selected numbers in a string    
    $('.line.select').each(function(index){
            items.push($(this).attr('name'));
            });

    $.ajax({
            type: 'POST',
            url:  'additem.php',
            data: 'items='+items,
            success: function(){
                $('#menu').hide(function(){
                    $('#success').fadeIn();             
                    });
                }   
            });
    });
    return false;
});

任何指针都会很棒!!感谢

修改感谢您的帮助，我已将脚本更改为：

//onload function
    $(function() {

    //toggles items to mark them for purchase
    //add event handler for selecting items
    $(".line").click(function() {
        //get the lines item number
        var item = $(this).toggleClass("select").attr("name");
        });    

$('#process').click(function() {
    var items = [];

    //place selected numbers in a string    
    $('.line.select').each(function(index){
            items.push($(this).attr('name'));
            });
    $('#items').attr('value',items);
    $('#form').submit()

    });
    return false;
});

Answer 1

首先，我不鼓励在这里使用ajax，因为你没有将它用于它的目的，并且你强迫它重新加载。

你可以在ajax的成功中做到这样的事情

success: function(){
           window.location = "the new url you wanted to load";       
         }

修改

为什么不将具有表单操作属性的普通帖子设置为您要发布到的页面，并且可以访问该发布页面中表单的所有变量，或者您可以在数组中连接或存储所有值和将此数组存储在隐藏变量中，并在发布的脚本中访问此变量。

Answer 2

根据定义，Ajax帖子不会对页面加载。但是你可以在你的success处理程序中做任何你想做的事情。所以只需在那里更改文档位置：

success: function(){
    $('#menu').hide(function(){
        $('#success').fadeIn();             
    });

    window.location = 'http://www.example.com/elsewhere';
}

POST通常会返回HTTP 301或302重定向。在这种情况下，您可以从XHR对象获取返回的头信息，该信息将传递给回调函数。

complete: function( xhr ) { 
    // assume we got a redirect; the new URL will be in the Location header
    window.location = xhr.getResponseHeader( 'Location' );
}

如何让jQuery POST功能打开新页面？

2 个答案: