AJAX Form POST Request - HTML Form POST/Submit with AJAX

最新推荐文章于 2022-02-15 17:58:43 发布

橙思

最新推荐文章于 2022-02-15 17:58:43 发布

阅读量2.5k

点赞数

文章标签： ajax html javascript xmlhttprequest parameters button

本文链接：https://blog.csdn.net/yaland/article/details/888901

版权

NOTE: It is not possible to make file uploads with AJAX, since Javascript does not have access to local files! If you want to upload files, you still need to utilize e.g. an iFrame or submit the form the regular way.

UPDATE: In order to avoid a syntax error in Firefox, if the returned content is NOT valid XML, use the overrideMimeType method to set the content-type.

         	// set type accordingly to anticipated content type
            //http_request.overrideMimeType('text/xml');
            http_request.overrideMimeType('text/html');

AJAX is the new hype in HTML/Javascript, since Google came up with their nifty GMAIL application. AJAX allows to write web-applications without reloading/refreshing the page on user interaction (e.g. posting data to a server-side script). The traditional way of processing HTML forms was to submit them to the server, the server processed the data and sent a response. The drawback of this method is that the page was reloaded in the browser.

With AJAX the browser page is not reloading, but the data is just sent to the server for processing. The server saves the data or calculates something and sends back the answer. The AJAX javascript either displays the answer (page) or does some action depending on the answer.

This example demonstrates a simple AJAX javascript for POSTing a complete HTML form to the server and displaying the response. The server-response is displayed in a "span" - the server-side script is a simple PHP script to display the contents of the $_POST global variable.

<script type="text/javascript"> </script> <script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"> </script>
UPDATE:
I've updated the form - now it also works with a normal submit button and also when the user just presses enter!

Test the whole hack here:

<script type="text/javascript" language="javascript">
   var http_request = false;
   function makePOSTRequest(url, parameters) {
      http_request = false;
      if (window.XMLHttpRequest) { // Mozilla, Safari,...
         http_request = new XMLHttpRequest();
         if (http_request.overrideMimeType) {
         	// set type accordingly to anticipated content type
            //http_request.overrideMimeType('text/xml');
            http_request.overrideMimeType('text/html');
         }
      } else if (window.ActiveXObject) { // IE
         try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
         } catch (e) {
            try {
               http_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
         }
      }
      if (!http_request) {
         alert('Cannot create XMLHTTP instance');
         return false;
      }
      
      http_request.onreadystatechange = alertContents;
      http_request.open('POST', url, true);
      http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      http_request.setRequestHeader("Content-length", parameters.length);
      http_request.setRequestHeader("Connection", "close");
      http_request.send(parameters);
   }

   function alertContents() {
      if (http_request.readyState == 4) {
         if (http_request.status == 200) {
            //alert(http_request.responseText);
            result = http_request.responseText;
            document.getElementById('myspan').innerHTML = result;            
         } else {
            alert('There was a problem with the request.');
         }
      }
   }
   
   function get(obj) {
      var poststr = "mytextarea1=" + encodeURI( document.getElementById("mytextarea1").value ) +
                    "&mytextarea2=" + encodeURI( document.getElementById("mytextarea2").value );
      makePOSTRequest('post.php', poststr);
   }
</script>


<form action="javascript:get(document.getElementById('myform'));" name="myform" id="myform">
<textarea id="mytextarea1">my test
1
2
3
</textarea>
<textarea id="mytextarea2">my test2
4
5
6</textarea>
<br>
<input type="button" name="button" value="Submit" 
   οnclick="javascript:get(this.parentNode);">
<input type="submit" name="button" value="Normal Submit Button">
</form>

<br><br>
Server-Response:<br>
<hr>
<span name="myspan" id="myspan"></span>
<hr>

post.php

<?
print_r(NOTE: It is not possible to make file uploads with AJAX, since Javascript does not have access to local files! If you want to upload files, you still need to utilize e.g. an iFrame or submit the form the regular way. 

UPDATE: In order to avoid a syntax error in Firefox, if the returned content is NOT valid XML, use the overrideMimeType method to set the content-type.
         	// set type accordingly to anticipated content type
            //http_request.overrideMimeType('text/xml');
            http_request.overrideMimeType('text/html');



AJAX is the new hype in HTML/Javascript, since Google came up with their nifty GMAIL application. AJAX allows to write web-applications without reloading/refreshing the page on user interaction (e.g. posting data to a server-side script). The traditional way of processing HTML forms was to submit them to the server, the server processed the data and sent a response. The drawback of this method is that the page was reloaded in the browser. 
With AJAX the browser page is not reloading, but the data is just sent to the server for processing. The server saves the data or calculates something and sends back the answer. The AJAX javascript either displays the answer (page) or does some action depending on the answer. 

This example demonstrates a simple AJAX javascript for POSTing a complete HTML form to the server and displaying the response. The server-response is displayed in a "span" - the server-side script is a simple PHP script to display the contents of the $_POST global variable. 


<script type="text/javascript">___FCKsi___0</script>
<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">___FCKsi___1</script>

UPDATE:
I've updated the form - now it also works with a normal submit button and also when the user just presses enter! 

Test the whole hack here:


<script language="javascript" type="text/javascript">___FCKsi___2</script>

 
 
    
  
  my test
    1
    fdsfsd 
  
  my test2
    4
    5
    6 
  
  

  
   
  
  

 
 


Server-Response:

 
 

 
 



<script type="text/javascript">___FCKsi___3</script>
<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">___FCKsi___4</script>

post.html:

<script type="text/javascript" language="javascript">
   var http_request = false;
   function makePOSTRequest(url, parameters) {
      http_request = false;
      if (window.XMLHttpRequest) { // Mozilla, Safari,...
         http_request = new XMLHttpRequest();
         if (http_request.overrideMimeType) {
         	// set type accordingly to anticipated content type
            //http_request.overrideMimeType('text/xml');
            http_request.overrideMimeType('text/html');
         }
      } else if (window.ActiveXObject) { // IE
         try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
         } catch (e) {
            try {
               http_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
         }
      }
      if (!http_request) {
         alert('Cannot create XMLHTTP instance');
         return false;
      }
      
      http_request.onreadystatechange = alertContents;
      http_request.open('POST', url, true);
      http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      http_request.setRequestHeader("Content-length", parameters.length);
      http_request.setRequestHeader("Connection", "close");
      http_request.send(parameters);
   }

   function alertContents() {
      if (http_request.readyState == 4) {
         if (http_request.status == 200) {
            //alert(http_request.responseText);
            result = http_request.responseText;
            document.getElementById('myspan').innerHTML = result;            
         } else {
            alert('There was a problem with the request.');
         }
      }
   }
   
   function get(obj) {
      var poststr = "mytextarea1=" + encodeURI( document.getElementById("mytextarea1").value ) +
                    "&mytextarea2=" + encodeURI( document.getElementById("mytextarea2").value );
      makePOSTRequest('post.php', poststr);
   }
</script>


<form action="javascript:get(document.getElementById('myform'));" name="myform" id="myform">
<textarea id="mytextarea1">my test
1
2
3
</textarea>
<textarea id="mytextarea2">my test2
4
5
6</textarea>
<br>
<input type="button" name="button" value="Submit" 
   οnclick="javascript:get(this.parentNode);">
<input type="submit" name="button" value="Normal Submit Button">
</form>

<br><br>
Server-Response:<br>
<hr>
<span name="myspan" id="myspan"></span>
<hr>


post.php

___FCKpd___2

 
POST);
?>