Hi ...

i need to inserting around 20 values...which method is best in ajax post or get..i dont know abt ajax..plz send me ajax registration or small form (which having inserting records into db) ...i can learn by using this....

Thank u..

Recommended Answers

All 5 Replies

Here is a simple AJAX form submission using POST. It basically sends the first and last name to the server, and the server outputs the form information and the date on the server. Very simple, but easy to build on.
post.php:

<?php
$FirstName = $_POST['FirstName'];
$LastName = $_POST['LastName'];
$today = date("m/d/Y");
//send output back to page.
echo "Hello $FirstName $LastName. Todays date is $today.";
?>

html file(name it whatever you want):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<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(http_request.status);
         }
      }
   }
   
   function get(obj) {
      var poststr = "FirstName=" + encodeURI( document.getElementById("FirstName").value ) +
                    "&LastName=" + encodeURI( document.getElementById("LastName").value );
      makePOSTRequest('post.php', poststr);
   }
</script>
</head>
<body>
<form action="javascript:get(document.getElementById('myform'));" name="myform" id="myform">
<input type="text" id="FirstName" />
<input type="text" id="LastName" />
<input type="Submit" value="Submit" />
</form>
<div id="myspan">This area will be filled with the servers output after submit is clicked.</div>
</body>
</html>

Try it out and study how it works.

commented: Good example.. +10

Thank You....
its easy to understand...
is it same for more no.of fields? or is there any other way to send more no.of fields....

Yes, the same for more fields. Basically, if you add a text field into the form, you'll need to update the javascript variable, postr on line 52 above so that it will send the value to the php file.

Also, for better design, the javascript should be placed in an external .js file (for better organization and so it can be cached) and called from the head of the document.

Yes, the same for more fields. Basically, if you add a text field into the form, you'll need to update the javascript variable, postr on line 52 above so that it will send the value to the php file.

Also, for better design, the javascript should be placed in an external .js file (for better organization and so it can be cached) and called from the head of the document.

Hi ..

Thank u....i learn a lot from u.....
i cleared my doubt for inserting data....

when i retreiving data from database, how can i get values from php page to html page by using ajax...i mean same concept in reverse formate...

Thank u once again...

Hi ..

Thank u....i learn a lot from u.....
i cleared my doubt for inserting data....

when i retreiving data from database, how can i get values from php page to html page by using ajax...i mean same concept in reverse formate...

Thank u once again...

Im kinda more like a beginner at this but i am familliar of using ajax (thanks to marky and the mct team who taught me)

if you try to access the post.php page directly, what prints out in this page is what is forwarded by this script to your page. in short, your page gets the contents of the post.php and display it there.

now to display the data, you must edit the line 52 to meet your query requirements. as soon as this is done, you edit the post.php to get the data and print it on the post.php page. automatically, the script will get the data from the post.php page and displays it to your current page.

example:

you have a page with an item and its button with "get item data" as its value. hidden with that button is a hidden input tag with that item's id. when you click the button, the id is passed to the script which it will then pass to the post.php. then the post.php will display the data you need using that item's id number on the post.php page. then, since its the purpose of ajax, the script will get the data from the post.php page then on to your page.

it's simple as that actually.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.