Contact form - ajax, wp_mail

时间:2014-10-11 作者:user668499

我正在尝试使用jQuery创建一个简单的联系人表单来验证表单,并使用AJAX将其传递给PHP和WPwp_mail() 发送它。

我有这样一个简单的表单。

    <form role="form">
        <div class="form-group">
            <label class="">Name</label>
            <input type="text" id="name" class="form-control" name" />
        </div>

        <div class="form-group">
            <label class="">Email</label>
            <input type="text" id="email" class="form-control" name="email" />
        </div>

        <?php wp_nonce_field( \'atex_php\', \'atex_nonce\' ); ?>

        <button class="submit">Submit</button>

    </form>
用于验证输入并发送到PHP的jQuery函数:

//IsEmail and fadeOut functions aren\'t shown

    $atj(function(){
      $atj(\'submit\').click(function(e) {
        e.preventDefault();

        if(verfiyFields()) {

          $atj.post({
            data : {
              action : "request",
              firstName : $atj("#name").val(), 
              email : $atj("#email").val(), 
            }
          })
        }
      });
    })

    //Verfiy 
    function verfiyFields() {
      var flag = true;
      var name =  $atj(\'#name\');
      var email = $atj(\'#email\');

      if(name.val().indexOf(\' \') === -1 ){
        name.parent().prepend(\'<p class="form-error">Please enter name, first space last</p>\');
        fadeOut();
        flag = false;
      }
      if(!IsEmail(email.val())){
        email.parent().prepend(\'<p class="form-error">Please enter valid email address</p>\');
        fadeOut();
        flag = false;
      }
      return flag;
    }   
以及functions.php:

    add_action( \'wp_ajax_nopriv_request\', \'my_action_callback\' );
    function my_action_callback() {

        if ( isset( $_POST[\'atex_nonce\'] ) && wp_verify_nonce( $_POST[\'atex_nonce\'], \'atex_php\' ) ) {
            $name = $_POST[\'firstName\'];
            $email = $_POST[\'email\'];

            $send_to = [email protected];

            $subject = \'Request from\'. $name;

            $success = wp_mail($send_to, $subject, $message);

            if($success){
                return true;
            }else{
                return false;
            }

        }   
    }
我得到一个404 Not Found 对于[object%20Object] 单击提交时,在chrome开发工具的网络选项卡中。

我怎样才能让它工作

2 个回复
SO网友:Rarst

通过快速查看代码,您似乎忽略了您提交请求的位置。默认情况下,它只是当前页面,通常不具备接收请求的能力。

因为您正在使用wp_ajax_ 您需要将请求指向的钩子admin-ajax.php 端点。在管理端,URL在中提供ajaxurl JS变量,在前端,您需要自己将其提供给代码。

SO网友:Julien Klepatch

实际上,您忘了提到请求的目的地,而且还缺少ajaxurl(因为您使用的是wp\\U ajax)。

另一个更简单的解决方案是创建一个php文件来处理请求(例如:process request.php),然后在提交请求之前在ajax对象中指定该文件的url。此解决方案不太“符合WordPress”,但更容易实现。

结束

相关推荐

来自jQuery AJAX的WP API删除请求

我正在使用rest json API插件http://wp-api.org/ 创建一个小应用程序。我试图用jquery ajax删除一个自定义的帖子条目,但缺少一些东西,下面是我的代码:... //make the request var dataArray = {}; var urlRequest = WP_API_Settings.root+\"/posts/\"+postID; var typeRequest = \'D