What are the eight life cycle hook functions of Vue>>>

Cause

In order to simulate the data returned by the interface, the group writes an automatic data filling page, which needs to be manually clicked to return every time it comes to this page. There are two forms on the page, and the target points to both_ Self, today I wrote an implementation of using JS to submit these two forms respectively. The function is very direct, and I submitted the code without thinking about it. It works in IE and chrome, but only one of the two forms is submitted in firebox. Using httpfox to capture the package, a mistake is prompted: Post (about) ns_ BINDING_ The following is a brief record of the process

Initial code:

window.onload =  autoReturn;

function autoReturn()
{
    var value = window.confirm("auto return or not?");
	if(value==true)
    {
	ajaxNotify();
	//return form
	document.return_form.submit();
    }
}

function ajaxNotify()
{
    var xmlhttp;
    if(window.XMLHttpRequest)
    {
        xmlhttp = new XMLHttpRequest();
    }
    else
    {
	 xmlhttp = new ActiveObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function()
    {
	 if(xmlhttp.readyState==4 && xmlhttp.status==200)
	 {
	 	console.log(xmlhttp.responseText);
	 }
    }
    //notify form
    var form = document.notify_form;
    var inputs = form.getElementsByTagName('input');
    var postData = '';
    for(var i=0, len=inputs.length; i<len; i++)
    {
        if(i!=0)
	    postData += '&';
        postData += inputs[i].name + '=' + inputs[i].value;
    }
    xmlhttp.open("POST", form.action, true);
    xmlhttp.send(postData);
    console.log("postData=" + postData);
}

The above is the original code, because the page is very simple, there is no jQuery and other plug-ins. After several times of testing in Firefox, it is found that the form submitted by Ajax post method is always unable to be submitted

POST (Aborted) NS_ BINDING_ The content in the HTTP fox request package is error loading content (NS)_ ERROR_ DOCUMENT_ NOT_ CACHED)。 I searched the Internet and found that many people met ns_ ERROR_ DOCUMENT_ NOT_ Most of the errors in cached are related to the configuration of fire cache parameters. For details, please refer to httpfox. However, this problem is not consistent with what I encountered. Under the reminder of @ Yuanbo, we use the encoding component method of JS to encode the data field once, and set the HTTP header information. The code is as follows:

After encode:

//notify form
    var form = document.notify_form;
    var inputs = form.getElementsByTagName('input');
    var postArr = [];
    for(var i=0, len=inputs.length; i<len; i++)
    {
	postArr.push(inputs[i].name + "=" + encodeURIComponent(inputs[i].value));
    }
    xmlhttp.open("POST", form.action, true);
    xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xmlhttp.send(postArr.join('&'));
    console.log("postData=" + postArr.join('&'));

However, there are still problems. No way, had to comment out the code to submit the page, only to submit the post part, even can be submitted. At this time, you will find the power of professionalism, @ Yuanbo pointed out, did firebox cancel the previous post when submitting the form?This analysis coincides with the previous error message. According to this idea, the code is further adjusted: wait for the post method to return, then submit, and set the timeout to forcibly submit the page

The final code is:

window.onload =  autoReturn;

function autoReturn()
{
    var value = window.confirm("auto return or not?");
    if(value==true)
    {
	ajaxNotify();
    }
}

function ajaxNotify()
{
    var xmlhttp;
    if(window.XMLHttpRequest)
    {
        xmlhttp = new XMLHttpRequest();
    }
    else
    {
	xmlhttp = new ActiveObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function()
    {
	document.return_form.submit();
	if(xmlhttp.readyState==4 && xmlhttp.status==200)
	{
	    console.log(xmlhttp.responseText);
	}
    }
    //notify form
    var form = document.notify_form;
    var inputs = form.getElementsByTagName('input');
    var postArr = [];
    for(var i=0, len=inputs.length; i<len; i++)
    {
	postArr.push(inputs[i].name + "=" + encodeURIComponent(inputs[i].value));
    }
    xmlhttp.open("POST", form.action, true);
    xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xmlhttp.send(postArr.join('&'));
    setTimeout(function(){
	document.payment_return.submit();
    }, 500);
    console.log("postData=" + postArr.join('&'));
}

Summary:

Front end code is closely related to the browser, understanding the basic principles of the browser can write more robust code