在表单SELECT CHANGE上使用AJAX更新Get_Pages

时间:2012-11-27 作者:sta777

我的页面模板文件(如下)中有以下代码,当与正常表单提交一起使用时,这些代码可以正常工作。

我试图做的是在更改select下拉列表时使用ajax(无页面刷新)更新get\\u pages变量。我可以看到firebug控制台中返回的数据,但似乎无法将其返回到php代码/变量。

任何帮助都将不胜感激,s。

<?php 
if ( isset($_POST[\'sortables\']) ) :
    $sortables = $_POST[\'sortables\'];
else : 
    $sortables = \'menu_order\';
endif;
if ( isset($_POST[\'ascdesc\']) ) :
    $ascdesc = $_POST[\'ascdesc\'];
else : 
    $ascdesc = \'asc\';
endif;                              
?>                                    

<script type="text/javascript">
jQuery(document).ready(function($) {                            
    $("#sort, #ascdesc").change(function() {
        var $form = $("#myForm");
        var dataString = $form.serialize();
        $.ajax({
            type: "POST",
            url: "<?php the_permalink(); ?>",
            data: dataString,                                                                       
            success: function() {
                console.log(dataString);
                                    }
            });                                 
        });                 
});
</script>

<?php $thispage=$post->ID; ?>
<section id="list-boxes">   
    <form action="<?php the_permalink(); ?>" method="post" id="myForm" style="margin:5px 0 15px;">
        <select name="sortables" id="sortables">  
            <option value="menu_order"<?php if ($_POST[\'sortables\'] == \'menu_order\') echo \'selected="selected"\'; ?>>Sort by Menu Order</option>                       
            <option value="post_title"<?php if ($_POST[\'sortables\'] == \'post_title\') echo \'selected="selected"\'; ?>>Sort by Title (Alphabetically)</option>                                        
            <option value="post_date"<?php if ($_POST[\'sortables\'] == \'post_date\') echo \'selected="selected"\'; ?>>Sort by Date Created</option>    
            <option value="post_modified"<?php if ($_POST[\'sortables\'] == \'post_modified\') echo \'selected="selected"\'; ?>>Sort by Date Modified</option>            
        </select>    
        <select name="ascdesc" id="ascdesc">                        
            <option value="asc"<?php if ($_POST[\'ascdesc\'] == \'asc\') echo \'selected="selected"\'; ?>>Ascending</option>                        
            <option value="desc"<?php if ($_POST[\'ascdesc\'] == \'desc\') echo \'selected="selected"\'; ?>>Descending</option>                        
        </select>                 
        <button type="submit" id="sort-submit">Sort</button>       
    </form>                            

    <?php $pages = get_pages(\'child_of=\'.$thispage.\'&sort_column=\'.$sortables.\'&sort_order=\'.$ascdesc.\'&parent=\'.$thispage.\'&number=2\'); $count = 0; foreach($pages as $page) : $content = $page->post_excerpt; $link = get_page_link($page->ID); ?>

1 个回复
SO网友:s_ha_dum

您的Javascript正在加载整个页面,因为您正在向the_permalink. 如果要这样做,只需重新加载页面。

首先,您应该使用AJAX API. 有几个步骤,但并不难。请参阅Codex以开始。

在回调中,您只想运行获取$pages 变量,然后是格式化结果所需的任何处理。以字符串形式返回格式化的内容。然后使用jQuery将页面的适当部分替换为新内容。有several jQuery functions for doing that.

结束

相关推荐

如何使用jQuery AJAX导入/上传文件?

我一直遇到在AJAX中添加文件的问题,以便服务器AJAX功能可以处理数据。如何使$\\u文件的传递与默认操作(内置到表单元素中)相同?HTML Form<form id=\"frmImport\" name=\"frmImport\" method=\"post\" enctype=\"multipart/form-data\" > <input id=\"file_import\" name=\"importData\" type=\"file\" />