I am making ajax call to login with spring security but it shows username and password in the url no matter what.
ex: /?j_username=s&j_password=s
I am trying to find my mistake for a long time but I couldnt be able to see it. It is probably a small mistake.
here is my ajax call;
function performLogin() {
var j_username = $("#j_username").val();
var j_password = $("#j_password").val();
$.ajax({
cache: false,
type: 'POST',
url: "/login",
crossDomain: true,
async: false,
data: { 'j_username': j_username, 'j_password': j_password},
dataType: 'json',
beforeSend: function (xhr) {
xhr.setRequestHeader("x-ajax-call", "no-cache");
}
});
}
Thanks
EDIT:
It is resolved by adding `return false;`
But I am not sure if my approach is good. Here is the update;
'function performLogin() {
var j_username = $("#j_username").val();
var j_password = $("#j_password").val();
$.ajax({
cache: false,
type: 'POST',
url: "/Mojoping2/login",
crossDomain: true,
async: false,
data: { 'j_username': j_username, 'j_password': j_password},
dataType: 'json',
beforeSend: function (xhr) {
xhr.setRequestHeader("x-ajax-call", "no-cache");
},
success: window.location.reload()
});
return false;
}
It has nothing to do with the Ajax call. You are not cancelling the form submission!
function performLogin() {
var j_username = $("#j_username").val();
var j_password = $("#j_password").val();
$.ajax({
cache: false,
type: 'POST',
url: "/login",
crossDomain: true,
async: false,
data: { 'j_username': j_username, 'j_password': j_password},
dataType: 'json',
beforeSend: function (xhr) {
xhr.setRequestHeader("x-ajax-call", "no-cache");
}
});
return false;
}
and however you are adding the event
onsubmit="return performLogin();
If you are using jQuery to attach the event, you can use
function performLogin(evt) {
evt.preventDefault();
...
I created a jsfiddle to test your code and have been unable to replicate your bug. The POST request appears to submit normally (going via the chrome dev tools), and no extra GET values are appearing for me.
Demo: http://jsfiddle.net/5EXWT/1/
Out of interest, what version of jQuery are you using?
{this is just here so i can submit the jsfiddle}
Related
I am submiting a ajax request using POST method and I had got the error 414: Submitted URI too large
I had already search a possible solution to my issue but I could not resolve the issue.
There is my ajax request:
$('form[name=editClinic]').submit(function(e) {
e.preventDefault();
var url = "includes/news.php";
var form1 = $('#editClinic');
var formData = new FormData($(this)[0]);
$.ajax({
type: "POST",
url: url,
data: formData,
async: true,
success: function (data) {
var response = data.split("||");
if(response[0] == "true"){
$.notify(response[1],"success");
}
},
error: function(chr, desc, err){
$.notify(response[1],"error");
},
cache: false,
contentType: false,
processData: false
});
});
The URL that is creted is the following one:
http://localhost/Repositories/som/administrador/noticias-editar.php?countryBanner=1&datepicker=1969-12-31+04%3A00+PM&highlight=1&typeBanner=Small&category=Tips&editor=FAMO%3ASWISS&og_img=57&title_US_EN=How+to+choose+the+right+chair%3F&subTitle_US_EN=Find+out+the+right+one+for+you.&desc_US_EN=%3Cp%3EWorking+in+an+office+usually+involves+spending+a+lot+of+time+sitting+in+a+chair.+So+how+can+you+choose+the+right+one+for+you%3F%3C%2Fp%3E%3Cp%3EThe+number+of+people+working+in+offices+is+growing.+Most+of+them+will+spend+a+whole+day+sitting+in+a+chair%2C+working+in+front+of+a+computer+screen.%3C%2Fp%3E%3Cp%3EHowever%2C+this+position+is+detrimental+to+your+health.+Back+problems+arising+from+the+amount+of+time+spent+in+that+position+has+become+a+common+complaint.%3Cbr%3E%3C%2Fp%3E%3Cp%3EHow+can+you+avoid+such+problems%3F%3Cbr%3E%3C%2Fp%3E%3Cp%3ETo+avoid+the+emergence+of+back+problems%2C+preventive+action+must+be+taken.+One+form+of+action+is+to+be+careful+with+your+posture.+But+equally+important+is+the+choice+of+an+ergonomic+chair%3B+it+should+respond+to+the+demands+of+your+body+and+spine%2C+and+supports+and+promotes+good+posture.%3Cbr%3E%3C%2Fp%3E%3Cp%3EWhat+features+should+the+chair+have%3F%3Cbr%3E%3C%2Fp%3E%3Cp%3E1.+It+should+be+adjustable+%E2%80%93+In+terms+of+sitting+height%2C+arm+length%2C+and+inclination%2C+among+others.+The+greater+the+adjustment+options%2C+the+greater+the+likelihood+that+it+will+be+compatible+to+your+needs.%3Cbr%3E%3C%2Fp%3E%3Cp%3E2.+Keep+back+support+in+mind%E2%80%93+If+you+spend+many+hours+sitting%2C+it+is+important+that+the+chair+accommodates+the+curvature+of+your+spine.%3Cbr%3E%3C%2Fp%3E%3Cp%3E3.+Take+upholstering+into+account+%E2%80%93+The+material+of+the+chair+should+be+sufficiently+padded+to+be+comfortable+for+long+periods+of+time.+A+leather+covering+is+more+resistant+but+a+covering+in+fabric+is+healthier+because+it+breathes+better.%3Cbr%3E%3C%2Fp%3E%3Cp%3E4.+Try+different+chairs+%E2%80%93+Don%E2%80%99t+just+read+about+features+of+the+chair+before+you+buy+it.+It+is+important+to+actually+try+out+various+chairs%2C+sitting+in+them%2C+to+see+which+best+suits+your+needs.%3Cbr%3E%3C%2Fp%3E%3Cp%3ESo+now+the+next+time+you+need+to+buy+one+you+know+how+to+choose+the+best+one+for+your+health.%3C%2Fp%3E&idTrans_US_EN=37&title_US_ES=%C2%BFC%C3%B3mo+elegir+la+silla+correcta%3F&subTitle_US_ES=Encuentra+el+m%C3%A1s+adecuado+para+ti.&desc_US_ES=%3Cp%3ETrabajar+en+una+oficina+es+una+tarea+que%2C+normalmente%2C+requiere+pasar+mucho+tiempo+sentado+en+una+silla.+%C2%BFExiste+alguna+forma+para+elegir+la+silla+m%C3%A1s+adecuada+para+usted%3F%3C%2Fp%3E%3Cp%3E%C2%A0En+los+d%C3%ADas+de+hoy%2C+el+n%C3%BAmero+de+personas+que+trabajan+en+oficinas+ha+crecido.+La+mayor%C3%ADa+de+ellas+pasa+el+d%C3%ADa+entero+sentadas+en+una+silla%2C+trabajando+delante+de+una+pantalla.%3C%2Fp%3E%3Cp%3ESin+embargo%2C+%C3%A9sta+es+una+posici%C3%B3n+que+no+es+muy+buena+para+su+salud.+Comienza+a+ser+frecuente+el+aparecimiento+de+problemas+en+la+columna+por+causa+del+tiempo+que+se+pasa+en+esta+posici%C3%B3n.%3Cbr%3E%3C%2Fp%3E%3Cp%3E%3Cb%3E%C2%BFSe+pueden+evitar+estos+problemas%3F%3Cbr%3E%3C%2Fb%3E%3C%2Fp%3E%3Cp%3EPara+evitar+el+aparecimiento+de+estos+problemas%2C+deben+tomarse+algunas+actitudes+preventivas.%C2%A0+Una+de+ellas+es+tener+cuidado+con+su+postura.+Pero+tambi%C3%A9n+es+muy+importante+la+elecci%C3%B3n+de+una+silla+ergon%C3%B3mica.+Una+silla+capaz+de+responder+a+las+exigencias+de+su+cuerpo+y+de+su+columna%2C+y+adem%C3%A1s+que%C2%A0+le+ofrece+el+soporte+y+promueve+una+buena+postura.%3Cbr%3E%3C%2Fp%3E%3Cp%3E%3Cb%3E%C2%BFC%C3%B3mo+debe+ser+su+silla%3F%3Cbr%3E%3C%2Fb%3E%3C%2Fp%3E%3Cp%3E1.+Debe+permitir+ajustarse+a+su+medida+%E2%80%93+a+su+altura+del+asiento%2C+de+los+brazos%2C+la+inclinaci%C3%B3n%2C+entre+otros.+Cuanto+mayor+sea+la+posibilidad+de+los+ajustes%2C+mayor+es+la+probabilidad+de+que+sea+compatible+con+sus+necesidades.%3Cbr%3E%3C%2Fp%3E%3Cp%3E2.+Tenga+en+cuenta+el+soporte+para+su+espalda+%E2%80%93+si+pasa+muchas+horas+sentado%2C+es+importante+que+la+silla+acompa%C3%B1e+la+curvatura+de+su+columna.%3Cbr%3E%3C%2Fp%3E%3Cp%3E3.+Tenga+en+cuenta+el+material+%E2%80%93+el+material+de+la+silla+debe+tener+la+consistencia+suficiente+para+ser+c%C3%B3moda+durante+largos+periodos+de+tiempo.+El+revestimiento+en+piel+es+m%C3%A1s+resistente%2C+pero+en+tela+es+m%C3%A1s+saludable+porque+permite+una+mejor+transpiraci%C3%B3n.+%3C%2Fp%3E%3Cp%3E4.+Experimente%2C+pruebe+diferentes+sillas+%E2%80%93+no+lea+apenas+las+caracter%C3%ADsticas+de+la+silla+antes+de+comprarla.+Es+importante+sentarse+en+diferentes+sillas+para+saber+cu%C3%A1l+es+la+que+mejor+se+adapta+a+sus+necesidades.%3C%2Fp%3E%3Cp%3ELa+pr%C3%B3xima+vez+que+tenga+que+comprar+una+silla%2C+ya+sabe+c%C3%B3mo+elegir+la+que+es+mejor+para+su+salud.%3Cbr%3E%3C%2Fp%3E&idTrans_US_ES=38&title_US_PT=%C2%BFC%C3%B3mo+elegir+la+silla+correcta%3F&subTitle_US_PT=%C2%BFC%C3%B3mo+elegir+la+silla+correcta%3F&desc_US_PT=%3Cp%3E%C2%BFC%C3%B3mo+elegir+la+silla+correcta%3F%3Cbr%3E%3C%2Fp%3E&idTrans_US_PT=39&cmdEval=editNews&idNews=16&bot=
Can anyone help me?
Total up the amount of the ajax request and show the ajax response when it is the last ajax response.
In other words, how to use only the response of last sent ajax request.
var req=0;
function ajaxReq(){
req++; /total up the amount of request/
$.ajax({
url: "result.php",
type: 'GET',
contentType: false,
enctype: 'multipart/form-data',
cache: false,
processData: false,
success: function(response) {
if(req==1){ /show the response when this is the last request/
$("#response-element").html(response);
}
req--; /Subtract when every success ajax response/
}
});
}
I using this on viewing messages detail
if the user clicked few threads before the response show out it will show the previous thread detail before the current selected thread detail shown out
Any better solution would be nice for sharing
You should decrement as soon as you send request.
var req=""; // should be a number
function ajaxReq(){
req++; /total up the amount of request/
$.ajax({
url: "result.php",
type: 'GET',
contentType: false,
enctype: 'multipart/form-data',
cache: false,
processData: false,
beforeSend: function() {
if (req > 1) req -= 1;
},
success: function(response) {
if(req==1){ /show the response when this is the last request/
$("#response-element").html(response);
req -= 1;
}
}
});
}
You are more or less on the right lines. This is the only way you can avoid the callbacks of previous calls. You will have to associate an ID with each request and then check if the ID of the request is the last sent request.
var sentReqCount = 0;
setInterval(function() {
sentReqCount++;
ajaxReq(sentReqCount);
}, 100);
function ajaxReq(thisReqId) {
$.ajax({
url: "result.php",
type: 'GET',
contentType: false,
enctype: 'multipart/form-data',
cache: false,
processData: false,
success: function(response) {
if (thisReqId === sentReqCount) {
$("#response-element").html(response);
}
}
});
}
this is my sample code:
$("#btnPost").click(function (e) {
e.preventDefault();
$.ajax(
{
url: "/api/Flight/FlightList",
type: "Post",
dataType: "json",
data: $('form').serialize() + '&' + $.param({ 'TokenId': $("#pageInitCounter").val() }, true),
// data:"",
success: function (data) {
// implementation here
........................
As, u can see if i click button then it should hit controller and post the form data but it is not working.it was working fine in older chrome version.
but yesterday i updated my chrome browser. after that its not working.
if i try this:
data:"",
then it is hitting controller but with empty data. how it should be done.please someone tell me.
i am using jquery version 1.9.1
In the ajax operation just add
async: true,
after
datatype: "json",
and that should solve your problem. Chrome has issue handling asynchronus calls.
$("#btnPost").click(function (e) {
e.preventDefault();
$.ajax(
{
url: "/api/Flight/FlightList",
type: "Post",
dataType: "json",
async: true,
data: $('form').serialize() + '&' + $.param({ 'TokenId': $("#pageInitCounter").val() }, true),
// data:"",
success: function (data) {
// implementation here
........................
Note: async parameter is bydefault true, so you need not pass that with request, so removing async: false will also do it for you.
Hello i trying to to save response from htmlpage and save the content of this page, but i always getting an error.What i am doing wrong?
<script type="text/jscript">
var page = "";
$.ajax({
url: "https://www.bbvanetcash.com/local_kyop/KYOPSolicitarCredenciales.html",
type: "GET",
cache: false,
crossDomain: true,
cache: false,
contentType: "application/json; charset=utf-8",
data: {},
jsonp: 'jsonCallback',
dataType: "jsonp",
success: function (data) {
page = data;
console.log("Good");
},
error: function (e) {
console.log("Error");//here where i am stuck
}
});
</script>
"https://www.bbvanetcash.com/local_kyop/KYOPSolicitarCredenciales.html" - i think its URL belong from other domain not from your home/base domain url. that's why you getting error.
You can not make a AJAX http request for NON HOME url.
NON HOME: Its means you can only access your Base domain content though ajax.
I'm trying to show a div with gif animation inside when a button click via javascript call. But the problem is, it's working fine in firefox only. In IE and Chrome, the animation won't show up. I've tried debugging with alert("stop"); before and after the animation and it's indeed working, but after I removed the alert, it won't work anymore. Any suggestion please?
Here's the snippet for the TestPage.aspx:
<div id="animationDiv" style="display: none;">
<img src="loading.gif" />
</div>
...
<div>
<asp:Button ID="testButton" runat="server" Text="Test AJAX" OnClientClick="return testButtonClick();" />
</div>
...
<script type="text/javascript">
<!--
var docWidth, docHeight;
function testButtonClick() {
var o_animationDiv = $("#animationDiv");
o_animationDiv.width(docWidth);
o_animationDiv.height(docHeight);
o_animationDiv.show();
$.ajax({
type: "Post",
url: "TestPage.aspx/TestAjax",
async: false,
cache: false,
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: testAjaxSuccess,
error: testAjaxError
});
function testAjaxSuccess(data, status, xhr) {
// do something here
};
function testAjaxError(xhr, status, error) {
// do something here
};
o_animationDiv.hide();
return false;
};
$(document).ready(function () {
docWidth = $(document).width();
docHeight = $(document).height();
});
//-->
</script>
Here's the snippet for TestPage.aspx.cs:
// using PageMethod for ajax
[System.Web.Services.WebMethod(EnableSession = true)]
public static string TestAjax()
{
System.Threading.Thread.Sleep(5000); // 5 seconds
// or do something else here
// ie. if validation error, throw an exception
return string.Empty;
}
UPDATE 1: added some javascript function
Why don't you call the .hide() on the post success:
$.ajax({
type : "Post",
url : "TestPage.aspx/TestAjax",
cache : false,
data : "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
// hide element when POST return as arrived,
// meaning the "5 seconds" period has ended!
o_animationDiv.hide();
}
});
You can read about callback function at the jQuery documentation!
jQuery ajax is asynchronous, so that won't wait for ajax result to hide again.
o_animationDiv.hide();
o_animationDiv.show();
This lines work in serial and you can't see if it's working properly. So you should wait for ajax result to hide it.Try this,
$.ajax({
type: "Post",
url: "TestPage.aspx/TestAjax",
async: false,
cache: false,
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json"
}).done(function() {
o_animationDiv.hide();
});
UPDATE:
Sorry I missed the point that you create a synchronous ajax request.
But there is a problem already. Most browsers lock itself when running a synchronous XHR. This also effects previous proccess sometimes.
Here is a similar question
Maybe if you use beforeSend, you can avoid this problem.
beforeSend
A pre-request callback function that can be used to modify the jqXHR
(in jQuery 1.4.x, XMLHTTPRequest) object before it is sent
Try this one,
$.ajax({
type: "Post",
url: "TestPage.aspx/TestAjax",
async: false,
cache: false,
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
beforeSend : function() {
o_animationDiv.show();
}
}).done(function() {
o_animationDiv.hide();
});
UPDATE-2:
If that doesn't work, try this one,
...
o_animationDiv.width(docWidth);
o_animationDiv.height(docHeight);
o_animationDiv.show();
setTimeout(function() {
$.ajax({
type: "Post",
url: "TestPage.aspx/TestAjax",
async: false,
cache: false,
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: testAjaxSuccess,
error: testAjaxError
}).done(function() {
o_animationDiv.hide();
});
}, 600);