我的表格有问题。单击submit按钮时,会弹出404错误。如果有人有任何建议,我将不胜感激。
表单的Ajax处理。进入theme的js。
<script type="text/javascript">
jQuery(\'#BookingForm\').submit(ajaxSubmit);
function ajaxSubmit(){
var BookingForm = jQuery(this).serialize();
jQuery.ajax({
action : \'make_booking\',
type : "POST",
url : "/wp-admin/admin-ajax.php",
data : BookingForm,
success: function(data){
jQuery("#feedback").html(data);
}
});
return false;
}
</script>
PHP进入
functions.php
function makeBooking(){
global $wpdb;
$type = $_POST["optionsRadios"];
$to = $_POST["to"];
$from = $_POST["from"];
$date = $_POST["date"];
$time = $_POST["time"];
$name = $_POST["name"];
$tel = $_POST["tel"];
$email = $_POST["email"];
$passenger = $_POST["optionsRadios2"];
$other = $_POST["other"];
if( $wpdb->insert(\'Booking\',
array(
\'type\'=>$type,
\'from1\'=>$from,
\'to1\'=>$to,
\'date\'=>$date,
\'time\'=>$time,
\'name\'=>$name,
\'tel\'=>$tel,
\'email\'=>$email,
\'passenger\'=>$passenger,
\'other\'=>$other
)
) === FALSE ) {
echo "Error";
}
else {
echo "Submission successful, an email receipt has been sent to your email address.
<br> Your Booking ID is:<b>ZCA- ".$wpdb->reference . "</b>";
//Prepare email body
$msg = "Reference: ZCA-" . $reference . "\\nType:" . $type . "\\nFrom:" . $from . "\\nTo:" . $to . "\\nDate" . $date . "\\nTime:" . $time . "\\nName:" . $name . "\\nNumber:" . $tel . "\\nEmail:" . $email . "\\nPassengers:" . $passenger . "\\nOther:" . $other;
mail("[email protected]","Booking",$msg);
mail($email,"Zcars Global Booking","Thank you for your enquiry. We aim to deal with your request straight away." . $msg);
}
die();
}
add_action(\'wp_ajax_make_booking\', \'makeBooking\');
add_action(\'wp_ajax_nopriv_make_booking\', \'makeBooking\'); // not really needed
我包括了HTML表单,因为我仍然收到404错误,可能是这里有什么?
<form method="post" id="BookingForm">
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="booking" value="booking" checked>
Booking
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="quotation" value="quotation">
Quotation
</label>
</div>
<div class="form-group">
<label for="from">From *</label>
<input name="from" id="from" type="text" class="form-control" placeholder="Where are you?" required>
</div>
<div class="form-group">
<label for="to">Going to *</label>
<input name="to" id="to" type="text" class="form-control" placeholder="Where are you going to?" required>
</div>
<div class="form-group">
<label for="date">Date *</label>
<input name="date" id="date" type="date" class="form-control" required min="<?php echo date("dd-mm-yyyy"); ?>">
</div>
<div class="form-group">
<label for="time">Time *</label>
<input name="time" id="time" type="time" class="form-control" required>
</div>
<div class="form-group">
<label for="name">Name *</label>
<input name="name" id="name" type="text" class="form-control" placeholder="What is your name?" required>
</div>
<div class="form-group">
<label for="tel">Telephone Number *</label>
<input name="tel" id="tel" type="number" class="form-control" placeholder="What is your number?" required>
</div>
<div class="form-group">
<label for="email">Email *</label>
<input name="email" id="email" type="email" class="form-control" placeholder="What is your email?" required>
</div>
<h4>Passengers</h4>
<div class="radio">
<label>
<input type="radio" name="optionsRadios2" id="4orless" value="1to4" checked>
4 or Less
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios2" id="4to6" value="4to6">
4 to 6
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios2" id="6to8" value="6to8">
6 to 8
</label>
</div>
<textarea name="other" class="form-control" rows="3">Please write here anything else we need to know</textarea>
<input type="hidden" name="action" value="makeBooking"/>
<input type="submit">
</form>
SO网友:CeganB
您尝试将AJAX请求发送到wp admin/admin AJAX。php是正确的,但最好使用wp_localize_script() 使脚本在函数中可用的任何数据。通常只能从WordPress的服务器端获取的php。
例如,javascript代码可以与函数位于同一文件夹中。php本身:
[主题文件夹]
-->功能。php
-->js[文件夹]-->makebooking。js公司
你的jquery在makebooking中。js应如下所示:
jQuery(document).ready(function(event) {
jQuery(\'#BookingForm\').submit(ajaxSubmit);
function ajaxSubmit() {
var BookingForm = jQuery(this).serialize();
jQuery.ajax({
action: \'make_booking\',
type: "POST",
url: MBAjax.admin_url,
data: BookingForm,
success: function(data) {
jQuery("#feedback").html(data);
}
});
return false;
}
});
使用makeBooking()处理数据,在函数顶部添加以下内容。php:
// embed the javascript file that makes the AJAX request
wp_enqueue_script( \'make-booking-ajax\',\'js/makebooking.js\', array( \'jquery\' ) );
// declare the URL to the file that handles the AJAX request (wp-admin/admin-ajax.php)
wp_localize_script( \'make-booking-ajax\', \'MBAjax\', array( \'ajaxurl\' => admin_url( \'admin-ajax.php\' ) ) );
add_action(\'wp_ajax_make_booking\', \'makeBooking\');
有关更多参考,请查看
5 Tips for using Ajax in Wordpress