问题

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.

回答1:

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 ?

回答2:

JavaScript doesn't post the right values because of wrong HTML elements properties.

Try changing the name property of elements username and password into id property as requested by your JavaScript code.

The result will be something like this:

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

来源：https://stackoverflow.com/questions/23355220/post-data-to-cgi-file-using-xmlhttprequest-causes-badheader

标签

javascript