Question

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

问题：

如果我提交表单，它会将页面重定向到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。如果它没有定义谷歌它。

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

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（文档）.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自定义数据库问题

1 个答案: