How to send data to servlet using ajax with a submit button

Question

I am new with servlet, I want to get the data in the servlet using ajax and jquery. it execute but i did not get data in servlet on the click of the submit button the only error part is execute of ajax my index page is

 I am new with servlet, I want to get the data in the servlet using ajax and jquery. it execute but i did not get data in servlet

on the click of the submit button the only error part is execute of ajax my index page is

<html>
    <head>
        <title>First jQuery Example</title>
        <script type="text/javascript"
            src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
        </script>
    </head>
    <body>
        <div align=center>
            <form id="myform">
                <pre>
                    Name:
                    <input type="text" name='name' id='name' />
                    Email:
                    <input type='text' name='email' id='email' />
                    Address:
                    <input type='text' name='address' id='address'>
                        <input type='submit' value='submit' id='mysubmit'>
                </pre>
            </form>
        </div>
        <script type="text/javascript">
            $(document).ready(function() {
                alert("Onready the page");
                $("#myform").on('submit',(function(e){
                    alert("button clicked");
                    e.preventDefault();
                    var name=$("#name").val();
                    var address=$("#address").val();
                    var email=$("#email").val();
                    $.ajax({
                        url: "reg",
                        type: "GET",
                        data:{name:name,email:email,address:address},
                        contentType: false,
                        cache: false,
                        processData:false,
                        success: function(data){
                            alert(data);
                        },
                        error: function(){
                            alert("error");
                        }
                    });
                }));
            });
        </script>
    </body>
</html>

score 3 · Answer 1 · answered Feb 01 '16 at 09:42

3

1 ) import latest jquery file
2 )

<script>$(".your form class").on('submit',(function(e){
        e.preventDefault();
        $.ajax({
            url: "Servlet Path",
            type: "POST",
            data:  new FormData(this),
            contentType: false,
            cache: false,
            processData:false,
            success: function(data){
                alert(data);
            },
            error: function(){
                alert("error");
            }           
        })
    }));</script/>

answered Feb 01 '16 at 09:42

Pratik Bhalodiya

736
7
14

Ok I realized this is what was needed and this is correct. Just one point. If you want the request to be asynchronous (which is the whole purpose of ajax in case), mention async: true in the request body. That will serve the purpose. – Ankit Khettry Feb 01 '16 at 09:57
1

Also, I dont think you can have spaces between class-name-text in $(".your form class") . – Ankit Khettry Feb 01 '16 at 10:00
i just put it for your knowledge so you can remove it and replace with your class – Pratik Bhalodiya Feb 01 '16 at 10:11
importing latest jquery solved the issue – Wiz Jan 04 '18 at 14:31

Ankit Khettry · Answer 2 · 2016-02-01T09:58:50.667

You don't need ajax to send data to your servlet. You need to define a route to your servlet in web.xml, and mention a submit action for your form. For example,

 <servlet>
        <servlet-name>HelloForm</servlet-name>
        <servlet-class>HelloForm</servlet-class>
 </servlet>

 <servlet-mapping>
        <servlet-name>HelloForm</servlet-name>
        <url-pattern>/HelloForm</url-pattern>
 </servlet-mapping>

This is the entry for your application's web.xml file and

<form action="HelloForm" method="GET">

This needs to be your form tag for an example servlet with class name 'HelloForm'. Clicking the submit button of this form will send your form field data to your servlet. Take care of the 'name' of the form fields. To access a field named 'field 1' (Example Ninput name="field1">), the code in your servlet needs to be request.getParameter("field1").

Hope this clarifies your doubts.

Ok, I realized why you would need AJAX. Pratik's answer would serve your purpose. Added a comment below his answer. — Ankit Khettry, Feb 01 '16 at 09:58

How to send data to servlet using ajax with a submit button

2 Answers2