获取使用AJAX发布数据 [英] Get post data using AJAX

问题描述

我仔细阅读了尝试学习AJAX和JSON，而我在使用找到一个体面的资源一定的麻烦。我仍然有很多问题，所以我主要是寻找资源。

我的目标是从拉字preSS的帖子内容。我试图寻找教程和讨论，但是我发现不适合我的工作或我不喜欢的解决方案，所以我wan't要正确理解我在做什么错。

我已经包括了我的努力，远远低于，的但是这不是我的首要问题的。

加载脚本。

  wp_enqueue_script（我的-AJAX请求，get_stylesheet_directory_uri（）'/js/ajax.js'，阵列（'jQuery的'））;
wp_localize_script（我的-AJAX请求，MyAjax'，阵列（'ajaxurl'=＆GT; ADMIN_URL（管理-ajax.php'）））;
 

JavaScript的

  jQuery的（文件）。就绪（函数（$）{

  $（'阿贾克斯'）。点击（函数（事件）{
    。事件preventDefault（）;
    VAR ID = $（本）的.d​​ata（'身份证'）;

    $阿贾克斯（{
      键入：POST，
      网址：MyAjax.ajaxurl，
      数据：{行动：ajax_request'，'ID'：ID}，
      数据类型：JSON，
      成功：功能（数据）{
        的console.log（数据）;
      }
    }）;

    返回false;

  }）;

}）;
 

在这里，我建立了我的行动。 如何连接code JSON和返回后的数据被使用？的

  add_action（'wp_ajax_nopriv_ajax_request'，'ajax_handle_request'）;
add_action（'wp_ajax_ajax_request'，'ajax_handle_request'）;

功能ajax_handle_request（）{
}
 

解决方案

我能算出这个通过设置全局变量$后拿到$ post变量。

通过打印$响应阵列即可。

  add_action（'wp_ajax_nopriv_ajax_request'，'ajax_handle_request'）;
add_action（'wp_ajax_ajax_request'，'ajax_handle_request'）;

功能ajax_handle_request（）{

    $ postID = $ _ POST ['身份证'];
    如果（使用isset（$ _ POST ['身份证']））{
        $的post_id = $ _ POST ['身份证'];
    }其他{
        $的post_id =;
    }

    全球$岗位;
    $后= get_post（$ postID）;

    $响应=阵列（
        sucess'=＆GT;真正，
        '后'=＆GT; $后，
        'ID'=＆GT; $ postID，
    ）;

    //产生响应
    打印json_en code（$响应）;

    //重要提示：不要忘记退出
    出口;
}
 

使用jQuery检索数据并输出。

  jQuery的（文件）。就绪（函数（$）{

  $（'阿贾克斯'）。点击（函数（事件）{
    。事件preventDefault（）;
    VAR ID = $（本）的.d​​ata（'身份证'）;

    $阿贾克斯（{
      键入：POST，
      网址：MyAjax.ajaxurl，
      数据：{行动：ajax_request'，'ID'：ID}，
      数据类型：JSON，
      成功：功能（数据）{
        的console.log（数据['后']）;
      }
    }）;

    返回false;
  }）;
}）;
 

I'm perusing an attempt to learn AJAX and JSON, and I'm having some trouble with finding a decent resource. I still have many questions so I'm mainly looking for a resource.

My aim is to pull content from wordpress posts. I tried looking for tutorials and discussions but the solutions I found wouldn't work for me or I didn't like, so I wan't to understand properly what I'm doing wrong.

I have included my efforts so far below, but this is not my primary question.

Loaded scripts.

wp_enqueue_script( 'my-ajax-request', get_stylesheet_directory_uri() . '/js/ajax.js', array( 'jquery' ) );
wp_localize_script( 'my-ajax-request', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

JavaScript

jQuery(document).ready(function($) {

  $('.ajax a').click(function(event) {
    event.preventDefault();
    var id = $(this).data('id');

    $.ajax({
      type: 'POST',
      url: MyAjax.ajaxurl,
      data: {'action' : 'ajax_request', 'id': id},
      dataType: 'json',
      success: function(data) {
        console.log(data);
      }
    });     

    return false;

  });

});

Here I set up my action. How to encode JSON and return post data to be used?

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

function ajax_handle_request(){
}

解决方案

I was able to figure this out by setting global $post to get the $post variable.

Then by printing out the $response array.

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

function ajax_handle_request(){

    $postID = $_POST['id'];
    if (isset($_POST['id'])){
        $post_id = $_POST['id'];
    }else{
        $post_id = "";
    }

    global $post;
    $post = get_post($postID);

    $response = array( 
        'sucess' => true, 
        'post' => $post,
        'id' => $postID , 
    );

    // generate the response
    print json_encode($response);

    // IMPORTANT: don't forget to "exit"
    exit;
}

Using jQuery to retrieve the data and output.

jQuery(document).ready(function($) {

  $('.ajax a').click(function(event) {
    event.preventDefault();
    var id = $(this).data('id');

    $.ajax({
      type: 'POST',
      url: MyAjax.ajaxurl,
      data: {'action' : 'ajax_request', 'id': id},
      dataType: 'json',
      success: function(data) {
        console.log(data['post']);
      }
    });     

    return false;
  });
});

这篇关于获取使用AJAX发布数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！