如何将WordPress心跳链接到AJAX表单

时间：2019-04-12 作者：markb

我有一张表格$_POST是一个输入值，以及将数据保存到数据库的用户ID：

// frontend form 
<form id="form">
    <input type="radio" name="location" id="name1" value="1">
    <label for="name1">Label 1</label>

    <input type="radio" name="location" id="name2" value="2">
    <label for="name2">Label 2</label>

    <input type="radio" name="location" id="name3" value="3">
    <label for="name3">Label 3</label>

    <input type="hidden" name="userid" value="{userid}">
</form>     


// footer script
<script>
$(function() {
    $( "#form" ).change(function(a) {
        a.preventDefault();
        var formdata = new FormData($(this)[0]);

        $.ajax({
            method:         "POST",
            data:           formdata,
            contentType:    false,
            processData:    false
        });
    });
});
</script>


// validation snippet
<?php
    $location = isset( $_POST[\'location\'] ) ? $_POST[\'location\'] : \'\';
    $userID   = isset( $_POST[\'userid\']   ) ? $_POST[\'userid\']   : \'\';
    update_user_meta( $userID, \'location_current\',  $location );
?>

当用户从桌面设置无线电位置时，它会将表单发送到服务器并保存。

每个用户还拥有一个没有input 但会呼应出位置值。

目前，我的平板电脑每5分钟刷新一次，但我希望它能更有力地推动WP心跳。

我尝试使用以下示例：https://gist.github.com/strangerstudios/5888123

但我不确定data[\'client\'] = \'marco\'; 是data[\'client\'] = \'<?= $_POST[\'location\']; ?>\'; 每次打印一次，页面加载或位置更改后不刷新。

2 个回复

最合适的回答,由SO网友:Antti Koskinen 整理而成

Saving data

基于Heartbeat API, 您可以在上向发送的心跳信号添加自定义数据heartbeat-send js中的事件。这将取代代码示例中的ajax函数。

jQuery( document ).on( \'heartbeat-send\', function ( event, data ) {
  // Grab the required form data
  data.location = jQuery(\'input[name="location"]:checked\').val();
  data.userid = jQuery(\'input[name="userid"]\').val();
});

然后可以使用PHP中的数据hearbeat_recieved 滤器还有heartbeat_nopriv_received 筛选无权限环境。

add_filter( \'heartbeat_received\', \'myplugin_save_location_on_heartbeat\', 10, 2 );
function myplugin_save_location_on_heartbeat( $response, $data ) {
  // data required
  if ( empty( $data[\'location\'] ) || empty( $data[\'userid\'] ) ) {
    return $response;
  }
  // validate
  if ( ! is_numeric( $data[\'location\'] ) || ! is_numeric( $data[\'userid\'] ) ) {
    return $response;
  }
  // sanitize
  $location = absint( $data[\'location\'] );
  $userID = absint( $data[\'userid\'] );
  // update
  update_user_meta( $userID, \'location_current\',  $location );
  // optional response
  $send_data_back = true;
  if ( $send_data_back ) {
    $response[\'location\'] = $location;
    $response[\'userid\'] = $userID;
  }
  // send response
  return $response;
}

您可以访问数据（来自hearbeat_recieved) 再次打开heartbeat-tick js中的事件，

jQuery( document ).on( \'heartbeat-tick\', function ( event, data ) {
  // Check for our data, and use it.
  if ( ! data.location || ! data.userid ) {
    return;
  }
  // use the response as needed
  console.log("location: " + data.location);
  console.log("user: " + data.userid);
});

Get data

通过一些调整，您可以只获取位置数据，而不是保存它。

首先使用发送用户idheartbeat-send 在js中，

jQuery( document ).on( \'heartbeat-send\', function ( event, data ) {
  data.userid = jQuery(\'input[name="userid"]\').val();
});

然后在上用PHP中的当前位置用户meta进行响应hearbeat_recieved,

add_filter( \'heartbeat_received\', \'myplugin_get_location_on_heartbeat\', 10, 2 );
function myplugin_get_location_on_heartbeat( $response, $data ) {
  // data required
  if ( empty( $data[\'userid\'] ) ) {
    return $response;
  }
  // validate
  if ( ! is_numeric( $data[\'userid\'] ) ) {
    return $response;
  }
  // sanitize
  $userID = absint( $data[\'userid\'] );
  // update
  $location = get_user_meta( $userID, \'location_current\',  true );
  // send response
  return $response[\'location\'] = $location;
}

EDIT 1: 我想你也可以get_current_user_id() 在php响应函数中获取用户id，如果您不想或无法在heartbeat-send 事件

最后，使用上接收的数据更新视图heartbeat-tick 在js中，

jQuery( document ).on( \'heartbeat-tick\', function ( event, data ) {
  // Check for our data, and use it.
  if ( ! data.location ) {
    return;
  }
  // if using radio buttons
  jQuery(\'input[name="location"][value=\'"+data.location+"\']\').prop(\'checked\', true);
  // if you want to show result in somewhere else
  jQuery(\'#location-output-element\').text(data.location);
});

我希望这有助于回答您的问题。

SO网友:Ashish Yadav

要使用HTTP方法发送值，页面必须提交数据。只有页面刷新不起作用。您的页面必须发送带有数据位置的post请求，并且您正在使用ajax发送表单数据。

在API中data[\'client\'] = \'marco\'; 您可以使用从ajax请求发送的自己的数据对象。

data[\'client\'] = your formdata;

或者，您可以使用与上述相同的PHP代码：

data[\'client\'] = \'<?php echo $_POST[\'location\']; ?>\'; // make sure you validate data first.

如果这没有帮助，请展示API的完整实现和ajax数据的使用情况。

小码农CODE

如何将WordPress心跳链接到AJAX表单

相关推荐

使用JQuery插件单击按钮即可打开JQuery模式窗口