CODEWITHSUNDEEP
javascriptjavajsonformsjsp
Leonard
Leonard

Reputation: 79

don't see Json data result in JSP

In my .JSP file i have : 

<form id="form">
    <input type="text" name="name" id="name"><br><br>
    <input type="text" name="address" id="address"><br><br>
    <input value="Submit" type="submit" onclick="submitform()">
</form>
<p id="result"></p>
</body>

and my Javascript function is: 

function submitform(){

var  userName = $('#name').val();
var  userAdd = $('#address').val();

var myVar = JSON.stringify({name: userName, address:userAdd});

        $ajax({
            url: 'jsonserverlet',
            type: 'POST',
            data: 'per=' + myVar,
            dataType: 'json',

            success:function(data){

            var json= JSON.stringify(data);
            alert(json + " " + data.name + " " + data.address);
            $("#result").html(data.name + " " + data.address);

            }

        });



};

Also I created a new class User.java with some data, then in my Jsoncontent.java , in method POST I set my variables and created a request for json like this:

        String jsonData = request.getParameter("per");
        System.out.println(jsonData);

        Gson gson = new Gson();

        User data = gson.fromJson(jsonData, User.class);

        System.out.println("Fetching json object");
        String name = data.getName();
        String address = data.getAddress();

        System.out.println("User Name: "+ name );
        System.out.println("User Address: "+ address );

        User user = new User();

        user.setName(name);
        user.setAddress(address);

        String jsonObj = gson.toJson(user);
        System.out.println(jsonObj);

        out.print(jsonObj);

So,all works without errors or warnings but I don't see the result when I click on submit button. I don't know why.

Upvotes: 3

Views: 544

Answers (2)

duck codes
duck codes

Reputation: 41

You missed the point: you have $ajax but should be $.ajax

Also you can submit form instead of json, like:

function submitform(){
        $.ajax({
            url: 'jsonserverlet',
            type: 'POST',
            data: $("#form").serialize(),
            dataType: 'json',

            success:function(data){
            var json= JSON.stringify(data);
            alert(json + " " + data.name + " " + data.address);
            $("#result").html(data.name + " " + data.address);
            }
        });
}

And in the servlet get the parameters "name" and "address":

public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws IOException {
    ...
    String name = request.getParameter("name");
    String address = request.getParameter("address");
    ...
}

CHANGES IN ANSWER

Sorry, I only paid attention to the conclusion of the alert message. Alan Hay is right in his remark, you can use it or change the type to a button. Anyway, here is the working code

Servlet.java

import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet(urlPatterns = "/jsonserverlet")
public class Servlet extends HttpServlet {

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        String jsonData = request.getParameter("per");
        out.print(jsonData);
    }
}

index.jsp

<html>
<head>
        <script src="http://code.jquery.com/jquery-2.2.4.js"
         type="text/javascript"></script>
</head>
<body>
        <form id="form">
            <input type="text" name="name" id="name"><br><br>
            <input type="text" name="address" id="address"><br><br>
            <input value="Submit" type="button" onclick="submitform()">
        </form>
        <p id="result"></p>
</body>
<script>
function submitform(){
var  userName = $('#name').val();
var  userAdd = $('#address').val();

var myVar = JSON.stringify({name: userName, address:userAdd});
        $.ajax({
            url: 'jsonserverlet',
            type: 'POST',
            data: 'per=' + myVar,
            dataType: 'json',

            success:function(data){

            var json= JSON.stringify(data);
            alert(json + " " + data.name + " " + data.address);
            $("#result").html(data.name + " " + data.address);
            }
        });
}
</script>
</html>

Upvotes: 1

Alan Hay
Alan Hay

Reputation: 23226

You note in the comments to the other answer that i still have a white browser page yet without name and address which indicates that the browser is navigating away from the page you are currently viewing and, therefore, you are not making an Ajax request - or more likely you are making an Ajax request but are also making a standard HTTP Post request due to the fact that you have not disabled the default submit event.

You therefore need to disable the default submit action.

https://api.jquery.com/event.preventdefault/ https://www.w3schools.com/jquery/event_preventdefault.asp

<form id="form">
    <input type="text" name="name" id="name"><br><br>
    <input type="text" name="address" id="address"><br><br>
    <input value="Submit" id="submit" type="submit">
</form>
<p id="result"></p>
</body>


$('#submit').click(function(e){
    e.preventDefault(); //prevent standard post

        $.ajax({
            url: 'jsonserverlet',
            type: 'POST',
            data: $("#form").serialize(),
            dataType: 'json',

            success:function(data){
            var json= JSON.stringify(data);
            alert(json + " " + data.name + " " + data.address);
            $("#result").html(data.name + " " + data.address);
            }
        });
})

Upvotes: 2

Related Questions