Eine JS-Datei macht einen AJAX-Aufruf. Bei Erfolg dieses AJAX-Aufrufs wird ein weiterer AJAX-Aufruf durchgeführt. Der zweite Aufruf prüft, ob die E-Mail bereits registriert wurde. Wenn dies der Fall ist, erhält der zweite AJAX-Aufruf keine Daten zurück, wie in Firebug und der Chrome-Konsole in diesem Fall angezeigt wird. Derselbe Code funktioniert jedoch problemlos auf dem Localhost, während das genannte Problem NUR auf dem Online-Server auftritt.
Die gehostete Seite befindet sich auf http://twmobilefitness.com/signup/
. Das Problem tritt auf, wenn Sie auf den Link 'Jetzt registrieren' am Ende der Seite klicken. Sie müssen sich zweimal mit der gleichen E-Mail-Adresse registrieren, wenn Sie das Problem lösen wollen.
JS:
$.ajax( {
url : base_url+"/wp-admin/admin-ajax.php",
type : 'GET',
cache : false,
data : 'action=check_user_name&'
+ Math.floor( ( Math.random() * 100 ) +1 )
+ '&user_name='+user_name,
success : function( result ) {
if ( parseInt( result ) == 0 ) {
$( ".result" ).html( '<span class="error">User name not available </span>' );
} else if ( parseInt( result ) == 1 ) {
$.ajax( {
url : base_url
+ "/wp-admin/admin-ajax.php",
type : 'GET',
cache : false,
data : 'action=check_email_used&'
+ Math.floor( ( Math.random() *100 ) +1 )
+ '&email=' + email,
success : function( result_email ) {
if ( parseInt( result_email ) == 0 ) {
$( ".result" ).html( '<span class="error">Email already used </span>' );
} else if ( parseInt( result_email ) == 1 ) {
$( ".result" ).html( '' );
$( ".signup_div" ).hide();
$( ".signup_emergency_contact" ).show();
}
}
} );
}
}
} );
functions.php
hat
add_action('wp_ajax_check_user_name','check_user_name');
add_action('wp_ajax_nopriv_check_user_name','check_user_name');
add_action( 'wp_ajax_check_email_used','check_email_used' );
add_action( 'wp_ajax_nopriv_check_email_used','check_email_used' );
function check_user_name() {
global $wpdb;
$user_name = trim( $_GET['user_name'] );
$MobTraining = new MobTraining();
$table =trim( "{$wpdb->prefix}users" );
$array_where['user_login'] = $user_name;
$sql_fetch = $MobTraining->fetch( $table, $array_where );
$row = $wpdb->get_results( $sql_fetch, ARRAY_A );
if ( sizeof( $row ) != 0 ) {
echo '0';
} else {
echo '1';
}
die();
}
function check_email_used() {
global $wpdb;
$email = trim( $_GET['email'] );
$MobTraining = new MobTraining();
$table = trim( "{$wpdb->prefix}users" );
$array_where['user_email'] = $email;
$sql_fetch = "SELECT * FROM $table WHERE `user_email`='$email'";
$row = $wpdb->get_results( $sql_fetch, ARRAY_A );
if ( sizeof( $row ) != 0 ) {
echo '0';
} else {
echo '1';
}
die();
}
Wie kann man den Code auf einem Online-Server zum Laufen bringen?
Was Sie erleben (AJAX funktioniert lokal, aber nicht auf dem Server), ist ein Verzögerungsproblem. Lokal funktioniert alles so schnell, dass Sie Ihr Problem nicht sehen können. Kurz gesagt, das ist Ihr Problem:
AJAX Callback (A) wird ausgeführt > AJAX Callback (B) weiß nicht, dass es auf (A) warten muss > Sie können das Problem in Ihrer lokalen Installation nicht sehen, da (A) zu schnell fertig ist.
Sie müssen also einen Weg finden, wie Sie Ihrem Callback (B) mitteilen können, dass er auf (A) warten muss. Hier's wie:
Registrieren Sie Ihre Daten und lokalisieren Sie sie auf die richtige Weise: Verpacken Sie sie in eine Funktion oder Methode und verbinden Sie sie mit wp_enqueue_scripts
(public/themes), login_enqueue_scripts
(password/login/register) oder admin_enqueue_scripts
. Die Verwendung von wp_localize_script()
verschiebt Daten von PHP nach JS und macht sie dort zugänglich.
add_action( 'admin_enqueue_scripts', 'wpse118772jsObject' );
function wpse118772jsObject()
{
$scriptHandle = 'custom-script-name';
// Should be divided into separate functions or methods
wp_register_script(
$scriptHandle,
plugins_url( __FILE__, 'your/path' ),
array( 'jquery' ),
plugin_dir_path( __FILE__ ).'your/path' ),
true
);
wp_enqueue_script( $scriptHandle );
wp_localize_script(
$scriptHandle,
'pluginObject',
array(
'ajaxURl' => admin_url( 'admin_ajax.php' ),
'custom' => array(
// custom data in here
),
),
);
}
Es gibt mehrere Funktionen, die Sie verwenden können: Die Standardfunktion $.ajax({});
oder ihre Abkürzungen $.post();
, $.getJSON();
, usw.
Sie können also einfach etwas wie das Folgende verwenden - unter Verwendung der Objektmethoden success/fail
.
( function( $, plugin ) {
"use strict";
$.ajax( {
url : plugin.ajaxURl,
data : {
// other data
},
// We assume you're responding with a proper wp_send_json_success/error() in the PHP Cb.
dataType : "json",
// Request transformation possible in here.
beforeSend : function( xhr ) {
// Example:
// xhr.overrideMimeType( 'application/json' );
},
// The actual handlers
success : function( data, textStatus, jqXHR ) {
// Handle data transformation or DOM manipulation in here.
},
error : function( jqXHR, textStatus, errorThrown ) {
// silent: Log the error
console.info( errorThrown );
// loud: Throw Exception
throw errorThrown;
}
} );
} )( jQuery, pluginObject || {} );
Wenn Sie mehr in die Tiefe gehen wollen und die Dinge wirklich richtig machen wollen, müssen Sie Methodenverkettung verwenden. (Es gibt noch Raum für Verbesserungen).
( function( $, plugin ) {
"use strict";
$.ajax( {
url : plugin.ajaxURl,
data : {
// other data
},
} )
.done( function( data ) {
// Handles successful responses only
} )
.fail( function( reason ) {
// Handles errors only
console.debug( reason );
} )
.always( function( data, textStatus, response ) {
// If you want to manually separate stuff
// response becomes errorThrown/reason OR jqXHR in case of success
} )
.then( function( data, textStatus, response ) {
// In case your working with a deferred.promise, use this method
// Again, you'll have to manually separates success/error
} );
} )( jQuery, pluginObject || {} );
Hinweis: Bessere Beispiele für den Wrapper um den Callback finden Sie unter commonjs oder AMD und deren Unterschied.
Der interessante - und mächtigste - Teil der ganzen jQuery- (und anderer Bibliotheken) AJAX-Verarbeitung ist die Frage, wie man wartet, bis A fertig ist, um dann B und seine Verarbeitung zu starten. Die Antwort ist "deferred" Laden und "promises".
Ich werde ein kurzes Beispiel hinzufügen. Man sollte vielleicht darüber nachdenken, ein Objekt zu bauen und Dinge zu trennen, indem man sie über this.
an das Objekt anhängt, aber für ein Beispiel sollte das folgende ausreichen:
Beispiel (A) So mache ich es grundsätzlich. Du musst die Bits selbst ausfüllen.
( function( $, plugin ) {
"use strict";
$.when(
$.ajax( {
url : pluginURl,
data : { /* ... */ }
} )
.done( function( data ) {
// 2nd call finished
} )
.fail( function( reason ) {
console.info( reason );
} )
)
// Again, you could leverage .done() as well. See jQuery docs.
.then(
// Success
function( response ) {
// Has been successful
// In case of more then one request, both have to be successful
},
// Fail
function( resons ) {
// Has thrown an error
// in case of multiple errors, it throws the first one
},
);
} )( jQuery, pluginObject || {} );
Beispiel (B) Ich habe es nie so probiert, aber es sollte auch funktionieren. Einfacher zu lesen, aber ich mag $.when()
aufgelöste Versprechen mehr.
( function( $, plugin ) {
"use strict";
$.ajax( {
url : plugin.ajaxURl,
data : {
// other data
}
} )
.done( function( data ) {
// Handles successful responses only
} )
.fail( function( reason ) {
console.info( reason );
} )
// Promise finished:
.then( function( data ) {
$.ajax( {
url : pluginURl,
data : { /* ... */ }
} )
.done( function( data ) {
// 2nd call finished
} )
.fail( function( reason ) {
console.info( reason );
} );
} );
} )( jQuery, pluginObject || {} );
Wenn Sie noch mehr in die Tiefe gehen wollen, lesen Sie die Docs über deferred
und then
.
Um eine AJAX-Anfrage nach Abschluss einer anderen AJAX-Anfrage auszuführen, müssen Sie die folgende Zeile hinzufügen,
async: false,d.h., Sie müssen
async: false
in der AJAX-Methode wie folgt hinzufügen,
$.ajax( { url : base_url+"/wp-admin/admin-ajax.php", type : 'GET', async: false,