[英]How to cache Ajax Response in WordPress?
我正在使用兩個div。 在第一個div中,所有WordPress用戶都顯示在頁面上,並帶有“ ADD”按鈕選項。 通過添加用戶,他們將使用Ajax添加到第二個div。 但是我想緩存第二個div中顯示的結果。 用戶模板的代碼如下-
<?php
/*
Template Name: Users
*/
?>
<style>
.container{
width: 800px;
}
.left{
float:left;
width: 300px;
background: ##66CDAA;
border-right: thick-solid #fff;
}
.right{
overflow: hidden;
width: 300px;
background: powderblue;
}
</style>
<?php
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<div class="container">
<div class="left" id="xyz">
<table>
<tr>
<th>Name</th>
<th>Gravatar Image</th>
<th>Add to Div</th>
</tr>
<?php
$sql ="SELECT * FROM wp_users";
$results = $wpdb->get_results($sql) or die(mysql_error());
foreach( $results as $result ){ ?>
<tr>
<td id="<?php echo $result->ID; ?>">
<?php echo $result->display_name; ?>
</td>
<td>
<php echo get_avatar( $result->user_email, 42); ?>
</td>
<td>
<input type="button" class="submit" data-id="<?php echo $result->ID; ?>" data-name="<?php echo $result->display_name; ?>" data_image="<?php echo get_avatar_url($result->user_email, 42); ?>" value="ADD"><p style="display:none;">Added</p>
</td>
</tr>
<?php
}
?>
</table>
</div>
<div class="right">
<p>Added Users</p>
<table>
<tr>
<th>Name<th>
<th>Image</th>
</tr>
</table>
</div>
</div>
</main>
</div>
<?php get_footer(); ?>
現在,在ajax.js中,我有以下代碼:
(function($) {
$(document).ready(function() {
$(".submit").on("click", function(e){
e.preventDefault();
$(this).css("display", "none");
$(this).closest("td").find("p").css("display", "block");
var id = $(this).data('id');
var name = $(this).data('name);
var image = $(this).data('image');
$.ajax({
url: ajax_url,
method: 'post',
data: { action: 'work', id:id, name: name, image:image},
success: function(response){
var test = jQuery.parseJSON(response);
name1 = test.myname;
url1: test.url;
id: test.id;
$('.table').append('<tr id=" ' + id1+ ' "><td>' + name1 + '</td><br><td><img src=" ' + url1 + ' "></td><td><input type="button" value="Cancel" class="cancel"></td></tr>');
$('.cancel').on("click", function(e){
e.preventDefault();
var id2 =$(this).closest.("tr").attr('id');
$('td[id=' + id2 + ']').closest('tr').find('p').css('display', 'none');
$('td[id=' + id2 + ']').closest('tr').find('input').css('display', 'block');
$(this).closest("tr").hide();
})
}
})
})
})
})(jQuery);
現在,在ajax.php中,我具有如下功能:
function work() {
$id = $_POST['id'];
$name = $_POST['name'];
$image_url = $_POST['image'];
$myObj->myname = $name;
$myObj->url = $image_url;
$myObj->id = $id;
$myJSON = json_encode($myObj);
echo $myJSON;
wp_die();
}
我想使用Ajax將用戶添加到第二個div,也想將結果緩存一段時間。 另外,建議是否有更好的方法隱藏“添加”按鈕,或者是否可以應用條件檢查是否已添加特定用戶,不應添加兩次。 但是我的主要問題是如何緩存Ajax結果。
通過下面的代碼片段可能會對您有所幫助
// ask the browser to cache this response
$expires = 60 * 15; // 15 minutes
header('Pragma: public');
header('Cache-Control: maxage=' . $expires);
header('Expires: ' . gmdate('D, d M Y H:i:s', time() + $expires) . ' GMT');
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.