使用 ajax 将数据保存到 wordpress 自定义数据库问题

Question

因为这是我的第一个 wp 插件，想使用 AJAX 让用户将那里的数据（通过表单）保存到插件自定义数据库（是的，它必须是我自己的 table） .

问题：

如果我提交表单，它会将页面重定向到 ajax 处理文件 (save-to-db-ajax.php)，这显然不应该这样做。下面是插件的三部分。

  // admin/includes/form.php

  <form method="post" id="form-settings" action="<?php echo PLUGIN_ADMIN_AJAX_PATH;?>/save-to-db-ajax.php" >  

      <?php wp_nonce_field( 'settings', 'settings_nonce', false );?> 

      <input    name="field-one" type="text"/>
      <input    name="field-two" type="text"/>
      <textarea name="field_three">Hello world</textarea>

      <button name="save-form">Save</button>

  </form>




  // admin/js/admin.js(part of the admin.js file, the rest works)

  $('body').on('submit', '#form-settings', function(e){

      $.ajax({
          type: "post",
          url: $('#form-settings').attr('action'),
          data: $('#form-settings').serialize(),
          beforeSend: function() {
              alert('before')
          },
          success: function(){
              alert('success')
          },
          error: function(){
              alert('error')
          },
      }); 
  });



  // admin/ajax/save-to-db-ajax.php

  global $wpdb;

  $wpdb->update( 'my_plugin_table' ,
      array( 'settings_value' => $_POST[ 'field-one' ] ),
      array( 'settings_name'  => 'field-one'           ),
      array( '%s' , '%s' )
  );

Answer 1

Wordpress ajax 有点不同！您向 ajax 处理程序添加一个操作并使用中央 ajax 处理程序作为 url。在大多数主题中，它是 js var ajaxurl。如果它没有定义 google 它。

注意：我没有检查你的数据库功能

html:

    <form method="post" id="form-settings" action="" >  

      <?php wp_nonce_field( 'settings', 'settings_nonce', false );?> 

      <input    name="field-one" type="text"/>
      <input    name="field-two" type="text"/>
      <textarea name="field_three">Hello world</textarea>

      <button id="submitme" name="save-form">Save</button>

  </form>

jQuery：（如果放在页脚，如果在其他地方换行 jQuery(document).ready(function(){});

  jQuery(document).on('click', '#submitme', function(event){ // use jQuery no conflict methods replace $ with "jQuery"

        event.preventDefault(); // stop post action

      jQuery.ajax({
          type: "POST",
          url: ajaxurl, // or '<?php echo admin_url('admin-ajax.php'); ?>'
          data: {
              'action': 'ajax_form',
              'field-one': jQuery('[field-one]').val()// or combine serialized form with action .... 
          },
          beforeSend: function() {
              alert('before')
          },
          success: function(){
              alert('success')
          },
          error: function(){
              alert('error')
          },
      }); 
  });

Php

function ajax_form(){
      global $wpdb;

      $wpdb->update( 'my_plugin_table' ,
          array( 'settings_value' => $_POST[ 'field-one' ] ),
          array( 'settings_name'  => 'field-one'           ),
          array( '%s' , '%s' )
      );

      //echo something here to return a value...
      exit(); //prevent 0 in the return

}
add_action( 'wp_ajax_ajax_form', 'ajax_form' ); //admin side
add_action( 'wp_ajax_nopriv_ajax_form', 'ajax_form' ); //for frontend

使用 ajax 将数据保存到 wordpress 自定义数据库问题

Saving data with ajax to wordpress custom database issue

ajax

wordpress