Ajax for stringifying values from rest controller in HTML file does not get executed
Question
I am using an ajax script to stringify the values from a controller of an application which is spring rest web service application..problem is when the values in html in form i click a button, this script should work but doesn't get executed..can someone help me what's wrong in the script, is a load problem or something else, and what is the right way of making it executable???
Ajax Script
load$(document).ready(function () {
$("#submit").click(function () {
var url = 'http://localhost:8080/xxx/authenticate';
var jsondata = JSON.stringify({
username: $('#inputEmail').val(),
password: $('#inputPassword').val()
});
postdata(url, jsondata, 1);
});
$('#register-dev').click(function () {
var url = 'http://localhost:8080/xxx/register';
alert(url);
var jsondata = JSON.stringify({
roleTb: {
roleId: parseInt($('#role').val())
},
firstName: $('#firstname').val(),
lastName: $('#lastname').val(),
emailId: $('#email').val(),
username: $('#username').val(),
password: $('#password').val()
});
postdata(url, jsondata, 2);
});
function postdata(url, jsondata, formId) {
var request = $.ajax({
type: "POST",
url: url,
contentType: 'application/json',
data: jsondata
});
request.done(function (msg) {
if (formId == 1) {
if (msg.errorcode == 200 && msg.obj == true) {
alert("Authentication Successful");
} else {
alert("Authentication failed");
}
}
if (formId == 2) {
if (msg.errorcode == 200) {
alert("Registration Successful Your Access Id is " + msg.obj);
} else {
alert("Registration failed");
}
}
});
request.fail(function (jqXHR, textStatus) {
alert("Request failed: " + textStatus);
});
}
});
HTML FORM
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<!-- Title and other stuffs -->
<title>xxxxxx Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<!-- Stylesheets -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link href="css/style.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/ajax-handler.js"></script>
<script src="js/respond.min.js"></script>
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<!-- Favicon -->
</head>
<body>
<!-- Form area -->
<div class="admin-form">
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- Widget starts -->
<div class="widget worange">
<!-- Widget head -->
<div class="widget-head"> <i class="fa fa-lock"></i> Login</div>
<div class="widget-content">
<div class="padd">
<!-- Login form -->
<form class="form-horizontal">
<!-- Email -->
<div class="form-group">
<label class="control-label col-lg-3" for="inputEmail">Email</label>
<div class="col-lg-9">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<!-- Password -->
<div class="form-group">
<label class="control-label col-lg-3" for="inputPassword">Password</label>
<div class="col-lg-9">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<!-- Remember me checkbox and sign in button -->
<div class="form-group">
<div class="col-lg-9 col-lg-offset-3">
<div class="checkbox">
<label>
<input type="checkbox">Remember me</label>
</div>
</div>
</div>
<div class="col-lg-9 col-lg-offset-3">
<button type="button" id="submit" class="btn btn-info btn-sm">Sign in</button>
<button type="reset" class="btn btn-default btn-sm">Reset</button>
</div>
<br />
</form>
</div>
</div>
<div class="widget-foot">Not Registred? <a href="register.html">Register here</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
1 answers
solution1
0 ACCPTED 2015-02-15 17:47:11
You should prevent the default hard form submit if you wish to use asynchronous submission. Otherwise form gets refreshed
$("#submit").click(function (e) { e.preventDefault();check whether you really need to stringify the data. Normally, in most cases it's just enough to pass it as an object to jQuery.ajax() , unless the server really needs it as JSON string. jQuery internally does the necessary conversion. (serializes to query string) if it's an object or array.
var jsondata = { username: $('#inputEmail').val(), password: $('#inputPassword').val() };
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.