通过 ajax 更新 WordPress JSON 数据

Question

我正在使用 WP Rest API 插件和 ACF to REST API 插件以及高级自定义字段。我有一个中继器设置有 2 个复选框和一个文本字段。我可以通过提交按钮更新数据库中的复选框，但希望能够通过 ajax 进行更新，因此当用户更改复选框时，它会在数据库中更新。我觉得我错过了一些基本的改变，但什么也没发生。我没有收到任何错误，但数据库未更新。当我 console.log 数据时，我看到那里的一切。这是我第一次去 ajax，我觉得我真的很接近！

HTML:

<form id="todo-form">
 <div class="todos-list"></div>
</form>
<script>
  var post_id = '<?php echo the_ID(); ?>';
</script>

jQuery:

var ajaxURL = 'http://'+window.location.host+'/wp-json/wp/v2/client/'+post_id;
$.getJSON(ajaxURL, function(data) {
    console.log(data);
    var output = '<ul class="todo-list">;
    $.each(data.acf.todo_list, function(key, val){
        if(data.acf.todo_list[key].todo_checkbox == true)
            checked = 'checked';
        } else {
            checked = '';
        }
        output += '<li>';
        output += '<input type="checkbox" class="todo-checkbox check" name="fields[todo_list]['+ key +'][todo_checkbox]" value="1" '+checked+' />';
        output += '<input type="checkbox" class="todo-checkbox hide" name="fields[todo_list]['+ key +'][todo_checkbox]" value="0" />';
        output += '<textarea name="fields[todo_list]['+ key +'][todo_item]">'+ data.acf.todo_list[key].todo_item +'</textarea>';
        output += '</li>';

    });
    output += '</tbody></table>';
    $('.todos-list').html(output);

 //AJAX
    var form = "#todo-form";
    $(form).change(function(event) {
        event.preventDefault();
        var formData = JSON.stringify(data.acf.todo_list);
         $.ajax({
               type:'POST',
               url: ajaxURL,
               dataType : 'json',
               data: formData,
               beforeSend: function ( xhr ) {
                    xhr.setRequestHeader( 'X-WP-Nonce', WP_API_Settings.nonce );
                },
               success: function(){
                  console.log('success');
              },
              error: function(){
                  console.log('error');
              },
         });
    });

Answer 1

默认情况下，WordPress REST API 不处理自定义元数据，您必须创建一个自定义字段并附加函数来保存/获取数据。你设置好了吗？

如果没有，请查看 docs on extending

Answer 2

我能够通过不使用 $.getJSON() 和 the plugin issues thread 的一点帮助来让它工作。

更新了以下代码：

HTML & PHP

<form id="todo-form">
  <?php
    $repeater = get_field( 'todo_list' );
      if ( ! $repeater ) {
        $repeater = array(
            array(
                'todo_checkbox' => '',
                'todo_item'  => '',
                )
            );
        }
    ?>              
    <?php foreach ( $repeater as $k => $v ) : ?>
      <?php $checked = $v['todo_checkbox']; ?>
      <li>
        <input type="checkbox" class="todo-checkbox check" name="fields[todo_list][<?php echo absint( $k ); ?>][todo_checkbox]" value="1" <?php checked( $checked, true ); ?> />
        <input type="checkbox" class="todo-checkbox hide" name="fields[todo_list][<?php echo absint( $k ); ?>][todo_checkbox]" value="0"    <?php checked( $checked, false ); ?> />
        <p name="fields[todo_list][<?php echo absint( $k ); ?>][todo_item]" class="todo-item"><?php echo esc_attr( $v['todo_item'] ); ?></p>
     </li>
   <?php endforeach; ?>         
</form>

Jquery

var form = "#todo-form";
var wpajax = WP_API_Settings.root + 'wp/v2/client/'+post_id;
$(form).change(function(event) {
  event.preventDefault();
  var checkbox = $('.todo-checkbox');
  var formData = checkbox.serialize();
  $.ajax({
    type:'POST',
    url: wpajax,
    dataType : 'json',
    beforeSend: function ( xhr ) {
        xhr.setRequestHeader( 'X-WP-Nonce', WP_API_Settings.nonce );
    },
   data: formData,
   success: function(){
      console.log('success!');
  },
  error: function(){
      console.log('error');
  },
 });
 return false;
});

通过 ajax 更新 WordPress JSON 数据

Update WordPress JSON data via ajax

ajax

rest

wordpress

jquery

advanced-custom-fields