Json error on Javascript - javascript

I need some help finding out what's wrong in this code:
ajaxRequest.open("POST", "http://localhost:8181/add", true)
ajaxRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
ajaxRequest.send(data);
I'm trying to send data to the server using POST, and ajaxRequest is an ajaxRequestElement().
The problem is when I open the page, the console provided by Chrome to detect Javascript errors says POST http://localhost:8181/add undefined (undefined).
I know the URL is correct and the page receiving the data is ok too, I tried this before in PHP and works fine, so I don't understand what's happening.

It could be that you are posting to http://localhost/add instead of http://localhost:8181/add. Could you simply use 'add' as the url to post your ajax request to?

Related

Ajax request with script tag inside

On a website i have 2 ajax function, the 1st one is working but the second is sending me script tag with the JSON.
On local everything is working well and one of my AJAX function is working so i presume that my problem dont come from my host.
Here is screenshot of my code & the return.
screenshot of ajax func
screenshot of what i get
The site you are making an ajax request to is returning the data + the script.
If that site is yours then you should make it return the data only and never include scripts in APIs.
As you can clearly see in the received data that it returns the script + the data.
So i fixed it, im using symfony, the problem came from my controller.
In my return i was sending an object which isnt "jsonify" so it gaves me script tag to do it.
But i still dont know why it worked on local

Access html response payload in chrome console

I am trying to access the 'successURL' element of a response payload in chrome console, but cannot work it out. I've tried everything I can think of --> payload.successUrl, e.payload.successUrl, data.payload, but can't seem to access the element.
Anyone able to help? Thanks!
As you shown on image attached to your question - you have successfully accessed this in chrome console :)
You can now right-click to see context-menu and copy it to a variable or do some other things.
But If what you mean is to access data from developer tools straight away in a script - it's rather impossible.
For more information on that - read this aswered here: https://stackoverflow.com/a/50571792/3054380
If the request resulting with that payload data was made by your script - then you need to show how you did this - and surely it is quite simple to access any data recieved in response.
I found the answer in my question from webdev-dan and Tch (I can't upvote them as I don't have the reputation, sorry!). I was trying to access the response after it was posted to console as opposed to parsing the data in my script then sending to console.
Here is what I did to get the element from the response I needed (successUrl).
Javascript
const result = await frui.getSession();
console.log(result);
console.log(result.payload);
console.log(result.payload.successUrl);
Response in console
I'll now set the result.payload.successUrl as a variable to use later on.

How to use JSfiddle echo feature in javascript?

Below JS fiddle is the sample echo feature done onload of the page. We are getting the value 1 from the json response.
JSFiddle
And, I'm trying to add username and emailid and get back the response. But I'm getting an error like
{"error":"key missing: title"}
This is my fiddle OwnJSFiddle
Can someone help on this to fix this issue? I wanted to add name and emailid through echo/json and get the response and show in html.
I have found a solution yet I had to modify your code to work a little differently.
jQuery Version
JSFiddle
In this fiddle, I add a submit event listener to your form.
I use e.preventDefault() to prevent default submit action.
Later, I use JSON.stringify() on your JSON object.
Vanilla JS Version
JSFiddle
In this fiddle, I used XHR request to achieve the same thing.
If using XHR requests for /echo/json/ you need to use the application/x-www-form-urlencoded header and stringify the parameters into the URL even though it's a POST request.
I'd say the issue was that you were trying to POST via $.ajax() and submit at the same time.

jquery upload - accessing responses with chunked fileupload

I am using jquery upload for chunked uploads. Creating a new file and first chunk in my php back-end goes fine, but for the rest chunks I need a file-ID to tell my php script where to append file data.
So my problem is I don't know a way to read the response (ie. file-id) from ajax with jquery upload and edit the post data, in this case add the file id to the requests after the first chunk. The responses seem to behave mysterically.
I console log in my progress-callback console.log(data) and I get a buch of stuff. I can log ie. console.log(data._progress.field) but cannot do this for data._response.file-id as console says undefined. But when i console log the whole data I can clearly see a _response -object inside data. but when I specifically try to log that I get Object { } so it seems to be empty, but when i click it I see jqXHR-object and result-object that has the file-id I want to put to post requests for the rest chunks.
TL,DR:
I can console.log whole data in callback and see the result ie. file-id, but when I try to log data.result.file-id, console says "undefined".
Some fields I can log but some I can't Ie. data._progress.total logs just fine but data._result doesn't.
I need a field from response and change the post parameters for the next requests of chunked file upload.
What on earth I am missing here?
EDIT:
I have found a back-end solution to my problem and I didn't need jQuery/ajax request response things I tried to use. This was proprietary works so sorry I can't post my code.

Intercept and edit ajax data before submit

So I am trying to write a script that will go out and edit the html for all of my tumblr blogs, so i dont have to do it manually.
The problem is that tumblr doesnt really have a form that i can edit, and then submit through JS.. they have a very strange way of compiling the custom html and submitting an ajax request.
So, i was wondering if there was a way to intercept the ajax call before it goes out, edit a field in the data, and then make the submission my self?
I tried something like this:
var submitted = false
$("body").ajaxSuccess(function(evt, request, settings){
j = $.parseJSON(settings.data)
j.custom_theme = "PUT HTML HERE"
if (!submitted)
$.post(settings.url, j, function(data){
console.log(data);
submitted = true;
})
})
But i got a 403 forbidden error.
Does anyone have any ideas?
I'm not sure exactly what you're trying to do, but must this be done with a custom script? It sounds like this will only be used by you, so an extension should work. If so, there is a very useful Firefox extension, in the spirit of Firebug, called Tamper Data. This should be able to do what you want.
It allows you to monitor each request made by the browser, and you can turn on an option that allows you to look at, and edit, every single request before it gets sent.
Well, it's pretty obvious that ajaxSuccess isn't going to work in the way you want it to.
Assign the function which sends the AJAX request a new name and overwrite it. Call the previous function at the end of the new function, i.e. after manipulating the data the way you want.

Categories