表單提交之前，一般我們要在前端對(duì)表單的輸入值做一些基本驗(yàn)證，以避免惡意提交，并提高安全性。我們可以通過兩個(gè) jQuery 插件實(shí)現(xiàn)這兩個(gè)功能：Malsup’s AjaxForm?和?Bassistance’s Form Validation。

/**
 * 通用Ajax表單處理
 */
jQuery(document).ready(function($){
 $('.simpleajaxform').each(function(){
  $(this).attr('method', 'post');
  var target = $(this).attr('target');
  var func   = $(this).attr('function');
  options    = {};
  if( target || func ){
   if( target ) $('#'+target).html('').hide();
   options = {
    success:      simpleajaxform_success, //提交成功時(shí)的功能
    beforeSubmit: simpleajaxform_submit //提交前的功能
   };
  }

  $(this).ajaxForm(options);
 });
});

/**
 * 提交時(shí): 清除上一個(gè)更新并告訴用戶，我們正在更新數(shù)據(jù)
 */
function simpleajaxform_submit(formData, jqForm, options) {
 if( !jqForm.valid() ) return false; //如果表單沒有驗(yàn)證通過，不能提交
 target = jqForm.attr('target');

 if( target )
  jQuery('#'+target).html('更新中, 請稍候...').removeClass('updated').addClass('updating').show();
 return true;
}

/**
 * 提交成功: 在目標(biāo)div中顯示更新成功的信息
 */
function simpleajaxform_success(responseText, statusText, xhr, jQForm){
 if( jQForm === undefined )
  jQForm = xhr;
 if( jQForm === undefined ){
  c-alert('不能正確處理響應(yīng)');
  return;
 }
 target = jQForm.attr('target');
 if( target )
  jQuery('#'+target).removeClass('updating').addClass('updated').html(responseText);

 hide = jQForm.attr('hide');
 if( hide )
  jQuery('#'+hide).hide();

 handler = jQForm.attr('function');
 if( handler )
  eval( handler+'(responseText, jQForm)' );
}

創(chuàng)建表單的時(shí)候，我們需要把 WordPress 后端注冊的服務(wù)器事件包含進(jìn)去，這樣 WordPress 才能識(shí)別需要用后臺(tái)的哪個(gè)功能處理提交的表單數(shù)據(jù)。

<form class="simpleajaxform" action="<?php echo admin_url('admin-ajax.php');?>" target="targetdiv">
<input type="hidden" name="action" value="my_wp_action" /> //這里的值是WordPress后端的服務(wù)器動(dòng)作
<input class="required" type="text" name="message" value="" />
<input type="submit" name="submit" value="DO STUFF" />
</form>