每个AJAX流程都有4个基本步骤：

异步向服务器发送请求处理服务器端任务从服务器检索响应根据服务器的响应更改客户端创建对服务器的请求有多种方法。这可以通过jQuery和JavaScript来完成。然而，由于jQuery使它变得更容易，我将使用它。jQuery提供了3种不同的功能，具有类似的功能。这些功能包括：

• $.ajax(); - 支持POST和GET方法$.get(); - 简单获取方法$.post(); - 简单的POST方法由于我不确定您将使用哪种方法，我将继续$.ajax();. 我将向服务器发布一个示例代码，然后根据服务器的响应显示一条消息。让我们声明一个处理提交的jQuery函数。

  此函数将向服务器发送用户名。

  function sendMyForm( string ) {
      // Begin an Ajax request
      $.ajax({
          type: \'POST\',                   // Submission method
          url: url_object.url_string + \'/wp-json/darthvader/ajax_submission\', // I will explain this later
          data: { username : string },        // Data to be sent to server
          dataType: \'json\',               // You should set this to JSON if you are going to use the REST api
          beforeSend: function(){         // Let\'s show a message while the request is being processed
              $(\'#status\').html(\'<span>Processing</span>\');
          },
          success: function ( response ) {
              // The Ajax request is successful. This doesn\'t mean the
              // sever was able to do the task, it just means that the
              // server did send a response. So, let\'s check the response
              if( response.success == true ) {
                  $(\'#status\').html(\'<span>Success</span>\');
                  $(\'#message\').html(\'<span>\' + response.message + \'</span>\');
              } else {
                  $(\'#status\').html(\'<span>Failed</span>\');
                  $(\'#message\').html(\'<span>\' + response.message + \'</span>\');
              }
          },
          error: function(){              // The request wasn\'t successful for some reason
              $(\'#status\').html(\'<span>Unknown error.</span>\');
          }
      });
  };
  

  好了，现在我们需要在按钮上绑定一个动作。有很多方法可以做到这一点。例如，阻止表单提交、数据序列化等。我甚至不打算创建表单。

  我将创建一个自定义HTML div来演示我们甚至不需要表单。下面是我们的HTML，看起来像一个表单：

  <div>
      <p id="status"></p>
      <p id="message"></p>
      <input id="my-input" type="text"/>
      <span id="button">This is our button!</span>
  </div>
  

  现在，让我们将一个叮当声动作绑定到我们的按钮，它实际上不是按钮！欺骗了你。

  $(\'#button\').on(\'click\',function(){
      // Get the value of our input box
      var username = $(\'#my-input\').val();
      // Call our Ajax function and pass the username to it
      sendMyForm( string );
  });
  

  好的，现在表单将在用户单击后提交。

  创建处理请求的路由

  因为我已经将数据类型声明为JSON，所以我将使用REST API，默认情况下将内容输出为JSON。

  您可以使用任何您想要的东西，例如管理Ajax，只要这是一种良好的做法，并且不会影响性能或导致安全问题。

  现在让我们注册一个REST路由。

  add_action( \'rest_api_init\',\'my_rest_route\' ); 
  function my_rest_route() {
      register_rest_route( 
          \'darthvader\',   // Base path here
          \'/ajax_submission/\',    // Child path
          array(
              \'methods\' => \'POST\',
              \'callback\' => \'darth_contact_form\'
          ) 
      );
  }
  

  现在是时候享受真正的乐趣了。让我们来处理接收到的数据，好吗？

  function darth_contact_form( \\WP_REST_Request $request ){
      // Get the data that was sent to server
      $data = $request[\'username\'];
      // Check if it\'s empty and send the response
      if( !empty( $data ) ){
          // Remember these from our Ajax call? This is where we set them
          $response[\'status\'] =  true;
          $response[\'message\'] =  \'You have entered a username!\';
      } else{
          $response[\'status\'] =  false;
          $response[\'message\'] =  \'Why didn\\\'t you enter a username?\';
      }
      // Don\'t forget to return the data
      return $response;
  }
  

  最后一次触摸还记得这句话吗？

  url: url_object.url_string
  

  这是我们休息的路线。由于域可能会更改，因此明智的做法是使用wp_localize_script. 为此，我们将所有脚本保存到一个名为script.js 然后排队（&N）；本地化它。

  wp_enqueue_script( \'my-script\', get_template_directory_uri().\'/js/script.js\', array( \'jquery\' ), \'\', true );
  
  $localized = array(
      \'url_string\' => site_url(), // This is where that url_string came from
  );
  wp_localize_script( \'my-script\', \'url_object\', $localized );
  

  现在我们可以访问site_url(); 通过使用url_object.url_string 在我们的剧本中！

  现在就这样了。点击按钮，享受乐趣。