我的想法是创建自己的js方法,我将传入三个参数(method、url、data)

qcuzuvrc  于 2021-06-21  发布在  Mysql
关注(0)|答案(1)|浏览(341)

js方法
我已经创建了一个js post方法,使用xmlhttprequest将数据发布到我的php页面。问题是如何在post请求成功后获取数据,并在我的html页面上显示以下是我的代码。
我目前正在工作的一个项目,我必须使用js方法发布,获取删除其他更多。我只想知道如何在成功提交数据后调用submitform函数时显示数据。
代码在工作,但反馈部分

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

cnh2zyt31#

您需要将回调函数传递给 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)

相关问题