POST data to CGI file using XMLHttpRequest causes BadHeader
Question: When I try posting data to my CGI file, my CGI file says the actual post data
is invalid. I am using HTML/JavaScript for the front end and Python for the
backend.

Works:

    
    
    <form name="login" action="/cgi-bin/register.py" method="POST">
    Username:<input type="text" name="username"><br>
    Password:<input type="password" name="password"><br>
    Confirm password:<input type="password" name="confirmpassword"><br>
    </form>
    

However, this causes the page to refresh. I am trying to avoid this and have
text display within the same page(without reloading). Hence, I have chosen to
use an XMLHTTPRequest to asynchronously process this event.

This is what I want to achieve:

    
    
    <script>
    function validateLogin()
    {
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    
    if (username.length <= 0 || password.length <= 0)
      {
      document.alert("The username or password cannot be blank");
      return;
      }
    
    var xmlhttp;
    
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
      } else {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    
    xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("resultText").innerHTML=xmlhttp.responseText;
            }else if (xmlhttp.readyState==4) {
                document.write(xmlhttp.status + xmlhttp.statusText);
            }
    }
    
    xmlhttp.open("POST","/cgi-bin/login.cgi",true);
    xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset=UTF-8')
    xmlhttp.send("username=" + username + "&password=" + password);
    }
    </script>
    

CGI File:

    
    
    #!/usr/bin/python
    
    import cgi
    from dbmanager import openConnection
    from passlib.hash import sha256_crypt
    
    s = "Content-type: text/html\n\n\n"
    
    form = cgi.FieldStorage()
    
    username = form["username"].value
    password = form["password"].value
    message = None
    

I am getting an error in python stating `Bad header=FieldStorage(None, None,`

I don't get this error when I do it the first way, but the second way is
giving me this error. I **need** it to work the second way.


Answer: For echo Server :

# HTML :

    
    
    <html>
     <head>
    
     <script>
    function validateLogin()
    {
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    
    if (username.length <= 0 || password.length <= 0)
      {
      document.alert("The username or password cannot be blank");
      return;
      }
    
    var xmlhttp;
    
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
      } else {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    
    xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("resultText").innerHTML=xmlhttp.responseText;
            }else if (xmlhttp.readyState==4) {
                document.write(xmlhttp.status + xmlhttp.statusText);
            }
    }
    
    xmlhttp.open("POST","../post_test.py",true);
    xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset=UTF-8')
    xmlhttp.send("username=" + username + "&password=" + password);
    }
    </script>
     </head>
    
    
    
    
     <body>
    
    
    <form name="login" >
    Username:<input type="text"  id="username"><br>
    Password:<input type="text"  id="password"><br>
    Confirm password:<input type="text"  id="repassword"><br>
    
    </form>
    <button onclick="validateLogin()">Login</button>
    <span id="resultText"></span>
    </body>
    </html>
    

# CGI-SCRIPT:

    
    
    #!/usr/bin/python2.7
    
    import cgi
    
    
    form = cgi.FieldStorage()
    print "Content-Type: text/html;charset=utf-8"
    print "Access-Control-Allow-Origin:*"
    print
    print form
    

Replace input type `password` to `text` because got security bugs !

Yo got wrong answer on cgi script. Who know service is live ? So need some
type, status, header, content..

Check post address : `..//` mean `currient_uri + new_path + target`

On javascript: Call by ID but where ID parameter ?

