我明白了:
POST http://localhost:8888/goughChallenge/wp-admin/admin-ajax.php 500 (Internal Server Error)
在我点击一个按钮的控制台中...我看了其他线程,但我可以看到我的代码有问题。有人可以启发我吗?
$(document).ready(function() {
// When document has fully loaded
$( function() {
var locationForm = $( '#locationForm' );
var results = $( 'div#result' );
var formMessage = $( 'div.form-message' );
var inputFields = $( 'input.required' );
var submitButton = $( 'button.btn-submit' );
$( locationForm ).submit( function( eve ) {
eve.preventDefault();
eve.stopPropagation();
// Disable button
submitButton.attr( 'disabled', 'disabled' );
submitButton.addClass( 'disabled' );
var currentLoc = $( '#currentLoc' ).val();
var destLoc = $( '#destLoc' ).val();
$.ajax({
type: 'POST',
url: locationAjax.ajaxurl,
data: {
'action': 'locationCalculate',
'currentLocation': currentLoc,
'destLocation': destLoc
},
success:function(data) {
jQuery('#result').html(data);
},
error:function(errorThrown) {
submitButton.removeAttr('disabled');
submitButton.removeClass('disabled');
if ( errorThrown.responseText !== '' ) {
$( formMessage ).text( errorThrown.responseText );
} else {
$( formMessage ).text( 'An error occured and your message could not be sent.' );
}
console.log( errorThrown );
}
})
});
})
});
以下是定义变量的地方
<?php
/**
* Plugin Name: Location Distance Calculator
* Plugin URI: https://www.tomwithers.me
* Description: calculate the distance between two given user points
* License: GPL3
* License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/
function distanceCalculator() {
/**
* Input form for user
*/
?>
<form id="locationForm" action="<?php echo $_SERVER['PHP_SELF']; ?>" class="locationForm">
<div class="form-group">
<label for="currentLocation">Current Location: </label>
<input id="currentLoc" type="text" name="currentLocation" class="required" />
</div>
<div class="form-group">
<label for="destLocation">Destination Location: </label>
<input id="destLoc" type="text" name="destLocation" class="required" />
</div>
<div class="form-group">
<input type="hidden" name="action" value="locationCalculate">
<button type="submit" class="btn btn-submit">Calculate Distance</button>
</div>
<div id="result"></div>
<div class="form-message"></div>
</form>
<?php
}
add_shortcode( 'Calculator', 'distanceCalculator');
function locationData() {
/**
* Pull the form fields
*/
if ( $_SERVER['REQUEST_METHOD'] == "POST" ) {
$currentLoc = urlencode( $_POST['']);
$destLoc = urlencode( $_POST['']);;
$data = file_get_contents( "http://maps.googleapis.com/maps/api/distancematrix/json?origins=$currentLoc&destinations=$destLoc&language=en-EN&sensor=false" );
$data = json_decode( $data );
$time = 0;
$distace = 0;
/**
* Check If form has had data entered
*/
if ( empty( $currentLoc ) OR empty( $destLoc) ) {
http_response_code(400);
echo "Please fill out all fields.";
die;
}
/**
* Calculate the disatnce
*/
foreach ( $data->rows[0]->elements as $road ) {
$time += $road->duration->value;
$distance += $road->distance->text;
}
$time =$time/60;
//$distance = round( $distnace / 1000 );
/**
* Output the vaules
*/
if ( $distance != 0 ) {
echo "<div id='result-generated'>";
echo "From: " . $data->origin_addresses[0];
echo "<br/>";
echo "To: ". $data->destination_addresses[0];
echo "<br/>";
echo "Time: ".gmdate("H:i", ($time * 60))." hour(s)";
echo "<br/>";
echo "Distance: " . $distance . " Miles";
echo "<br/>";
echo "</div>";
die;
} else {
die;
}
}
}
add_action( 'wp_ajax_locationCalculate', 'locationData' );
add_action( 'wp_ajax_nopriv_locationCalculate', 'locationData' );
我不确定什么是错的,我一直盯着我的屏幕大约一个小时!非常感谢任何帮助!