Aktualisieren Sie Benutzermetadaten mit AJAX

Ich möchte Benutzer Meta auf der Vorderseite mit einem Ajax-Formular bearbeiten, das ist, was ich habe:

Das Formular hat die Benutzer-ID:

<form id="ID; ?>"... 

Das ist das Skript ::

  jQuery( document ).ready( function() { jQuery( '#ID; ?>' ).submit( function( e ) { e.preventDefault(); jQuery.ajax( { type: "POST", url: ajaxurl, data: "action=updateUserFront&id=" + ID?>, success: function() { alert( 'funcionó' ); } } ); } ); } );  

Das habe ich in meiner functions.php Datei

 function my_ajaxurl() { $html = ''; $html .= 'var ajaxurl = "' . admin_url( 'admin-ajax.php' ) . '"'; $html .= ''; echo $html; } add_action( 'wp_head', 'my_ajaxurl' ); function updateUserFront_ajax() { $user_id = get_current_user_id(); $newVal = 'test'; $userUrl = get_user_meta( $user_id, 'url', true ); update_user_meta($post_id,'url',$newVal); die( $newVal ); } add_action( 'wp_ajax_updateUserFront', 'updateUserFront_ajax' ); 

Solutions Collecting From Web of "Aktualisieren Sie Benutzermetadaten mit AJAX"

Okay, es gibt ein paar Dinge, die kein standardisiertes WordPress sind, also habe ich ein minimales Skript zusammengestellt, das ich Stück für Stück erklären werde. Hoffentlich klären Sie die Dinge bis zum Ende auf.

HTML-Formular

Unten ist ein sehr einfaches HTML-Formular. Wir werden JavaScript verwenden, um auf die Einreichung zu warten und zu verhindern, dass die Seite tatsächlich aktualisiert wird, aber das wird später sein.

 

Wir sind $_POST das Formular, aber Sie könnten auch $_GET das Formular, wenn Sie $_GET . In dieser Situation halte ich es nicht für wichtig.

Schalte unsere Skripte ein

WordPress verfügt also über einen Hook, mit dem Sie Styles und Skripts an den richtigen Stellen (Kopf- oder Fußzeile) mit dem Namen wp_enqueue_scripts die wp_enqueue_scripts . Damit können wir unser Skript lokalisieren und eine Variable (oder zwei, wenn Sie ajax_url ) an unser Javascript übergeben, insbesondere an die ajax_url . Das sieht in etwa so aus:

 /** * Enqueue our Scripts and Styles Properly */ function theme_enqueue() { $theme_url = get_template_directory_uri(); // Used to keep our Template Directory URL $ajax_url = admin_url( 'admin-ajax.php' ); // Localized AJAX URL // Register Our Script for Localization wp_register_script( 'um-modifications', // Our Custom Handle "{$theme_url}/scripts/um-modifications.js", // Script URL, this script is located for me in `theme-name/scripts/um-modifications.js` array( 'jquery' ), // Dependant Array '1.0', // Script Version ( Arbitrary ) true // Enqueue in Footer ); // Localize Our Script so we can use `ajax_url` wp_localize_script( 'um-modifications', 'ajax_url', $ajax_url ); // Finally enqueue our script wp_enqueue_script( 'um-modifications' ); } add_action( 'wp_enqueue_scripts', 'theme_enqueue' ); 

Der obige Code ist stark kommentiert, bitte lesen Sie sich die Code-Kommentare durch, wenn etwas nicht sinnvoll ist. Dies würde in Ihre functions.php Datei gehen.

Unser Javascript / JQuery

Da ich es einfach halten wollte, verarbeiten wir in diesem Beispiel nur einen Metawert, aber Sie könnten auch einfach mehrere meta_values an das Datenobjekt übergeben, indem $_POST sie in Ihrem PHP durch den $_POST Index $_POST , den wir später sehen werden. Das Folgende liegt in einem Skriptverzeichnis theme-name/scripts/um-modifications.js und ist ebenfalls stark kommentiert:

 // Declare our JQuery Alias jQuery( 'document' ).ready( function( $ ) { // Form submission listener $( '#um_form' ).submit( function() { // Grab our post meta value var um_val = $( '#um_form #um_key' ).val(); // Do very simple value validation if( $( '#um_form #um_key' ).val().length ) { $.ajax( { url : ajax_url, // Use our localized variable that holds the AJAX URL type: 'POST', // Declare our ajax submission method ( GET or POST ) data: { // This is our data object action : 'um_cb', // AJAX POST Action 'first_name': um_val, // Replace `um_key` with your user_meta key name } } ) .success( function( results ) { console.log( 'User Meta Updated!' ); } ) .fail( function( data ) { console.log( data.responseText ); console.log( 'Request failed: ' + data.statusText ); } ); } else { // Show user error message. } return false; // Stop our form from submitting } ); } ); 

AJAX PHP Callback / Handler / Aktion

Endlich, Die eigentliche Verarbeitung! Zu beachten sind die Haken am Ende dieser function:

  • wp_ajax_nopriv_ {your_ajax_action_name_here} – erlaubt uns, Ajax am Frontend zu verwenden
  • wp_ajax_ {your_ajax_action_name_here} – erlaubt uns die Verwendung einer Ajax-Periode.

Hier können wir den aktuellen Benutzer user_meta und ihr user_meta oder sogar das Benutzerobjekt aktualisieren, wenn wir das wollten.

 /** * AJAX Callback * Always Echos and Exits */ function um_modifications_callback() { // Ensure we have the data we need to continue if( ! isset( $_POST ) || empty( $_POST ) || ! is_user_logged_in() ) { // If we don't - return custom error message and exit header( 'HTTP/1.1 400 Empty POST Values' ); echo 'Could Not Verify POST Values.'; exit; } $user_id = get_current_user_id(); // Get our current user ID $um_val = sanitize_text_field( $_POST['first_name'] ); // Sanitize our user meta value $um_user_email = sanitize_text_field( $_POST['user_email'] ); // Sanitize our user email field update_user_meta( $user_id, 'first_name', $um_val ); // Update our user meta wp_update_user( array( 'ID' => $user_id, 'user_email' => $um_user_email, ) ); exit; } add_action( 'wp_ajax_nopriv_um_cb', 'um_modifications_callback' ); add_action( 'wp_ajax_um_cb', 'um_modifications_callback' ); 

Hoffentlich erleichtert dies das Verständnis und die Visualisierung. Sollten Sie Fragen haben, kommentieren Sie unten!