User Tools

Site Tools

Trace:

Differences

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

Link to this comparison view

Next revision		Previous revision
programmieren:javascript:alpinejs_ajax_beispiel [2022/09/14 08:01] – created jgehrkeprogrammieren:javascript:alpinejs_ajax_beispiel [2022/12/17 12:28] (current) – external edit 127.0.0.1
Line 7: Line 7:
 Mini Beispiel zur Verdeutlichung: Mini Beispiel zur Verdeutlichung:
  
-<code js>+<code javascript>
 // dummy data // dummy data
 function alpinejs_dummy_ajax_app(){ function alpinejs_dummy_ajax_app(){
Line 28: Line 28:
 Im Beispiel mit dem Ajax call sieht es dann so aus: Im Beispiel mit dem Ajax call sieht es dann so aus:
  
-<code js>+<code javascript>
 function alpinejs_dummy_ajax_app(){ function alpinejs_dummy_ajax_app(){
  
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.1663142463.txt.gz · Last modified: 2022/12/17 12:28 (external edit)
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