刷新PHP页面的一部分，无需刷新整个页面 [英] Reload a part of php page without refreshing whole page
问题描述
我使用的Word preSS作为内容管理系统和我的模板与中类股利，其中包含一个下拉列表。我的目标是让在AJAX方法，该droplist和查询后的价值与该值，然后重新装入刚中 DIV用ajax，为获得更清晰这里是标记：
＆LT;选择＆GT;
＆LT;期权价值=1＆GT;项目1＆LT; /选项＆GT;
＆LT;期权价值=2＆GT;项目2'; /选项＆GT;
＆LT;期权价值=3＆GT;项目第3版; /选项＆GT;
＆LT;期权价值=4＆GT;项目4℃/选项＆GT;
＆LT; /选择＆GT;
------------------
＆LT; DIV CLASS =内容＆GT;
＆LT; PHP
$ ARGS =阵列（
meta_query=＆GT;阵列（
阵列（
'键'=＆GT; 元，
'值'=＆GT; $ select_value'，
）
）
）;
query_posts（$参数）;
？＆GT;
？＆LT; PHP的，如果（have_posts（））：而（have_posts（））：the_post（）; ？＆GT;
＆LT; PHP the_content（）; ？＆GT;
＆LT; PHP ENDWHILE;其他：＆GT;
＆LT; P＆GT;对不起，没有后该值发现＆LT; / P＆GT;
＆LT; PHP ENDIF; ？＆GT;
我觉得样品code是明确的，但我想这样做的过程：
用户选择下拉列表中的项目 - ＆GT;获得选择的价值 - ＆GT;把它放在$ select_value - ＆GT;运行查询 - ＆GT;显示DIV盒不使用重新加载整个页面的ajax ...
有人可以帮助我走出书面方式呢？
＆LT;选择一个id =选择，下拉＆GT;
＆LT;期权价值=1＆GT;项目1＆LT; /选项＆GT;
＆LT;期权价值=2＆GT;项目2'; /选项＆GT;
＆LT;期权价值=3＆GT;项目第3版; /选项＆GT;
＆LT;期权价值=4＆GT;项目4℃/选项＆GT;
＆LT; /选择＆GT;
有关此实现，你应该有管理员阿贾克斯的话preSS知识。
管理阿贾克斯： 在 的header.php
＆LT;脚本类型=文/ JavaScript的＆GT;
VAR ajax_url ='＆LT;？PHP的回声ADMIN_URL（管理-ajax.php'）; ？＆GT;';
＆LT; / SCRIPT＆GT;
在你自定义的js文件
我-custom.js ，在排队的js文件
jQuery的（文件）。就绪（函数（）{
jQuery的（身体）。在（'变'，'＃选择，下拉'，函数（）{
VAR selected_item = jQuery的（本）.VAL（）;
jQuery.ajax（{
键入：POST，
网址：ajax_url
数据： {
动作：load_posts，
selected_item：selected_item，
}，
成功：函数（RES）{
执行console.log（RES）;
//追加结果在前端
jQuery的（'盒子'）HTML（RES）。
}，
}）
}）
}）;
在您的 function.php
函数_boom_load_posts（）{
//在这里得到您的结果按选定的选项
如果（！空（$ _ POST ['selected_item']））{
$ selected_item = $ _ POST ['selected_item'];
$输出='';
//的code按selected_item，结果存储在$输出休息
$ ARGS =阵列（
meta_query=＆GT;阵列（
阵列（
'键'=＆GT; 元，
'值'=＆GT; $ select_value'，
）
）
）;
query_posts（$参数）;
如果（have_posts（））：而（have_posts（））：the_post（）;
。$输出= get_the_content（）;
ENDWHILE;其他：
$输出=＆LT; P＆GT;对不起，没有后该值发现＆LT; / P＆gt;中
ENDIF;
回声$输出; //你在这里产生
死亡（1）;
}
}
add_action（'wp_ajax_load_posts'，'_dot1_load_posts'）;
add_action（'wp_ajax_no_priv_load_posts'，'_dot1_load_posts'）;
进行必要的更改，因为我不能发布整个code对你来说，做一些努力和上面的code将有助于你得到一个想法，它是如何去工作。
i'm using Wordpress as content management system and my template has a div with box class, and contains a dropdown list . my goal is getting the value of this droplist and query post in ajax method with this value,then reload just box div using ajax , for getting more clear here is markup :
<select>
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
<option value="4">Item 4</option>
</select>
------------------
<div class="content">
<?php
$args = array(
"meta_query" => array(
array(
'key' => 'meta',
'value' => '$select_value',
)
)
);
query_posts( $args );
?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; else: ?>
<p>sorry no post found with this value.</p>
<?php endif; ?>
i think sample code is clear , but i want to do this processes:
user select an item in dropdown list --> get select value --> put it in $select_value --> run query --> show the div box without reloading entire page using ajax...
Can someone help me out writting this?
<select id="select-dropdown">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
<option value="4">Item 4</option>
</select>
For this to achieve you should have knowledge of Admin Ajax in wordpress.
Admin Ajax: in your header.php
<script type="text/javascript">
var ajax_url = '<?php echo admin_url('admin-ajax.php'); ?>';
</script>
in you custom js file
my-custom.js, enqueue the js file
jQuery(document).ready(function(){
jQuery(body).on('change','#select-dropdown', function(){
var selected_item = jQuery(this).val();
jQuery.ajax({
type: "POST",
url: "ajax_url",
data: {
action: 'load_posts',
selected_item: selected_item,
},
success: function(res){
console.log(res);
//append the result in frontend
jQuery('.box').html(res);
},
})
})
});
In your function.php
function _boom_load_posts(){
//get your results here as per selected option
if(!empty($_POST['selected_item'])){
$selected_item = $_POST['selected_item'];
$output = '';
//rest of the code as per selected_item, store result in $output
$args = array(
"meta_query" => array(
array(
'key' => 'meta',
'value' => '$select_value',
)
)
);
query_posts( $args );
if ( have_posts() ) : while ( have_posts() ) : the_post();
$output .= get_the_content();
endwhile; else:
$output .= "<p>sorry no post found with this value.</p>"
endif;
echo $output;//you result here
die(1);
}
}
add_action('wp_ajax_load_posts', '_dot1_load_posts');
add_action('wp_ajax_no_priv_load_posts', '_dot1_load_posts');
make the required changes, as I can't post the whole code for you, make some efforts and the above code will help you get an idea that how it's going to work.
这篇关于刷新PHP页面的一部分，无需刷新整个页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
