通過ajax更新WordPress JSON數據

我使用WP Rest API插件和ACF to REST API插件以及高級自定義字段。我有一個轉發器設置了2個複選框和一個文本框。我可以通過提交按鈕更新數據庫中的複選框，但希望能夠通過ajax進行更新，因此當用戶更改複選框時，它將在數據庫中更新。我覺得我錯過了一些基本的改變，但沒有發生。我沒有收到任何錯誤，但數據庫沒有更新。當我console.log數據時，我看到了所有的東西。這是我第一次去阿賈克斯，我覺得我真的很接近！通過ajax更新WordPress JSON數據

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'); 
       }, 
     }); 
    });

來源

2016-02-09 Jason

我能得到它不使用$ .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; 
});

來源

2016-02-11 01:16:45 Jason

默認情況下，WordPress的REST API不處理自定義元，你必須創建一個自定義字段和附加功能，以節省/獲取數據。你有沒有設置？

如果查不出來的docs on extending

來源

2016-02-09 16:15:23

的ACF以REST API插件做到這一點對我來說。端點是可讀和可編輯的（https://github.com/airesvsg/acf-to-rest-api）。我一直傾向於在我的ajax中沒有做正確的事情。 – Jason

通過ajax更新WordPress JSON數據

回答

相關問題