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

最新推荐文章于 2025-01-10 05:51:42 发布

原创最新推荐文章于 2025-01-10 05:51:42 发布 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #html #javascript #xmlhttprequest #parameters #button

本文介绍如何利用AJAX技术实现HTML表单的数据发送及服务器响应展示，无需刷新页面即可完成交互过程，包括AJAX的工作原理、实现代码及应用场景。

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 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:

Server-Response:

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" 
   onclick="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. 
___FCKsi___1

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:




    my test
    1
    fdsfsd my test2
    4
    5
    6 
 



Server-Response:
___FCKsi___4

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" 
   onclick="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);
?>