Call a function just after ajax call is sent - ajax

I have to show a message "Request for execution sent" after the ajax call is made but before the response is received in axios.
axios
.post('executeTask', {
id,
status,
name
})
.then(response => {
})
.catch(error => {
});


Just show message before handling your promise:
var promise = axios
.post('executeTask', {
id,
status,
name
});
// show message here
promise.then(response => {
})
.catch(error => {
});

Related

Axios Post with formData does not work with Laravel

I'm using Axios v0.27.1 for ajax, but does not work to post the files and data to Laravel Controller. When I use $request->all() in controller. It will return a blank [] array. Any ideas for this case?
$('#submitForm7').on('click', function(event) {
event.preventDefault();
var formData = new FormData();
formData.append('file', $('#form7Excel').prop('files')[0]);
let config = {
headers: {
'Content-Type': 'multipart/form-data'
}
, responseType: 'blob'
}
axios
.post('/pdf/generateForm7', formData, config)
.then(resp => {
//success callback
if (resp.status == 200) {
}
})
.catch(error => {
})
.finally(() => {})
})

Can access file using
$request->file('file');
and your all Request data (without file data) You can access using
$request->all();

post request using axios on Laravel 7

i am trying to post request on server by axois but unfortunately page is refreshing on button click how can i resolve this issue please help me thanks.
html view
axois script
<script>
$(document).ready(function(){
$("#prospects_form").submit(function(e) {
let url = "{{route('home.store')}}";
var name =$("#name").val();
var email =$("#email").val();
axios.post(url, {
params:{
name: 'name',
email:'email'
}
}).then((res)=>{
console.log(res);
}).catch(function(err){
console.log(err);
});
});
});
</script>
Route
Route::post('/home/store', 'HomeController#store')->name('home.store');
controller
public function store(Request $request)
{
$this->validate(
$request,
[
'name' => 'required',
'email' => 'required|email|unique:subscribes,email',
],
[
'name.required' => 'Name is required',
'email.required' => 'Email is required'
]
);
$subscribes = new Subscribe();
$subscribes = $request->name;
$subscribes = $request->email;
return response()->json($subscribes, 200);
}

axios send data in body not in params ref link https://github.com/axios/axios#note-commonjs-usage
axios.post(url, {
name: 'name',
email:'email'
}).then((res)=>{
console.log(res);
}).catch(function(err){
console.log(err);
});
params is used for get request
and to not refresh on form submit you can try
$("#prospects_form").submit(function(e) {
e.preventDefault()
and you need to preventDefault form action so u can submit form via ajax
so your final code will be
<script>
$(document).ready(function () {
$("#prospects_form").submit(function (e) {
e.preventDefault();
let url = "{{route('home.store')}}";
var name = $("#name").val();
var email = $("#email").val();
axios
.post(url, {
name: name,
email: email,
})
.then((res) => {
console.log(res);
})
.catch(function (err) {
console.log(err);
});
});
});
</script>

Use e.preventDefault(); Like given below
<script>
$(document).ready(function(){
$("#prospects_form").submit(function(e) {
e.preventDefault();
let url = "{{route('home.store')}}";
var name =$("#name").val();
var email =$("#email").val();
axios.post(url, {
params:{
name: 'name',
email:'email'
}
}).then((res)=>{
console.log(res);
}).catch(function(err){
console.log(err);
});
});
});
</script>

Django rest framework endpoint gives (403 forbidden)

I'm trying to make a DELETE request using Axios on my API built with Django rest framework but I keep on getting '403 (forbidden)'
here is my code...
export const deleteLead = (id) => (dispatch) => {
axios
.delete(`/api/leads/${id}/`)
.then((res) => {
dispatch({
type: DELETE_LEAD,
payload: id,
});
})
.catch((err) => console.log(err));
};

How to make POST call pass without the need of reloading the page?

I am subscribing to presence channel and get the below-given error:
XHR failed loading: POST "http://127.0.0.1:8000/broadcasting/auth".
The POST request succeeds only after I reload the page(I've check the console). How to make it(POST call) pass without the need of reloading the page?
<tr v-for="user in users">
<td>{{user.name}}</td>
<td>{{user.ip}}</td>
</tr>
data() {
return {
users:[]
}
},
mounted() {
window.Echo.join('privateChannel')
.here(users => (this.users = users))
.joining(user => (this.users.push(user)))
.leaving(user => (this.users = this.users.filter(u => (u.id
!==user.id)))
);
this.fetchData()
},
methods: {
fetchData(){
axios
.get('api/users')
.then(res => (this.users= res.data))
.catch(err => console.log(err));
},
}
}

You are using get instead of post
Try this -
fetchData(){
axios
.post('api/users')
.then(res => (this.users= res.data))
.catch(err => console.log(err));

Vue request fails but does not log errors

I have this add method in my vue script
if (this.edit === false) {
this.link.link = submitEvent.target.elements.link.value;
fetch('products', {
method: 'POST',
body: JSON.stringify(this.link),
headers: {
'content-type': 'application/json'
}
})
.then(res => res.json())
.then(res => { // this does not get executed
this.qrcode.redirect_url = "";
alert('Added');
this.fetchAll()
})
.catch(err => console.log(err.res));
}
}
When I fill the form the request is send and entry is made to the database but I do not get response.
I am using laravel as backend and Add method in Controller returns 200 response after creation.
What could cause it and why console.log(err) does not not display anything?

Resources