Question

I have send data from my HTML page to servlet , this is the code

 <form name="search" id="search_bar" action="PathServlet" method="get">
        <table border="5" cellspacing="5" cellpadding="0"><tr>
        <td>
            <input Style="width:300px;"  name="one" type="text"  value="Enter Your Search Here" onFocus="clearText(this)" onBlur="clearText(this)">  <br/>
            <input Style="width:300px;"  name="two" type="text"  value="Enter Your Search Here" onFocus="clearText(this)" onBlur="clearText(this)">  <br/>


            <input type="submit" value="search"/></td></tr>
        </table>    
    </form>

In the servlet I create a list of XML

        response.setContentType("text/xml;charset=UTF-8");
    PrintWriter out = response.getWriter();
    out.append("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
    out.append("<response>");
    try {
        for (int j = 0; j < path.size(); j++) {

            List<Pipes> tempDeal = PipesDAO.getInstance().findPath(
                    path.get(j).name, path.get(j).name);
            for (int i = 0; i < tempDeal.size(); i++) {
                result += "<deal>" + "<name>" + tempDeal.get(i).getName()
                        + "</name>" + "<lat>" + tempDeal.get(i).getLat()
                        + "</lat>" + "<lon>" + tempDeal.get(i).getLon()
                        + "</lon>" + "<desc>" + tempDeal.get(i).getId()
                        + "</desc>" + "</deal>";
            }
        }
        out.append(result);
        out.append("</response>");
    } finally {
        out.close();
    }

So now I want to return the respond data to a custom HTML page with Ajax.

         $.ajax({

But I don’t understand how to retrieve the data in the Ajax.

any idea??

Answer 1

Use jQuery to post the data using ajax. Check this link for step-by-step instructions:
http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/

Sample code snippet

$(document).ready(function() {
    $('#form').submit(function() {
        var searchtext = $('#search').val();
        $.ajax({
            type:       "post",
            url:        "/PathToServlet",
            data:       "q=" + searchtext ,
            success:    function(data) {
              alert('Data Recieved : ' + data);
            }
        });

    return false;
    });
});