web-dev-qa-db-ja.com

JQueryのAjax URL値を渡す方法

私はWordPressが初めてです。私はheader.phpファイルにこのようなjQueryコードがあります。

jQuery(document).ready(function(){
   jQuery("#wp-submit").click(function(){  
      username=jQuery("#userName").val();
      password=jQuery("#passWord").val();
      jQuery.ajax({
       type: "POST",
       url: "<?php echo "http://" . $_SERVER['HTTP_Host'] . $_SERVER['REQUEST_URI']; ?>",
      data: "name="+username+"&pwd="+password,
       success: function(html){    
      if(html=='true')    {
       jQuery("div#result").css('display', 'inline', 'important');
       jQuery("div#result").html("Login Successful");
       console.log('true');
      }
      else{
       jQuery("div#result").css('display', 'inline', 'important');
       jQuery("div#result").html("Wrong username or password");
      }

       } });
    return false;
  });
});

そしてこれが同じファイル（header.php）の中のphpコードです：

   <?php 
      $uName = $_POST['name'];
      $pWord = md5($_POST['pwd']);
      $results= $wpdb->get_results("select * from wp_users where user_email='".$uName."' and user_pass='".$pWord."'");
      if(count($results)==1)
      {
       echo 'true'; 
      }

      else {
        echo 'false';
      }

サーバーにリクエストを送信できません。404エラーが発生しました。

何が悪いの？

jqueryajax
2
Jay Kapoor

Ajaxリクエストはwordpressではwp-admin/admin-ajax.phpを介して処理されるため、AjaxのURLはwp-admin/admin-ajaxに設定する必要があります。 ajaxurlが定義されていない場合は、html属性data-urlをdata-url="<?php echo get_admin_url().'admin-ajax.php'?>"として定義することで取得できます。

jQuery(document).ready(function($){
   $("#wp-submit").on('click',function(e){
      e.preventDefault();
      username = $("#userName").val();
      password = $("#passWord").val();
      ajaxurl  = $(this).data('url');
      $.ajax({

      type: "POST",
      url: ajaxurl,
      data : {

            name     : username,
            password : password,
            action   : 'check_user_login'

        },
       success: function(response){    
         if(response =='true')    {
             $("div#result").css('display', 'inline', 'important');
             $("div#result").html("Login Successful");
             console.log('true');
         }else{
            $("div#result").css('display', 'inline', 'important');
            $("div#result").html("Wrong username or password");
         }

       } 
    });
  });
});

今すぐあなたのAjax関数を作成します。

function user_login(){


   //do your stuff here
    global $wpdb;
    $username=$_POST['name']; 
    $password=$_POST['password']; 
    $hash = md5($password);
    $query = $wpdb->prepare( "SELECT * FROM `wp_users` WHERE `user_email` = %s AND `user_pass` = %s", $username, $hash );
    $result = $wpdb->get_results($query);
     if (count($result)==1) { echo 'true';
     echo '<span>Login Successful</span>'; exit(); 
    } else if(count($result) < 1) {
     echo 'false'; exit(); }
}

Ajax関数はwp_ajax_*とwp_ajax_nopriv_*をフックするようにフックされるべきです。ここで、*はあなたの行動の値、すなわちdata.actionですので、

 add_action('wp_ajax_nopriv_check_user_login','user_login');
 add_action('wp_ajax_check_user_login','user_login');
3
Bikash Waiba