jQuery无法从PHP文件读取JSON

Question

I've managed to encode Wordpress data as JSON for a storelocator page but the page is failing to parse the JSON returned. It gives a 404 Not Found error in the console even though the file is present and is actually returning JSON data as it should.

The storelocator JS (essential code):

var settings = $.extend( {
  'mapDiv': 'map',
  'listDiv': 'loc-list',
  'formContainerDiv': 'form-container',
  'formID': 'user-location',
  'inputID': 'address',
  'dataType': 'json',
  'dataLocation': 'http://localhost/website/wp-content/themes/custom/locations.php',
  'jsonpCallback': null
}, options);

My PHP:

<?php

global $table_prefix, $wpdb, $output_array;

require_once('../../../wp-blog-header.php');
require_once('../../../wp-admin/includes/upgrade.php');

$output_array = array();

query_posts('category_name=business&showposts=-1');
//query_posts('name='.$post_name.'&showposts=-1');
while (have_posts()) : the_post();


    $name = get_the_title();
    $summary = get_the_content();
    $lat = get_field( "lat", $post->ID );
    $lng = get_field( "lng", $post->ID );
    $address = get_field( "address", $post->ID );
    $phone = get_field( "phone", $post->ID );
    $web = get_field( "web", $post->ID );

    array_push($output_array, array("id"=>$post->ID,
                    "name"=>$name,
                    "summary"=>$summary,
                    "lat"=>$lat,
                    "lng"=>$lng,
                    "address"=>$address,
                    "phone"=>$phone,
                    "web"=>$web));



endwhile;
//print_r($output_array);
echo json_encode($output_array);

?>

Sample of the JSON returned:

[{"id":76,"name":"AFRICAN ELITE PROPERTIES","summary":"Property development and management","lat":"-33.915025","lng":"18.421118","address":"Somerset Road, Green Point","phone":"021 421 1090","web":"www.africaneliteproperties.com"}]

Note: When I copy the returned data into a JSON file and use that as the data location it works perfectly. I've checked file permissions and everything is fine.

Where could I be going wrong?

Answer 1

This is not the right way to use AJAX in wordpress, You have to send the request to admin-ajax.php with a action hook. Take a look on the example:

$.ajax({
    url: 'http://localhost/website/wp-admin/admin-ajax.php', 
    type: 'post', 
    data: {action: 'my_json_data_fetcher'}, 
    success: function(response){}
});

Now what you have to do, invoke the two hooks, wp_ajax_ and wp_ajax_nopriv_ like this, Go to the functions.php in your themes folder.

// should be in your functions.php
// not that my_json_data_fetcher with wp_ajax_ and wp_ajax_nopriv_ hooks
add_action('wp_ajax_my_json_data_fetcher', 'now_your_function_that_return_json');
add_action('wp_ajax_nopriv_my_json_data_fetcher', 'now_your_function_that_return_json');

function now_your_function_that_return_json() {
    global $table_prefix, $wpdb, $output_array;

    $output_array = array();

    query_posts('category_name=business&showposts=-1');

    while (have_posts()) : the_post();


       $name = get_the_title();
       $summary = get_the_content();
       $lat = get_field( "lat", $post->ID );
       $lng = get_field( "lng", $post->ID );
       $address = get_field( "address", $post->ID );
       $phone = get_field( "phone", $post->ID );
       $web = get_field( "web", $post->ID );

       array_push($output_array, array("id"=>$post->ID,
                "name"=>$name,
                "summary"=>$summary,
                "lat"=>$lat,
                "lng"=>$lng,
                "address"=>$address,
                "phone"=>$phone,
                "web"=>$web));



    endwhile;

    echo json_encode($output_array);
    die(0);
}