We Keep Coding

Form password field is plain text after using jQuery serialize()

I have a login form includes password field. I show this login form in modal way and I would like to handle the form submit response is a special way(actually update the login bar to a account menu), so i prevent the default form submit by
$("#myformid").submit(function(event){
var form = $(this);
console.log(form.serialize());
event.preventDefault();
jQuery.ajax({
url: "http://localhost:5782/login",
success: function (data) {
login_form_modal.style.display = 'none';
},
data: {
form: form.serialize(),
},
type:"POST",
async: false,
});
})
I noticed that in the browser debug console, the password is plain text. My question is, is it safe to submit a serialized form using ajax?
'csrf_token=IjI4ODJZjJmMWI5MGU1ZMjM1Y2Y0M2QxNzY3ZGUwZmI5MDki.YcCuVA.3D_79wx6Lp2-hbZWRT04z_eGhbc&username=myusername&password=MyPlainTextPassword'
Thanks,

You have to send the password from the client to the server.
Both the client and the server need to know what it is — the client because it produces it and the server because it has to pass it through the right hash algorithm and compare it to whatever is in the database.
What you don't want is for the password to be intercepted in transit. The way to do that is to use HTTPS and not plain HTTP. (This obviously doesn't matter when you are working with localhost URLs and the data is development data and not production data, but needs to be dealt with for your production deployment).

How to make a request using jQuery to a django server to refresh infos on page

I made a website in python using Django. My site allows you to control lights while indicating if the light is on or not.
I'm looking for a solution that could make a simple request with data to the server and send data back to the client without updating the entire page but only a part of it.
My ideal would be for the client to make a request to the server with identification data. Then, the server returns the updated data that the user is allowed to have.
Is that possible to make a JavaScript to do that ? And the server, how it can return data to the client ?

You can Use jquery AJAX for send request and get a response and Update an element or part of the page you can read more about it in :
W3schools
or :
jquery.com
AJAX function I use for PHP project:(Just for example)
$.ajax({
type: "POST",
url: Url,
data: InfoData, // data if you want to send for example InfoData={dataName: variable} or you can set this = '' if you don't want to send data
datatype: "html",
success: function(result) {
console.log(result);
}
});

how to render html page after ajax success from django backend

I want to render html page after ajax success. but i am not getting the proper path for the file. I am using django backend. I am not using django inbuilt function to authenticate. this is my python code.
this is the error
this is my project structure
//this is my javascript code
function admin_login(){
username = document.getElementById("username").value;
password = document.getElementById("password").value;
console.log(username+password);
data={
"username":username,
"password":password
}
$.ajax({
type: 'POST',
url: "http://127.0.0.1:8000/admin_login/",
data:JSON.stringify(data),
success: function(data) {
console.log('sucessfully loggedin')
window.location.href = "/chat/templates/user.html";
}
});
}

You're trying to redirect to a template. Django doesn't work like that.
With or without a redirect, a request from the browser always needs to go to a URL that is handled by a view. Your redirect should be to an actual URL listed in your urls.py.
Alternatively, given that this is a completely standard form that has no need for Ajax, you could remove the script completely. Just let the form submit in the normal way and redirect as the Django code determines.

Ajax post script not working

This is doubtless a newbie question but I cannot find one that's similar. I want to pass a model to an action through a JS function. I have the Ajax script:
var modelDataJSON = '#Html.Raw(Json.Encode(Model))';
$.ajax({
url: '#Url.Action("Action1", "Home")',
type: 'POST',
data: modelDataJSON,
dataType: 'json'
});
And I have for the action:
public ActionResult Action1(MyModel modelDataJSON)
{
return Content(modelDataJSON.ToString());
}
It's not doing anything. What have I missed? Again, sorry for the newbie question but I have already been stuck for too long on it.

Perhaps there's a misunderstanding. What I'm asking is how you redirect to the Action1 URL using a JS script. If it runs then it will display the content because it's a content action.
Don't use Ajax if you want to load a new page.
To make a POST request, you need to submit a form.
The best way to approach this is to use a plain, regular HTML form and not involve JS at all.
If you really want to involve JS then you can generate a form.
var f = document.createElement("form");
f.action = myURL;
f.method = "POST";
// append inputs to the form to pass the data in modelDataJSON here
document.body.appendChild(f);
f.submit();
Note that you can't send a JSON payload this way (but despite the variable name being modelDataJSON, your Ajax would have been sending standard form encoded data anyway).

Create a POST header

Here's the thing: I have an array which I must send to another page... not using an AJAX request. I'm trying to redirect my user to this new page, or maybe to open a popup with the new page, but this new page must receive the array data on a POST request.
How do I do this in javascript? I have no problem JSON encoding my array before sending it, I just don't know how to redirect my user to a new page with the data "attached", in javascript.
I'm using ExtJS4, so if there's anything on Ext.util, I have no problem using it.
Thanks.

You can do this (using javascript)
make a new FORM
set the action as the new page
set the method as POST
add a hidden field
set the value of the field to this Value you want to send
Pragmatically submit the form

You can Ajax POST to the target page's url:
Ext.Ajax.request({
url:'/target/url/', async:false, method:'POST',
jsonData: {
jsonArray: yourJsonArray
}
success: function() {
console.log('posted successfully');
}
});
async:false loses the asynchronous functionality; simply remove it if you don't need your POST to be synchronous.