WordPress 플러그인에서 AJAX 사용

WordPress 플러그인에서 AJAX 사용

AJAX에 기반한 WordPress 샘플 플러그인을 생성하려고 합니다.튜토리얼을 읽고 플러그인을 했는데 작동이 안 돼요.AJAX는 처음입니다.시도한 코드는 다음과 같습니다.

<?php
class ajaxtest {

    function ajaxcontact() {
        ?>
        <div id="feedback"></div>
        <form name="myform" id="myform">
            <li>
                <label for fname>First Name</label><input type="text" id="fname" name="fname" value=""/>
            </li>
            <li>
                <label for lname>Last Name</label><input type="text" id="lname" name="lname" value=""/>
            </li>
            <input type="submit" value="Submit" id="submit" name="submit"/>
        </form>
        <script type="text/javascript">
            jQuery('#submit').submit(ajaxSubmit);

            function ajaxSubmit() {

                var newcontact = jQuery(this).serialize();

                jQuery.ajax({
                    type: "POST",
                    url: "/wp-admin/admin-ajax.php",
                    data: newcontact,
                    success: function(data) {
                        jQuery("#feedback").html(data);
                    }
                });

                return false;
            }
        </script>
        <?php
    }

    function addcontact() {
        $fname = $_POST['fname'];
        if ($fname != "") {
            echo "Your Data is" . $fname;
        } else {
            echo "Data you Entered is wrong";
        }

        die();
    }

}

function jquery_add_to_contact() {
    wp_enqueue_script('jquery');  // Enqueue jQuery that's already built into WordPress
}

add_action('wp_enqueue_scripts', 'jquery_add_to_contact');
add_action('wp_ajax_addcontact', array('ajaxtest', 'addcontact'));
add_action('wp_ajax_nopriv_addcontact', array('ajaxtest', 'addcontact')); // not really needed
add_shortcode('cform', array('ajaxtest', 'ajaxcontact'));

숏코드로 사용했는데 출력이 안 나왔어요.무슨 일인데요?

WordPress 환경

먼저 이 작업을 수행하려면 서버에 요청을 푸시하는 jQuery 스크립트를 등록하고 큐에 넣을 것을 권장합니다.이 작업들은 다음과 같이 연결됩니다.wp_enqueue_scripts액션 훅같은 훅에 넣어야 합니다.wp_localize_script임의의 JavaScript를 포함하는 데 사용됩니다.이렇게 하면 프론트 엔드에서 JS 객체를 사용할 수 있습니다.이 개체는 jQuery 핸들이 사용하는 올바른 URL을 전달합니다.

다음 항목을 확인하십시오.

1. wp_register_script(); 함수
2. wp_enqueue_module 훅
3. wp_enqueue_script(); 함수
4. wp_localize_script(); 함수

기본 플러그인 파일에서 이러한 파일을 추가합니다.

add_action( 'wp_enqueue_scripts', 'so_enqueue_scripts' );
function so_enqueue_scripts(){
  wp_register_script( 
    'ajaxHandle', 
    plugins_url('PATH TO YOUR SCRIPT FILE/jquery.ajax.js', __FILE__), 
    array(), 
    false, 
    true 
  );
  wp_enqueue_script( 'ajaxHandle' );
  wp_localize_script( 
    'ajaxHandle', 
    'ajax_object', 
    array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) 
  );
}

파일: jquery.ajax.js

이 파일은 AJAX 콜을 발신합니다.

jQuery(document).ready( function($){
  // Some event will trigger the ajax call, you can push whatever data to the server, 
  // simply passing it to the "data" object in ajax call
  $.ajax({
    url: ajax_object.ajaxurl, // this is the object instantiated in wp_localize_script function
    type: 'POST',
    data:{ 
      action: 'myaction', // this is the function in your functions.php that will be triggered
      name: 'John',
      age: '38'
    },
    success: function( data ){
      //Do something with the result from server
      console.log( data );
    }
  });
});

또한 플러그인 메인 파일에 아래 코드를 추가합니다.

마지막으로, 여러분의 기능에 대해서요.php 파일, AJAX 호출에 의해 트리거된 함수가 있을 것입니다.접미사에 주의해 주세요.

1. wp_ajax(등록 사용자 또는 관리 패널 조작에만 이 기능을 허용합니다.)
2. wp_ajax_nopriv(특권 사용자가 없는 경우 이 기능을 허용합니다.)

다음 접미사와 액션이 액션의 이름을 구성합니다.

wp_ajax_myaction또는wp_ajax_nopriv_myaction

add_action( "wp_ajax_myaction", "so_wp_ajax_function" );
add_action( "wp_ajax_nopriv_myaction", "so_wp_ajax_function" );
function so_wp_ajax_function(){
  //DO whatever you want with data posted
  //To send back a response you have to echo the result!
  echo $_POST['name'];
  echo $_POST['age'];
  wp_die(); // ajax call must die to avoid trailing 0 in your response
}

AJAX 호출에 '액션'을 추가해야 합니다.

jQuery.ajax({
  type: "POST",
  url: "/wp-admin/admin-ajax.php",
  data: newcontact,
  action: 'addcontact',
  success: function(data) {
    jQuery("#feedback").html(data);
  }
});

값은 wp_ajax에 대한 add_action 훅과 같아야 합니다.

add_action( wp_action_{action_value}, 'myfunc' );

이를 통해 WordPress는 AJAX 호출 시 실행할 함수를 알 수 있습니다.

이 Codex 페이지에는 유용한 정보가 포함되어 있으며, 이 문서에서는 보유하고 있는 코드를 보다 세분화하는 방법에 대해 설명합니다.

언급URL : https://stackoverflow.com/questions/17855846/using-ajax-in-a-wordpress-plugin