My idea was create my own js method that i will pass in three parameters (method,url,data)

Question

Js method

I have create a js post method using xmlhttprequest posting data to my php page. The problem is how i will get the data after post request is successful and display on my html page Below is my code.

I am currently working on a project that i have to use js method to post,get delete other more. All I want is an idea of how to get the data deplayed when the submit form function is called after successful submission of the data.

The code is working the part but the feedback part

//define form variables
var formSubmition = document.getElementById('formSubmition');
//addEventListener
formSubmition.addEventListener('submit',dataSubmit,true);;
function pageView(){
 //localstorage_cookie = localStorage setItem('userpage_id','27727');
}
// connect to server via XMLHttpRequest
function serverConnection(){
  this.object = {
         method:'',
         url:'',
         data:'',
         connect:function(a,b,d){
         if(window.XMLHttpRequest){
             server_http = new XMLHttpRequest();
         }else{
             server_http = new ActiveXObject('Microsoft.XMLHTTP');
         }
         server_http.onprogress = function(event){
             console.log(event);
        }
        server_http.onreadystatechange = function(e){
             if(server_http.readyState == 4 && server_http.status == 200){
                var res = server_http.responseText;
                return res;
             }
        }
        server_http.open(a,b,true);
        //server_http.setRequestHeader("Content-type","application/x-www- 
        form-urlencoded");
          server_http.send(d);
        }
   }
}

 var conn = new serverConnection(),response_xmlhttp = new serverConnection();
 function serverConn(c,method,URI,formdata){
 //defining data configurations
 c.object['method'] = method; //defined key data for method
 c.object['url'] = URI; //defined key data for url
 c.object['data'] = formdata; //defined key data for data
 //store in global variables
 var method,url,data;
 method = c.object['method'];
 url = c.object['url'];
 data = c.object['data'];
 c.object.connect(method,url,data);
}
//submit_data using the class conn
function dataSubmit(e){
e.preventDefault();

var formdata,method,URI,username,password;
//define username and password
username = document.getElementById('username').value;
password = document.getElementById('password').value;
if(username == '' && password == ''){
  alert('fill in all the fields');
}else{
  formdata = new FormData(this);
  formdata.append('submit_data','SIGNIN');
  method = 'POST';
  URI = 'admin/php_data/loginCredentials.php';
  serverConn(conn,method,URI,formdata);
}
}

Answer 1

You need to pass a call back function to serverConnection which it can call when it receives the data from backend, something alone the lines of

function serverConnection(cb){
  this.object = {
         method:'',
         url:'',
         data:'',
         connect:function(a,b,d){
         if(window.XMLHttpRequest){
             server_http = new XMLHttpRequest();
         }else{
             server_http = new ActiveXObject('Microsoft.XMLHTTP');
         }
         server_http.onprogress = function(event){
             console.log(event);
        }
        server_http.onreadystatechange = function(e){
             if(server_http.readyState == 4 && server_http.status == 200){
                var res = server_http.responseText;
                cb(res);
                return res;
             }
        }
        server_http.open(a,b,true);
        //server_http.setRequestHeader("Content-type","application/x-www- 
        form-urlencoded");
          server_http.send(d);
        }
   }
}

and then create a function to handle response

function handleResponse(res) {
  // set the res in some element
}

Now just pass it to server connection

var conn = new serverConnection(handleResponse)