我正在构建一个小表单，允许用户在vanilla Wordpress用户管理系统之外更新他们的联系信息。我计划使用一个简单的积垢设置，并加入一些卫生设施。我已经使用$wpdb函数构建了初始的插入/创建函数，并且表单确实正确地写入了数据库。然而，当我提交表单时，我的Javascript没有被调用。Javascript文件没有捕获提交事件，表单只是将数据直接发布到PHP处理器文件。我在这里挠头。
问题概述，逐场：1。表单提交，但用户被重定向到一个包含JSON编码的数组数据的页面。2、从未接触过包含我的错误处理和Ajax调用的Javascript文件。3、Javascript文件未捕获提交事件。表单仍然被写入DB，我想这是因为表单操作中正在PHP文件上调用POST方法。
NOTE: 我包括了。在我的函数文件中使用wp\\u enqueue\\u脚本的js文件，但很可能会将其更改为仅在加载带有此表单的页面时包含，以减少加载时间。我认为以这种方式加载javascript文件不会改变任何事情。
PHP处理：
<?php
# DB CRUD commands for updating the table for alumni contact info
/* wordpress db globals, require wp-load to bring in useful functions */
$parse_uri = explode( \'wp-content\', $_SERVER[\'SCRIPT_FILENAME\'] );
require_once( $parse_uri[0] . \'wp-load.php\' );
global $wpdb;
$errors = array(); // array to hold validation errors
$data = array(); // array to pass back data
/*Ensure no fields are empty, and if they are, return $errors array encoded in JSON */
if (empty($_POST[\'first_name\']))
$errors[\'first_name\'] = \'First name is required.\';
if (empty($_POST[\'last_name\']))
$errors[\'last_name\'] = \'Last name is required.\';
if (empty($_POST[\'email\']))
$errors[\'email\'] = \'Email is required.\';
if (empty($_POST[\'phone\']))
$errors[\'phone\'] = \'A phone number is required.\';
if (empty($_POST[\'address\']))
$errors[\'address\'] = \'A mailing address is required.\';
if (empty($_POST[\'city\']))
$errors[\'city\'] = \'Please enter the city for your mailing address.\';
if (empty($_POST[\'zip\']))
$errors[\'zip\'] = \'Your zip code is required.\';
if (empty($_POST[\'state\']))
$errors[\'state\'] = \'Please select your state.\';
// return a response ===========================================================
// if there are any errors in our errors array, return a success boolean of false
if ( ! empty($errors)) {
// if there are items in our errors array, return those errors
$data[\'success\'] = false;
$data[\'errors\'] = $errors;
} else {
// if there are no errors process our form, then return a message
/* Set the proper table name to a variable */
$table_name = "wp_alumni";
/* Use insert function to write the data to the table
* Called on form submit when the user adds their contact info
* to the Alumni database using the on-page form.
* button name = submit is used to check \'if isset\'
* and then perform the update function
*/
if (isset($_POST[\'create\'])) {
$wpdb->insert(
$table_name, array(
\'first_name\' => $_POST[\'first_name\'],
\'last_name\' => $_POST[\'last_name\'],
\'address\' => $_POST[\'address\'],
\'address2\' => $_POST[\'address2\'],
\'city\' => $_POST[\'city\'],
\'state\' => $_POST[\'state\'],
\'zip\' => $_POST[\'zip\'],
\'phone\' => $_POST[\'phone\'],
\'email\' => $_POST[\'email\'],
\'time\' => current_time(\'mysql\', 1)
)
);
}
// show a message of success and provide a true success variable
$data[\'success\'] = true;
$data[\'message\'] = \'Success!\';
}
// return all our data to an AJAX call
echo json_encode($data);
?>
The Form/HTML:
<form method="POST" action="<?php echo plugins_url( \'alumni/alumni_update.php\' ); ?>" name="alumni-update" id="alumni-update">
<div id="alumni-form-column">
<li>
<span class="alumni-span">First Name</span><br />
<input id="first_name" type="text" name="first_name" class="alumni-input" />
</li>
<li>
<span class="alumni-span"> Last Name</span><br />
<input id="last_name" type="text" name="last_name" class="alumni-input" />
</li>
<li>
<span class="alumni-span">Street Address</span><br />
<input id="address" type="text" name="address" class="alumni-input" />
</li>
<li>
<span class="alumni-span">Apt, Unit, Ste #, etc</span><br />
<input id="address2" type="text" name="address2" class="alumni-address-2" cols="1" />
</li>
</div>
<div id="alumni-form-column">
<li>
<span class="alumni-span">City</span><br />
<input id="city" type="text" name="city" class="alumni-input" />
</li>
<li>
<span class="alumni-span">State</span><br />
<select id="state" type="text" name="state" class="alumni-input">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</li>
<li>
<span class="alumni-span">Zip</span><br />
<input id="zip" type="text" name="zip" class="alumni-input" maxlength="5" />
</li>
<li>
<span class="alumni-span">Phone</span><br />
<input id="phone" type="text" name="phone" class="alumni-input" maxlength="10" onfocus="if (this.value == \'Hint text..\') this.value=\'\'" value="Hint text.." onblur="if (this.value == \'\') this.value=\'Digits only: 5458881234\'"/>
</li>
<li>
<span class="alumni-span">Email</span><br />
<input id="email" type="text" name="email" class="alumni-input" />
</li>
<li>
<button class="alumni-button" type="submit" name="create">Submit</button>
</li>
</div>
</form>
Javascript
// .js document to capture the Submit event from the form and send back errors asychronously
$(document).ready(function() {
// process the form
$(\'form\').submit(function(event) {
event.preventDefault();
$(\'.form-group\').removeClass(\'has-error\'); // remove the error class
$(\'.help-block\').remove(); // remove the error text
// get the form data
// there are many ways to get this data using jQuery (you can use the class or id also)
var formData = {
\'email\' : $(\'input[name=email]\').val(),
\'address\' : $(\'input[name=address]\').val(),
\'phone\' : $(\'input[name=phone]\').val(),
\'city\' : $(\'input[name=city]\').val(),
\'state\' : $(\'input[name=state]\').val(),
\'first_name\' : $(\'input[name=first_name]\').val(),
\'last_name\' : $(\'input[name=last_name\').val(),
\'zip\' : $(\'input[name=zip]\').val()
};
// process the form
$.ajax({
type : \'POST\', // define the type of HTTP verb we want to use (POST for our form)
url : \'http://localhost/wordpress/wp-content/plugins/alumni/alumni_update.php\', // the url where we want to POST
data : formData, // our data object
dataType : \'json\', // what type of data do we expect back from the server
encode : true
})
// using the done promise callback
.done(function(data) {
// log data to the console so we can see
console.log(data);
// here we will handle errors and validation messages
if ( ! data.success) {
// handle errors for fist name ---------------
if (data.errors.first_name) {
$(\'#first_name\').addClass(\'has-error\'); // add the error class to show red input
$(\'#first_name\').append(\'<div class="help-block">\' + data.errors.first_name + \'</div>\'); // add the actual error message under our input
}
// handle errors for last name ---------------
if (data.errors.last_name) {
$(\'#last_name\').addClass(\'has-error\'); // add the error class to show red input
$(\'#last_name\').append(\'<div class="help-block">\' + data.errors.last_name + \'</div>\'); // add the actual error message under our input
}
// handle errors for city---------------
if (data.errors.city) {
$(\'#city\').addClass(\'has-error\'); // add the error class to show red input
$(\'#city\').append(\'<div class="help-block">\' + data.errors.city + \'</div>\'); // add the actual error message under our input
}
// handle errors for last name ---------------
if (data.errors.state) {
$(\'#state\').addClass(\'has-error\'); // add the error class to show red input
$(\'#state\').append(\'<div class="help-block">\' + data.errors.state + \'</div>\'); // add the actual error message under our input
}
// handle errors for phone ---------------
if (data.errors.phone) {
$(\'#phone\').addClass(\'has-error\'); // add the error class to show red input
$(\'#phone\').append(\'<div class="help-block">\' + data.errors.phone + \'</div>\'); // add the actual error message under our input
}
// handle errors for address ---------------
if (data.errors.address) {
$(\'#address\').addClass(\'has-error\'); // add the error class to show red input
$(\'#address\').append(\'<div class="help-block">\' + data.errors.address + \'</div>\'); // add the actual error message under our input
}
// handle errors for zip ---------------
if (data.errors.zip) {
$(\'#zip\').addClass(\'has-error\'); // add the error class to show red input
$(\'#zip\').append(\'<div class="help-block">\' + data.errors.zip + \'</div>\'); // add the actual error message under our input
}
// handle errors for email ---------------
if (data.errors.email) {
$(\'#email\').addClass(\'has-error\'); // add the error class to show red input
$(\'#email\').append(\'<div class="help-block">\' + data.errors.email + \'</div>\'); // add the actual error message under our input
}
} else {
// ALL GOOD! just show the success message!
$(\'form\').append(\'<div class="alert alert-success">\' + data.message + \'</div>\');
// usually after form submission, you\'ll want to redirect
// window.location = \'/thank-you\'; // redirect a user to another page
alert(\'success\'); // for now we\'ll just alert the user
}
});
// stop the form from submitting the normal way and refreshing the page
event.preventDefault();
});
});
最合适的回答,由SO网友:TheDeadMedic 整理而成
如果你把它作为插件发布，你绝对must 使用AJAX API。非常简单：
/**
* Handle the request and return the result.
*/
function alumni_process_request() {
global $wpdb;
// All your processing code from your original question, except for loading WordPress!
return $data;
}
/**
* AJAX handler for the "alumni" action.
*/
function alumni_ajax_handler() {
global $wpdb;
$data = alumni_process_request();
header( \'Content-Type: application/json; charset=\' . get_bloginfo( \'charset\' ) );
echo json_encode( $data );
exit;
}
add_action( \'wp_ajax_nopriv_alumni\', \'alumni_ajax_handler\' );
add_action( \'wp_ajax_alumni\', \'alumni_ajax_handler\' );
这是最基本的。现在，我们需要确保正确加载JavaScript，确保加载jQuery，以及一个全局JavaScript变量，该变量将保存WordPress AJAX处理程序的URL：
function alumni_enqueue_script() {
wp_enqueue_script(
\'alumni\',
plugins_url( \'path/to/script.js\', __FILE__ ), // URL path relative to the folder of the PHP script this code is placed in
array( \'jquery\' ) // Requires jQuery, make sure it\'s loaded first
);
wp_localize_script(
\'alumni\', // Name of script, from above
\'alumni\', // Name of JavaScript variable
array(
\'ajaxUrl\' => admin_url( \'admin-ajax.php\' ),
)
);
}
add_action( \'wp_enqueue_scripts\', \'alumni_enqueue_script\' );
现在来看JavaScript：
!function( $ ) { // Self-executing function closure, will ensure $ is jQuery - might be running in noConflict mode
$( document ).ready(
function() {
$( "#alumni-update" ).submit( // Don\'t bind to all forms, just ours
function ( event ) {
event.preventDefault();
$(\'.form-group\').removeClass(\'has-error\'); // remove the error class
$(\'.help-block\').remove(); // remove the error text
var data = $( this ).serializeArray(); // Will automatically grab all form fields and data
data.push({
name : "create",
value: "1"
});
data.push({
name : "action",
value: "alumni" // This parameter needs to match the wp_ajax_* hook.
});
$.post(
alumni.ajaxUrl, // Use our JavaScript variable "alumni" we defined in wp_localize_script()
data, // POST data
function ( data ) {
// Your form handling
}
);
}
)
}
);
}( jQuery );
以上假设的插件结构如下：
plugin-folder/plugin.php
- PHP code
plugin-folder/path/to/script.js
- JavaScript
