CODEWITHSUNDEEP
jqueryajaxjsp
Kumar
Kumar

Reputation: 130

jquery ajax post stops when called

I am new to web Development and I am developing a jsp web application for my college. I want to use ajax to do insert, update and delete operations in the table. But when the execution reaches to ajax script, the execution just freezes and no result is displayed. Below is my code:

<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Statement"%>
<%@page import="org.h2.tools.Server"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@page import="org.h2.Driver"%>

<link href="BSTemplate/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<link href="Styles/login.css" rel="stylesheet">
<script src="BSTemplate/4.1.3/js/bootstrap.min.js"></script>
<script src="Scripts/JQuery/3.2.1/jquery.min.js"></script>
<script>
function post_(){    
    $.post("newjsp.ajax.jsp",
    {
      username: document.getElementById("username").value,
      password: document.getElementById("password").value
    },
    function(data,status){
        if(data.trim() ==="success")
            window.location="Home.jsp";
        else
            alert("Data: " + data.trim() + "\nStatus: " + status);
    });
}
</script>
<body>
<div id="login">
    <div class="container">
        <div id="login-row" class="row justify-content-center align-items-center">
            <center><img src="Img/Image1.png" alt="Image Cannot Be Displayed"/></center>
            <div id="login-column" class="col-md-6">
                <div id="login-box"  class="col-md-12">
                    <div id="login-form" class="form">
                        <h3 class="text-center text-info">Member Login</h3>
                        <div class="form-group">
                            <label for="username" class="text-info">Username:</label><br>
                            <input type="text" name="username" id="username" placeholder="User Name" tabindex="1" class="form-control" required="true" autofocus>
                        </div>
                        <div class="form-group">
                            <label for="password" class="text-info">Password:</label><br>
                            <input type="password" placeholder="Password"  required="true" name="password" id="password" tabindex="2" class="form-control">
                        </div>
                        <div class="form-group">
                            <input type="submit" name="submit" onclick="post_()" tabindex="3" class="btn btn-info btn-md" style="width:100px" value="Login">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

Upvotes: 1

Views: 50

Answers (2)

Sumesh TG
Sumesh TG

Reputation: 2575

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<link href="BSTemplate/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<link href="Styles/login.css" rel="stylesheet">
<script src="BSTemplate/4.1.3/js/bootstrap.min.js"></script>
<script src="Scripts/JQuery/3.2.1/jquery.min.js"></script>
<script>

function post_(){  

    $.post("newjsp.ajax.jsp",
    {
      username: document.getElementById("username").value,
      password: document.getElementById("password").value
    },
    function(data,status){
    alert(status);
        if(data.trim() ==="success")
            window.location="Home.jsp";
        else
            alert("Data: " + data.trim() + "\nStatus: " + status);
    }).fail(function(msg) {
    alert( "error"+JSON.stringify(msg) );
  });
}
</script>
<body>
<div id="login">
    <div class="container">
        <div id="login-row" class="row justify-content-center align-items-center">
            <center><img src="Img/Image1.png" alt="Image Cannot Be Displayed"/></center>
            <div id="login-column" class="col-md-6">
                <div id="login-box"  class="col-md-12">
                    <div id="login-form" class="form">
                        <h3 class="text-center text-info">Member Login</h3>
                        <div class="form-group">
                            <label for="username" class="text-info">Username:</label><br>
                            <input type="text" name="username" id="username" placeholder="User Name" tabindex="1" class="form-control" required="true" autofocus>
                        </div>
                        <div class="form-group">
                            <label for="password" class="text-info">Password:</label><br>
                            <input type="password" placeholder="Password"  required="true" name="password" id="password" tabindex="2" class="form-control">
                        </div>
                        <div class="form-group">
                            <input type="submit" name="submit" onclick="post_()" tabindex="3" class="btn btn-info btn-md" style="width:100px" value="Login">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

This works. Please check your jquery library loading correctly.

Upvotes: 1

Ahmed Sunny
Ahmed Sunny

Reputation: 2243

Load js in correct order,

you need to load Jquery library first, and then anything else because other library or js code will work only if jquery is loaded,

<script src="Scripts/JQuery/3.2.1/jquery.min.js"></script> 
<script src="BSTemplate/4.1.3/js/bootstrap.min.js"></script>

PS: first you should always check error messages you get

Upvotes: 1

Related Questions