カスタムWordpress + PHP + MYSQL + AJAXフォーム、Javascriptでキャプチャされていない送信イベント POST DBへのデータ
私は、ユーザーがVanilla Wordpressユーザー管理システムの外部で連絡先情報を更新できるようにするための小さなフォームを作成しています。私は簡単なCRUD設定を使い、衛生状態にすることを計画しています。最初のinsert/create関数は$ wpdb関数を使用して構築されており、フォームはデータベースに正しく書き込みます。ただし、フォームを送信してもJavascriptが呼び出されません。 Javascriptファイルは送信イベントをキャプチャせず、フォームはPHPプロセッサファイルに直接データをPOSTします。私はここで頭をかいています。
1.フォームは送信しますが、ユーザーはJSONでエンコードされたデータを配列で含むページにリダイレクトされます。私のエラー処理とAjax呼び出しを含むJavascriptファイルは決して触れられません。 3. Javascriptファイルは送信イベントをキャプチャしません。 4.フォームはまだDBに書き込まれています。フォームアクションでPOSTメソッドがPHPファイルで呼び出されているためです。
注： 私は自分の関数ファイルにwp_enqueue_scriptを使用して.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);
?>
フォーム/ 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();
});
});
これをプラグインとしてリリースしているなら、絶対にmustAJAX 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をロードしていること、およびWordPress AJAXハンドラのURLを保持するグローバルJavaScript変数を確認します。
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