Wordpress 플러그인에서 Ajax를 어떻게 사용합니까?

Question

2 개의 드롭 다운 상자가있는 Wordpress 사이트가 있습니다. 첫 번째 드롭 다운 상자에서 옵션을 선택하면 PHP 함수의 데이터로 두 번째 드롭 다운 상자를 새로 고치고 싶습니다. 그 때문에 나는 아약스가 필요해. 하지만 저는 Wordpress에 Ajax를 바인딩하는 데 어려움을 겪고 있습니다.

html로는 다음과 같습니다 : 예를 들어 사용자가 선택하면

<form method="get" action="http://siradjov.anex.at/playground/"> 
    <div class="form-inner"> 
     <div class="listing-search-main"> 
      <input type="text" class="listing-search-text text" name="s" title="Coach House, Golf Course, Water View, etc" value="unique"> 
      <input type="submit" class="listing-search-submit btn btn-large btn-primary" name="search-submit" value="Search"> 
      </div><!-- .listing-search-main --> 

     <div class="listing-search-details"> 
      <div class="listing-search-field listing-search-field-select listing-search-field-status"> 
      <select class="listing-search-status select" name="status"> 
       <option value="">Status</option> 
       <option value="sale">Sales</option> 
       <option value="rent">Rentals</option> 
       <option value="foreclosure">Foreclosure</option> 
      </select> 

     <div class="listing-search-advanced " style="display: block;"> 
      <div class="listing-search-field listing-search-field-select listing-search-field-min"> 
      <select class="listing-search-min select" name="min"> 
       <option value="">Price (min)</option> 
       <option value="100000">100.000</option> 
       <option value="200000">200.000</option> 
       <option value="300000">300.000</option> 
       <option value="400000">400.000</option> 
      </select> 

지금 "판매"나는 두 번째 선택 태그는 PHP 배열에서 일치하는 가격으로 다시로드합니다.

PHP 함수는 다음과 같습니다

나는 별도의 .js 파일에 내 jQuery를 Ajax 호출 저장했습니다

<?php 

$selectedStatus = $_POST['status']; 


if($selectedStatus == "sale") 
{ 

    // Set price (min) to select 

    $fields['min']['type'] = 'select'; 

    // Set price (min) select options 
    $fields['min']['data'] = array(
     '100000' => '120,000', 
     '120000' => '200.000', 
     '130000' => '300.000', 
    ); 

    // Set price (max) to select 

    $fields['max']['type'] = 'select'; 

    // Set price (max) select options 

    $fields['max']['data'] = array(
     '100000' => '120,000', 
     '120000' => '200.000', 
     '130000' => '300.000', 
    ); 


} 
else if($selectedStatus == "rent") 
    { 

     // Set price (min) to select 

     $fields['min']['type'] = 'select'; 

     // Set price (min) select options 
     $fields['min']['data'] = array(
      '200' => '200', 
     ); 

     // Set price (max) to select 

     $fields['max']['type'] = 'select'; 

     // Set price (max) select options 

     $fields['max']['data'] = array(
      '200' => '200', 
     ); 

    } 

echo $fields; 

. 코드는 다음과 같습니다 :

jQuery(document).ready(function() { 
jQuery(".listing-search-status.select[name='status']").change(function() { 

     if (this.value == "sale") 
     { 
      jQuery.ajax({ 
       type: "POST", 
       url: "http://siradjov.anex.at/playground/wp-content/plugins/wpcasa-extended-search-status-price-chain-select/wpcasa_custom_prices.php", 
        data: { status : "sale" }, 
        success: function(data) 
        { 
         alert('Sale' + data['min']['data'][0]); 
        } 
        }); 
     } 
     else 
     { 
      if (this.value == "rent") 
      { 
       jQuery.ajax({ 
        type: "POST", 
        url: "http://siradjov.anex.at/playground/wp-content/plugins/wpcasa-extended-search-status-price-chain-select/wpcasa_custom_prices.php", 
        data: { status : "rent" }, 
              success: function(data) 
         { 
         alert('Rent' + data['min']['data'][0]); 
         } 
            }); 
      } 
     } 

    }); 
}); 

그러나 경고 상자는 표시되지 않습니다. Google 크롬 콘솔에 오류 메시지도 표시되지 않습니다. 누구든지 나를 도울 수 있습니까?

Answer 1

Wordpress에서 제공하는 기본 방법을 사용하여 ajax 요청을 활용하십시오.

플러그인 파일에서 Ajax 요청을 보내고 admin-ajax.php 파일로 구문 분석 할 수 있도록 몇 가지 작업을 추가해야합니다.

add_action('wp_ajax_nopriv_ajax_request', 'ajax_controller'); 
add_action('wp_ajax_ajax_request', 'ajax_controller'); 

이제 플러그인 파일에 ajax 컨트롤러를 빌드합니다. 이것의 목적은이 출력 (이 이후에 이상) ajax 요청에 의해 제공되는 FN 매개 변수

function ajax_controller(){ 
    $ret = ''; //our return variable 
    switch($_REQUEST['fn']): 
     case 'status' : 
      $ret = update_status($_REQUEST['status']); 
      break; 
    endswitch; 
    echo $ret; 
    die(); //this makes sure you don't get a "1" or "0" appended to the end of your request. 
} 

는 update_status() 기능이 당신의 위를 캡슐화하기 위해 만들어졌습니다 있습니다 기반으로 전환하는 컨트롤러 역할을하는 것입니다 PHP 코드.

이제 데이터를 검색하기 위해 끊임없이 사용할 수있는 컨트롤러와 동작이 바인딩되었습니다. 우리는 단지 ajax 호출을 몇 가지 수정해야합니다. 첫째, 우리는 '임대료/판매'전환에 대해 3 단계 할당을 사용할 수 있습니다. 2 건의 아약스 호출과는 대조적으로 일을 정리합니다. 둘째, URL 주소를 /wp-admin/admin-ajax.php 파일로 변경해야합니다.

var $status = (this.value == "sale") ? this.value : 'rent'; 
jQuery.ajax({ 
    type: "POST", 
    url: "/wp-admin/admin-ajax.php", 
    data: { 
     action: 'ajax_request', 
     fn : 'status', //this is the $_REQUEST['fn'] from above 
     status : $status }, 
    success: function(data){ 
     alert('Sale' + data['min']['data'][0]); 
    } 
}); 

action 매개 변수를 필요는 fn 내 코딩 원칙의 결과이다. action 속성은 add_action('wp_ajax_nopriv_ 및 add_action('wp_ajax_ 이후의 속성과 직접 일치해야합니다.

이렇게하면 해결됩니다.