Send Multiple data with ajax

Question

I want to use ajax for add data in database and i found following code in net and it is working fine.

<script language='javascript'>
reqObj=null;
function saveCust(){
    document.getElementById('res').innerHTML='processing';
    if(window.XMLHttpRequest){
        reqObj=new XMLHttpRequest();
    }else {
        reqObj=new ActiveXObject('Microsoft.XMLHTTP');
    }
    reqObj.onreadystatechange=processSave;
    reqObj.open('POST','./custSave?reqObj.open('POST','./cName?id='+document.getElementById('CustCode').value,true);,true);
    reqObj.send(null);
}
function processSave(){
    if(reqObj.readyState==4){
        document.getElementById('res').innerHTML=reqObj.responseText;
    }
}
</script>

Above code sends only one String but, i have 5 Strings in my form.

Please anybody alter the code for sending multiple data.

Community · Accepted Answer · 2017-05-23 11:56:51Z

The problem is that you're sending a single parameter in the reqObj.open function:

reqObj.open('POST','./custSave?reqObj.open('POST','./cName?id='+document.getElementById('CustCode').value,true);,true);

Note that the only parameter you send is id.

You can add more parameters in the flavor of QueryString:

id=something&otherParameter=else //and more parameters

IMO the easiest way to handle an ajax request would be using jQuery, as shown and heavily explained by BalusC in How to use Servlets and Ajax?.

Based on the samples there and jQuery Ajax POST example with PHP, you can come with the following code:

Assuming the 5 Strings are in the form

function saveCust(){
    $('#res').html('processing');
    var $form = $(this);
    var serializedData = $form.serialize();
    $.post('./custSave', serializedData, function(responseText) {
        $('#res').html(responseText);
    });
}

Assuming there's data outside the form

function saveCust(){
    $('#res').html('processing');
    var $form = $(this);
    var serializedData = $form.serialize() + "&id=" + $('#CustCode').val();
    $.post('./custSave', serializedData, function(responseText) {
        $('#res').html(responseText);
    });
}

And you can even enhance this using more jQuery functions, but that's outside the scope of this answer.

You're welcome. If this post helps you to solve your problem, please mark it as the answer by clicking in the check below the rep points.

Collectives™ on Stack Overflow

Send Multiple data with ajax

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related