{"id":25109,"date":"2021-05-31T11:19:00","date_gmt":"2021-05-31T08:19:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25109"},"modified":"2021-10-18T02:35:35","modified_gmt":"2021-10-17T23:35:35","slug":"so-verwenden-sie-jquery-ajax-in-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/de\/so-verwenden-sie-jquery-ajax-in-wordpress\/","title":{"rendered":"So verwenden Sie jQuery Ajax in WordPress"},"content":{"rendered":"

M\u00f6chten Sie jQuery Ajax in WordPress implementieren? WordPress-Anf\u00e4nger haben immer Schwierigkeiten, Ajax mit WordPress zu verwenden. In diesem Artikel untersuchen wir die Verwendung von Ajax in WordPress anhand eines Live-Beispiels.<\/p>\n

Warum brauchen Sie jQuery Ajax in der Website?<\/h3>\n

Ajax (Asynchronous JavaScript And XML) erm\u00f6glicht die asynchrone Aktualisierung einer Webseite. Dies bedeutet, dass Daten asynchron von einem Server gesendet und abgerufen werden k\u00f6nnen, ohne die Anzeige und das Verhalten der vorhandenen Seite zu beeintr\u00e4chtigen. Mit Ajax k\u00f6nnen Sie kleine oder gro\u00dfe Teile einer Webseite \u00e4ndern, ohne die gesamte Seite zu aktualisieren. Es hilft, die Benutzererfahrung zu verbessern und spart gleichzeitig eine zus\u00e4tzliche Last auf dem Server.<\/p>\n

Ajax wird in der Webentwicklung sehr beliebt. Die meisten Websites bevorzugen die Verwendung von Ajax, um den Inhalt dynamisch zu laden. In der Webentwicklung m\u00fcssen Sie f\u00fcr einige Aufgaben Ajax ohne zweite Option verwenden.<\/p>\n

Sehen wir uns jedoch an, wie Sie jQuery Ajax in WordPress verwenden.<\/p>\n

Einstieg<\/h3>\n

Die Implementierung von Ajax in WordPress ist einfach und unkompliziert. Wir werden ein praktisches Beispiel daf\u00fcr sehen. Nehmen wir als Beispiel eine Reihe von Dropdown-Listen f\u00fcr L\u00e4nder und Bundesstaaten. Wenn der Benutzer ein Land aus der Dropdown-Liste ausw\u00e4hlt, sollten alle dem ausgew\u00e4hlten Land zugeordneten Bundesstaaten in der Dropdown-Liste der Bundesstaaten aufgef\u00fcllt werden. Dieses Verhalten muss von Ajax ausgef\u00fchrt werden.<\/p>\n

Um dies zu erreichen, ben\u00f6tigen Sie 2 Tabellen \u2013 wp_countries und wp_states. In diesen Tabellen sollten Sie die Eins-zu-Viele-Beziehung zwischen Land und Staaten beibehalten. Siehe die folgenden Screenshots.<\/p>\n

Tabelle wp_countries<\/strong><\/p>\n

\"So<\/a><\/p>\n

Tabelle wp_states<\/strong><\/p>\n

\"So<\/a><\/p>\n

Wenn Sie mit den Daten fertig sind, erstellen Sie die Dropdown-Liste Land, indem Sie die Daten wie folgt aus der L\u00e4ndertabelle abrufen.<\/p>\n

<?php\nglobal $wpdb;\n$aCountries = $wpdb->get_results( \"SELECT id, country FROM \".$wpdb->prefix.\"countries\" );\n\u00a0\n<form method=\"post\">\n\u00a0\u00a0\u00a0\u00a0<select class=\"countries\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<option value=\"\">--<?php _e('SELECT COUNTRY'); ?>--<\/option>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php foreach ($aCountries as $country) { ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<option value=\"<?php echo $country->id; ?>\"><?php echo $country->country; ?><\/option>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php } ?>\n\u00a0\u00a0\u00a0\u00a0<\/select>\n\u00a0\u00a0\u00a0\u00a0<div class=\"load-state\"><\/div>\n<\/form>\n?><\/code><\/pre>\n
Wir haben die Klasse ‚Countries‘ zum select-Tag hinzugef\u00fcgt, das im jQuery-Code verwendet wird, um die ID eines Landes zu erhalten. Ich habe auch ein leeres div mit der Klasse ‚load-states‘ hinzugef\u00fcgt, an das das Status-Dropdown angeh\u00e4ngt wird, nachdem eine Antwort vom Ajax-Aufruf erhalten wurde.<\/p>\n
jQuery Ajax in WordPress<\/h3>\n
Als n\u00e4chstes m\u00fcssen wir einen jQuery-Code schreiben, der einen Ajax-Aufruf an den Server sendet und die Antwort verarbeitet. Um einen Ajax-Aufruf zu schreiben, sollten Sie die JS-Datei einschlie\u00dfen. Erstelle eine custom.js<\/code>Datei im js<\/code>Verzeichnis deines aktiven Themes. F\u00fcgen Sie dies custom.js<\/code>in der WordPress-Umgebung mit dem folgenden Code hinzu, der in functions.php<\/code>.<\/p>\n
function blog_scripts() {\n\u00a0\u00a0\u00a0\u00a0\/\/ Register the script\n\u00a0\u00a0\u00a0\u00a0wp_register_script( 'custom-script', get_stylesheet_directory_uri(). '\/js\/custom.js', array('jquery'), false, true );\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ Localize the script with new data\n\u00a0\u00a0\u00a0\u00a0$script_data_array = array(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'ajaxurl' => admin_url( 'admin-ajax.php' ),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'security' => wp_create_nonce( 'load_states' ),\n\u00a0\u00a0\u00a0\u00a0);\n\u00a0\u00a0\u00a0\u00a0wp_localize_script( 'custom-script', 'blog', $script_data_array );\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ Enqueued script with localized data.\n\u00a0\u00a0\u00a0\u00a0wp_enqueue_script( 'custom-script' );\n}\nadd_action( 'wp_enqueue_scripts', 'blog_scripts' );<\/code><\/pre>\n
Lassen Sie uns nun einen jQuery-Code schreiben, der einen Ajax-Aufruf ausgibt, und das Status-Dropdown-Men\u00fc an die Seite anh\u00e4ngen.<\/p>\n
custom.js<\/strong><\/p>\n
jQuery(function($) {\n\u00a0\u00a0\u00a0\u00a0$('body').on('change', '.countries', function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var countryid = $(this).val();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(countryid != '') {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var data = {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'action': 'get_states_by_ajax',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'country': countryid,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'security': blog.security\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$.post(blog.ajaxurl, data, function(response) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('.load-state').html(response);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0});\n});<\/code><\/pre>\n
Hier habe ich eine data<\/code>Variable deklariert, die einen action<\/code>Schl\u00fcssel enth\u00e4lt. Der Zeichenfolgenwert f\u00fcr action<\/code>key sollte aufgabenorientiert sein. Wir holen Zust\u00e4nde, also behalte ich seinen Namen als get_states_by_ajax. Andere Elemente der data<\/code>Variablen sind die Details, die an Ajax-Anfragen gesendet werden sollen. Unser Ziel ist es, einen Staat basierend auf dem Land abzurufen, also \u00fcbergebe ich die L\u00e4nder-ID mit dem Schl\u00fcssel als country<\/code>.<\/p>\n
Jetzt ist es an der Zeit, Ajax-Aufrufe auf WordPress-Art auszuf\u00fchren. F\u00fcgen Sie die folgenden 2 Anweisungen in die functions.php<\/code>Datei Ihres aktiven Designs ein .<\/p>\n
add_action('wp_ajax_get_states_by_ajax', 'get_states_by_ajax_callback');\nadd_action('wp_ajax_nopriv_get_states_by_ajax', 'get_states_by_ajax_callback');<\/code><\/pre>\n
‚wp_ajax‘ ist ein festes Pr\u00e4fix bei der Verwendung von Ajax in WordPress. F\u00fcgen Sie dann den Wert der Aktion hinzu. In unserem Fall ist es get_states_by_ajax. Der erste Parameter wurde also wp_ajax_get_states_by_ajax. Der zweite Parameter ist eine Callback-Funktion, in die wir unseren eigentlichen serverseitigen Code schreiben m\u00fcssen. ‚wp_ajax_nopriv‘ sollte verwendet werden, wenn Sie Operationen f\u00fcr das Frontend ausf\u00fchren.<\/p>\n
get_states_by_ajax_callback<\/code>Schreiben Sie in der Methode den Code, der die Status-Dropdown-Liste zur\u00fcckgibt. Sie k\u00f6nnen diese Methode in der functions.php<\/code>Datei definieren.<\/p>\n
function get_states_by_ajax_callback() {\n\u00a0\u00a0\u00a0\u00a0check_ajax_referer('load_states', 'security');\n\u00a0\u00a0\u00a0\u00a0$country = $_POST['country'];\n\u00a0\u00a0\u00a0\u00a0global $wpdb;\n\u00a0\u00a0\u00a0\u00a0$aStates = $wpdb->get_results( $wpdb->prepare( \"SELECT id, state_name FROM \".$wpdb->prefix.\"states WHERE cid = %d\", $country) );\n\u00a0\u00a0\u00a0\u00a0if ($aStates) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<select>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0foreach ($aStates as $state) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<option value=\"<?php echo $state->id; ?>\"><?php echo $state->state_name; ?><\/option>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/select>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0wp_die();\n}<\/code><\/pre>\n
Die in den Code integrierte Antwort sendet ihn zur\u00fcck an die jQuery. Diese Antwort h\u00e4ngen wir dann mit jQuery an den div-Container an, der die Klasse ‚load-state‘ hat.<\/p>\n
Gehen Sie auf Ihre Seite und w\u00e4hlen Sie das Land aus. Das Dropdown-Men\u00fc f\u00fcr den Bundesstaat sollte f\u00fcr das ausgew\u00e4hlte Land angezeigt werden.<\/p>\n
Ich hoffe, Sie verstehen, wie man Ajax auf der WordPress-Website verwendet. Bitte teilen Sie Ihre Gedanken und Vorschl\u00e4ge im Kommentarbereich unten mit.<\/p>\n
Zum Thema passende Artikel<\/h4>\n