Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jun 2013
    Location
    Calgary AB,Canada
    Posts
    55
    Thanks
    28
    Thanked 1 Time in 1 Post

    Sending more than 1 parameter - AJAX using Vanila JavaScript.

    Hi,

    I am learning AJAX at the moment. Can anybody please tell me how to send more than 1 parameter ?

    For example, I am typing name, city and age and upon clicking the button, sending all 3 info (name/city/age) to the server via AJAX.

    I am using pure vanila JavaScript (no JQuery).

    Code:
            <script>        
                function postEmp(pname,pcity,page)
                {
                    var xmlhttp;  
                    var params = "name=" + pname;
    		// how to pass the other 2 parameters here............ ?
    
    
    
    
                    if (str==="")
                      {
                      document.getElementById("txtHint").innerHTML="";
                      return;
                      }
                    if (window.XMLHttpRequest)
                      {// code for IE7+, Firefox, Chrome, Opera, Safari
                      xmlhttp=new XMLHttpRequest();
                      }
                    else
                      {// code for IE6, IE5
                      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                      }
                      
                    xmlhttp.open("POST","postDetail.php",true);
                    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                    xmlhttp.setRequestHeader("Content-length", params.length);
                    xmlhttp.setRequestHeader("Connection", "close");                
                    
                    xmlhttp.onreadystatechange=function()
                      {
                      if (xmlhttp.readyState===4 && xmlhttp.status===200)
                        {
                        document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
                        }
                      };
                    xmlhttp.send(params);
                }
            </script>        
    
    
            <form action="" > 
                <input type="text"   id="name" name="name" />
                <input type="text"   id="city" name="city" />
                <input type="text"   id="age" name="age" />
                <input type="button" name="submit" value="Submit" onclick="return postEmp(name.value,city.value,age.value);" />
            </form>
    
    	<div id="txtHint">success/failure will be shown here.......</div>



    postDetail.php :

    Code:
    $pID = intval($_POST['name']);
    ..
    .. writing to database
    ..
    if success echo "success"


    And also, what are the advantages and disadvantages (drawbacks) of using JQuery for AJAX over pure vanila JavaScript ?

    Thanks in advance,


    Isaac

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Code:
    var params = "name=" + encodeURIComponent(pname) + "&city=" + encodeURIComponent(pcity) + '&age=' + encodeURIComponent(page);
    You need to encode the query string parameters.

  • Users who have thanked glenngv for this post:

    Isaac Sureshkum (01-14-2014)

  • #3
    New Coder
    Join Date
    Jun 2013
    Location
    Calgary AB,Canada
    Posts
    55
    Thanks
    28
    Thanked 1 Time in 1 Post
    Thanks Glenngv, then one more question, how would I extract it in the server side program?

    Will it be like this ?

    $pName = $_POST['name'];
    $pCity = $_POST['city'];
    $pAge = $_POST['age'];

    Thanks

    Isaac
    Last edited by Isaac Sureshkum; 01-14-2014 at 09:42 PM.

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Yes, since you are using POST method in the ajax request.

  • Users who have thanked glenngv for this post:

    Isaac Sureshkum (01-15-2014)


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •