javascript - 我的想法是创建我自己的 js 方法，我将传递三个参数(方法、url、数据)

Question

Js方法

我创建了一个 js post 方法，使用 xmlhttprequest 将数据发布到我的php 页面。问题是我将如何在发布请求后获取数据成功并显示在我的 html 页面上下面是我的代码。

我目前正在开发一个项目，我必须使用js方法来发布、删除其他内容。我想要的只是一个想法，如何在成功提交数据后调用提交表单函数时使数据延迟。

代码正在工作，但反馈部分

//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

您需要将回调函数传递给serverConnection，当它从后端接收到数据时，它可以调用该函数，仅此行

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);
        }
   }
}

然后创建一个函数来处理响应

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

现在只需将其传递到服务器连接

var conn = new serverConnection(handleResponse)