User Tools

Site Tools

Trace:

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
Last revisionBoth sides next revision
programmieren:javascript:alpinejs_ajax_beispiel [2022/09/14 08:01] – jgehrkeprogrammieren:javascript:alpinejs_ajax_beispiel [2022/09/14 08:08] – jgehrke
Line 40: Line 40:
  'repsonse_json' : false,  'repsonse_json' : false,
  
- 'submit_data' : function(  ) {+ 'submit_data' : function() {
  
- // AJAX POST VORBEREITEN + // PREPARE AJAX POST 
- const ajax_post_url =  window.globale_ajax_url; // Kommt von PHP oder so.+ const ajax_post_url =  'https://www.example.com/api-endpoint'; 
  const xhttp         = new XMLHttpRequest();  const xhttp         = new XMLHttpRequest();
  xhttp.open( 'POST', ajax_post_url, true );  xhttp.open( 'POST', ajax_post_url, true );
  xhttp.setRequestHeader("Content-Type", "application/json");  xhttp.setRequestHeader("Content-Type", "application/json");
  xhttp.onreadystatechange = function() {  xhttp.onreadystatechange = function() {
- if(this.readyState == 4 && this.status == 200) {+ const is_call_success = (this.readyState == 4 && this.status == 200) ? true : false; 
 +  
 + if( is_call_success ) {
  const response_json = JSON.parse( this.response );  const response_json = JSON.parse( this.response );
- console.log( "Antwort: " ); + /* 
- console.log( response_json ); +      in current context 'this' would refer to the XMLHttpRequest Object 
- +     we need to write the response data to the alpine.js object. 
- // Zurück auf dieses Modul die Daten schreiben  +     So we be bound the current alpine.js object to a global window variable 
- // Dafür unten die Zeile mit (*) beachten! + */ 
- window.this_alpinejs_module.repsonse_json = response_json; // <-- Important+ window.this_alpinejs_module.repsonse_json = response_json; // working version of this.repsonse_json
   
  return true;  return true;
Line 61: Line 63:
  };  };
  
- // AJAX DURCHFÜHREN+ // DO THE AJAX POST
  const data = JSON.stringify( this.dummy_data() );  const data = JSON.stringify( this.dummy_data() );
  xhttp.send( data );  xhttp.send( data );
Line 67: Line 69:
  
  init() {  init() {
- console.log( "Verfügbare DATEN: " ); + /* 
- console.log( this.dummy_data() ); +     This makes the alpine.js object available out of 'this' current context. 
- +     e.g. for methods in other objects 
- // POST CALL DIREKT STARTEN + */
- this.submit_data(); +
- +
- // (*) DAS IST WICHTIG, DASS WIR DATEN AUS DEM AJAX RESPONSE ZURÜCK +
- // INS ALPINE SCHREIBEN KÖNNEN+
  window.this_alpinejs_module = this; // <-- I M P O R T A N T  window.this_alpinejs_module = this; // <-- I M P O R T A N T
  }  }
programmieren/javascript/alpinejs_ajax_beispiel.txt · Last modified: 2022/12/17 12:28 by 127.0.0.1
CC Attribution-Share Alike 4.0 International Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International

Page Tools