Read several posts on how to make my HTML form send JSON formatted code to my localhost:8000/api server.
Searching and trying for around three hours but nothing I try seems to work.
This is my actual code which doesn't sent any data (Network tab from Firefox Web Developer Tools doesn't show any interactions when Submit Button was pushed) and always runs through the error function.
Any support would be highly appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<title>API Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<form id="input_form" action="" method="post">
<input type="text" placeholder="Name" name="fullName">
<input type="button" value="Submit" id="submit">
</form>
<script>
$("#submit").on('click', function(){
$.ajax({
url: 'localhost:8000/api', // url where to submit the request
type : "POST", // type of action POST || GET
data: JSON.stringify($("form")),
dataType : 'json', // data type
contentType: 'application/json',
success : function(result) {
console.log(result);
console.log("It works")
},
error: function(xhr, resp, text) {
console.log("Did not work")
console.log(xhr, resp, text);
}
})
});
</script>
</body>
</html>
Edit: This is the output of the Firefox Console:
[NoScript]:0 Prompt Hook installation file:///C:/html/Quiz/username.htm log.js:32:13
Freezing file:///C:/html/Quiz/username.htm DocumentFreezer.js:101:15
Unfreezing file:///C:/html/Quiz/username.htm DocumentFreezer.js:117:15
Diese Seite verwendet die nicht standardisierte Eigenschaft "zoom". Stattdessen sollte calc() in den entsprechenden Eigenschaftswerten oder "transform" zusammen mit "transform-origin: 0 0" verwendet werden. username.htm
Did not work username.htm:33:29
Object { readyState: 0, getResponseHeader: getResponseHeader(e), getAllResponseHeaders: getAllResponseHeaders(), setRequestHeader: setRequestHeader(e, t), overrideMimeType: overrideMimeType(e), statusCode: statusCode(e), abort: abort(e), state: state(), always: always(), catch: catch(e)
, … }
abort: function abort(e)
always: function always()
catch: function catch(e)
done: function add()
fail: function add()
getAllResponseHeaders: function getAllResponseHeaders()
getResponseHeader: function getResponseHeader(e)
overrideMimeType: function overrideMimeType(e)
pipe: function pipe()
progress: function add()
promise: function promise(e)
readyState: 0
responseJSON: undefined
setRequestHeader: function setRequestHeader(e, t)
state: function state()
status: 0
statusCode: function statusCode(e)
statusText: "error"
then: function then(t, n, r)
<prototype>: Object { … }
error <empty string> username.htm:34:14
Edit 2 Source of the error seems to come from the line
data: JSON.stringify($("form")),
Trying out
console.log(JSON.stringify($("form")))
I receive the following result. Will continue checking tomorrow.
{"0":{"0":{},"1":{"jQuery363081041549224722111":{"events":{"click":[{"type":"click","origType":"click","guid":15,"namespace":""}]}}}},"length":1,"prevObject":{"0":{"location":{"href":"file:///C:/html/Quiz/username.htm","origin":"null","protocol":"file:","host":"","hostname":"","port":"","pathname":"/C:/html/Quiz/username.htm","search":"","hash":""},"jQuery363081041549224722111":{"events":{"click":[{"type":"click","origType":"click","guid":1,"selector":"[data-dismiss=\"alert\"]","needsContext":false,"namespace":"alert.bs.data-api"},{"type":"click","origType":"click","guid":2,"selector":"[data-toggle^=\"button\"]","needsContext":false,"namespace":"bs.button.data-api"},{"type":"click","origType":"click","guid":4,"selector":"[data-slide]","needsContext":false,"namespace":"bs.carousel.data-api"},{"type":"click","origType":"click","guid":4,"selector":"[data-slide-to]","needsContext":false,"namespace":"bs.carousel.data-api"},{"type":"click","origType":"click","guid":6,"selector":"[data-toggle=\"collapse\"]","needsContext":false,"namespace":"bs.collapse.data-api"},{"type":"click","origType":"click","guid":8,"selector":".dropdown form","needsContext":false,"namespace":"bs.data-api.dropdown"},{"type":"click","origType":"click","guid":9,"selector":"[data-toggle=\"dropdown\"]","needsContext":false,"namespace":"bs.data-api.dropdown"},{"type":"click","origType":"click","guid":11,"selector":"[data-toggle=\"modal\"]","needsContext":false,"namespace":"bs.data-api.modal"},{"type":"click","origType":"click","guid":13,"selector":"[data-toggle=\"tab\"]","needsContext":false,"namespace":"bs.data-api.tab"},{"type":"click","origType":"click","guid":13,"selector":"[data-toggle=\"pill\"]","needsContext":false,"namespace":"bs.data-api.tab"},{"type":"click","origType":"click","guid":7,"namespace":"bs.data-api.dropdown"}],"focusout":[{"type":"focusout","origType":"blur","guid":3,"selector":"[data-toggle^=\"button\"]","needsContext":false,"namespace":"bs.button.data-api"}],"focusin":[{"type":"focusin","origType":"focus","guid":3,"selector":"[data-toggle^=\"button\"]","needsContext":false,"namespace":"bs.button.data-api"}],"keydown":[{"type":"keydown","origType":"keydown","guid":10,"selector":"[data-toggle=\"dropdown\"]","needsContext":false,"namespace":"bs.data-api.dropdown"},{"type":"keydown","origType":"keydown","guid":10,"selector":".dropdown-menu","needsContext":false,"namespace":"bs.data-api.dropdown"}]},"focusout":1,"focusin":1}},"length":1}}
Edit 3: Seems like I've got two issues here.
- get the form data into JSON format
- post JSON formatted data
on 2., even this code does not work
<script>
$("#submit").on('click', function(){
const input_data = {name: "John", age: 30, city: "New York"};
$.ajax({
url: 'localhost:8000',
type : "POST",
dataType : 'json',
data: input_data,
contentType: 'application/json;charset=UTF-8',
success : function(result) {
console.log(result);
console.log("It works")
},
error: function(xhr, resp, text) {
console.log("Did not work")
console.log(xhr, resp, text);
}
})
});
</script>
Console output:
Object { readyState: 0, getResponseHeader: getResponseHeader(e), getAllResponseHeaders: getAllResponseHeaders(), setRequestHeader: setRequestHeader(e, t), overrideMimeType: overrideMimeType(e), statusCode: statusCode(e), abort: abort(e), state: state(), always: always(), catch: catch(e)
, … }
error <empty string>
