Wordpress에서 Ajax를 로드하는 방법

Wordpress에서 Ajax를 로드하는 방법

저는 jQuery에서 일반적인 방법으로 ajax를 사용하는 것에 익숙합니다.
꽤 오래 해봤지만 워드프레스가 작동하는데 필요한게 뭔지 모르겠어요
제가 가지고 있는 것은 튜토리얼이나 기사에서 따온 것입니다.
functions.php(자테마):

// code to load jquery - working fine

// code to load javascript file - working fine

// ENABLE AJAX :
function add_ajax()
{
   wp_localize_script(
    'function',
    'ajax_script',
    array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}

$dirName = get_stylesheet_directory();  // use this to get child theme dir
require_once ($dirName."/ajax.php");  

add_action("wp_ajax_nopriv_function1", "function1"); // function in ajax.php

add_action('template_redirect', 'add_ajax');  

jQuery 자체는 로딩되어 정상적으로 동작하고 있습니다.

저는 다음과 같은 기본적인 아약스를 먹어 보았습니다.

jQuery(document).ready(function($){
    $('a.link').click(function(){
        $.ajax({
              url:     ajax_script.ajaxurl,
              data:    ({action  : 'function1'}),
              success: function(data){
                     $('#result').html(data);
              }
        });
        return false;
    });
});   

이것 말고는, 우선 제대로 로딩이 되어 있는지 어떤지를 어떻게 테스트해야 할지...

어떤 도움이라도 주시면 감사하겠습니다.

★★★★★★
firebug는 다음과 .

ReferenceError: ajax_script is not defined
       url:   ajax_script.ajaxurl,

당신의 요청에 따라 답변을 드렸습니다.

Hieu Nguyen이 답변에서 제안했듯이, admin-ajax.php 파일을 참조하기 위해 ajaxurl javascript 변수를 사용할 수 있습니다.단, 이 변수는 프런트엔드에서 선언되지 않습니다.이것을 프론트 엔드로 선언하는 것은, 헤더에 다음의 내용을 넣는 것으로 간단합니다.php를 참조하십시오.

<script type="text/javascript">
    var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
</script>

Wordpress AJAX 문서에서 설명한 바와 같이 wp_ajax_(액션)와 wp_ajax_nopriv_(액션)의 두 가지 다른 후크가 있습니다.이러한 차이는 다음과 같습니다.

• wp_param_(액션):이것은, 관리 패널내에서 Ajax 콜이 발신되었을 경우에 기동됩니다.
• wp_syslog_nopriv_(액션):이것은, Web 사이트의 프런트 엔드에서 Ajax 콜이 발신되었을 경우에 기동됩니다.

그 외의 모든 것에 대해서는, 상기 링크의 메뉴얼에 기재되어 있습니다.해피 코딩!

추신. 여기 도움이 될 만한 예가 있습니다. (테스트를 하지 않았습니다.)

프런트 엔드:

<script type="text/javascript">
    jQuery.ajax({
        url: ajaxurl,
        data: {
            action: 'my_action_name'
        },
        type: 'GET'
    });
</script>

백엔드:

<?php
    function my_ajax_callback_function() {
        // Implement ajax function here
    }
    add_action( 'wp_ajax_my_action_name', 'my_ajax_callback_function' );    // If called from admin panel
    add_action( 'wp_ajax_nopriv_my_action_name', 'my_ajax_callback_function' );    // If called from front end
?>

---

업데이트 이것은 오래된 대답이지만, 사람들로부터 계속 칭찬받고 있는 것 같습니다.그것은 훌륭합니다!나는 이것이 몇몇 사람들에게 유용할 것이라고 생각한다.

WordPress에는 wp_localize_script 함수가 있습니다.이 함수는 다음과 같이 변환하기 위한 세 번째 파라미터로 데이터 배열을 가져옵니다.

var translation = {
    success: "Success!",
    failure: "Failure!",
    error: "Error!",
    ...
};

HTML 헤드태그에 오브젝트를 로드하기만 하면 됩니다.이것은 다음과 같은 방법으로 이용할 수 있습니다.

백엔드:

wp_localize_script( 'FrontEndAjax', 'ajax', array(
    'url' => admin_url( 'admin-ajax.php' )
) );

이 방법의 장점은 테마에 AJAX URL 변수를 하드 코딩하지 않기 때문에 테마와 플러그인 모두에서 사용할 수 있다는 것입니다.

에 할 수 되었습니다.ajax.url ''가 가 아니라ajaxurl를 참조해 주세요.

먼저 이 페이지를 http://codex.wordpress.org/AJAX_in_Plugins에서 자세히 읽어보시기 바랍니다.

둘째,ajax_script정의되어 있지 않기 때문에, 다음과 같이 변경할 필요가 있습니다.url: ajaxurl네, 안 보이는데요?function1()다른 파일에 이미 정의되어 있을 수 있습니다.

마지막으로 Firebug를 사용하여 Ajax 콜을 디버깅하는 방법을 배우면 네트워크 및 콘솔 탭이 친구가 됩니다.PHP측에서는,print_r()또는var_dump()네 친구가 될 거야

wp_localize_script를 사용하여 URL을 전달합니다.

wp_localize_script( some_handle, 'admin_url', array('ajax_url' => admin_url( 'admin-ajax.php' ) ) );

그러면 js 안에, 당신은 그것을 호출할 수 있습니다.

admin_url.ajax_url 

언급할 수 없으니 셰인의 답변에 대해 명심하세요

wp_localize_scripts()

wp 또는 admin enqueue 스크립트에 접속해야 합니다.좋은 예는 다음과 같습니다.

function local() {

    wp_localize_script( 'js-file-handle', 'ajax', array(
        'url' => admin_url( 'admin-ajax.php' )
    ) );

}

add_action('admin_enqueue_scripts', 'local');
add_action('wp_enqueue_scripts', 'local');`

개인적으로 저는 다른 사이트에서와 마찬가지로 워드프레스에서 에이잭스를 사용하는 것을 선호합니다.모든 ajax 요청을 처리하는 프로세서 php 파일을 만들고 해당 URL만 사용합니다.wordpress에서는 htaccess가 불가능하기 때문에 다음 작업을 수행합니다.

1.in 내 wp-content 폴더에 있는 htaccess 파일 아래에 이 파일을 추가합니다.

<FilesMatch "forms?\.php$">
Order Allow,Deny
Allow from all
</FilesMatch>

이 경우 내 프로세서파일은 forms.php라고 불립니다.이 파일은 헤더 등의 다른 모든 파일과 함께 wp-content/themes/temeName 폴더에 넣을 수 있습니다.php 바닥글.php 등...그냥 네 테마 뿌리에 살아.

2) 내 아약스 코드로 내 url을 이렇게 사용할 수 있습니다.

$.ajax({
    url:'/wp-content/themes/themeName/forms.php',
    data:({
        someVar: someValue
    }),
    type: 'POST'
});

이전, 성공 또는 오류 유형 중 원하는 것을 추가할 수 있습니다.하지만 8개의 다른 장소에서 워드프레스에 무슨 일이 일어날지 말하는 바보 같은 짓은 피할 수 있고, 페이지 레벨에 js 코드를 넣는 곳에서 다른 작업을 하지 않도록 합시다.그러면 js 파일을 분리해서 php에 저장할 수 있습니다.

js파일은 이미 로딩되어 있기 때문에 별도의 add_ajax함수로 다시 로드/엔큐할 필요가 없다고 생각했습니다.
하지만 이건 꼭 필요할 거야 아니면 내가 이걸 했고 이제 효과가 있어

바라건대 다른 사람을 도울 수 있을 거야.

다음은 질문에서 수정된 코드입니다.

// code to load jquery - working fine

// code to load javascript file - working fine

// ENABLE AJAX :
function add_ajax()
{
    wp_enqueue_script(
       'function',
       'http://host/blog/wp-content/themes/theme/js.js',
       array( 'jquery' ),
       '1.0',
       1
   );

   wp_localize_script(
      'function',
      'ajax_script',
      array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}

$dirName = get_stylesheet_directory();  // use this to get child theme dir
require_once ($dirName."/ajax.php");  

add_action("wp_ajax_nopriv_function1", "function1"); // function in ajax.php

add_action('template_redirect', 'add_ajax');  

언급URL : https://stackoverflow.com/questions/17710728/how-to-load-ajax-in-wordpress