Hey guys I am new with this json syntax and I have one problem.
I made function that gets data from remote server in json like this:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-3.1.0.min.js"></script>
<script type="text/javascript">
function getStates(value) {
var data = {
q: value
}
$.ajax({
url: 'https://something.hr/api/search',
method: 'GET',
headers: {'Accept': 'application/json'},
data: data
}).done(function(data) {
//do something with data I returned to you
console.log("success")
console.log(data)
}).fail(function(data) {
//doSomethingWith the data I returned to you
console.log("fail")
console.log(data)
});
};
</script>
</head>
<body>
<input type="text" onkeyup="getStates(this.value)" >
<br>
<script>
</script>
</body>
</html>
My problem is that I know how to get object in console log, but i wish to get that object in html, like in some box, than click on it and open his data(name, id, adress etc.)
var httpManager = (function() {
var getData = function(value) {
$.ajax({
url: 'https://api.github.com/users/zixxtrth',
method: 'GET'
}).done(function(data) {
//do something with data I returned to you
jQuery('#avatar').attr('src', data.avatar_url);
jQuery('#name').html(data.name);
jQuery('#username').html(data.login);
}).fail(function(data) {
//doSomethingWith the data I returned to you
alert('No Data');
});
};
return {
getData: getData()
}
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<img src='' id='avatar' width='200' height='200' />
<h1 id='name'></h1>
<h2 id='username'></h2>
Related
I have been struggling to render a data object returned by an API request on an HTML page, however it keeps displaying the string object on the HTML page. Another problem is that I am not able to make use of the data object returned by the API request outside of the API function in Javascript. See the code below:
The API request, the console.log(data) outside the API function does not work
var params = {
// Request parameters
};
$.ajax({
url:
"https://failteireland.azure-api.net/opendata-api/v1/attractions?" +
$.param(params),
beforeSend: function (xhrObj) {
// Request headers
xhrObj.setRequestHeader(
"Ocp-Apim-Subscription-Key",
"ef4ed92186214c868a59d97c3b353661"
);
},
type: "GET",
// Request body
data: "{body}",
})
.done(function (data) {
console.log(data);
document.getElementById("data").innerHTML = data.results;
})
.fail(function () {
alert("error");
});
});
console.log(data);
The HTML Page
<html>
<head>
<title>JSSample</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="main.js"></script>
</head>
<body>
<div id="data"></div>
</body>
</html>
You need to pass in a callback function to handle the returned data.
function do_request(cb, cb_fail) {
var params = {};
$.ajax({
url:
"https://failteireland.azure-api.net/opendata-api/v1/attractions?" +
$.param(params),
beforeSend: function (xhrObj) {
// Request headers
xhrObj.setRequestHeader(
"Ocp-Apim-Subscription-Key",
"ef4ed92186214c868a59d97c3b353661"
);
},
type: "GET",
// Request body
data: "{body}",
})
.done(cb)
.fail(cb_fail);
}
function cb(data) {
// you now have access to the data here
document.getElementById("data").innerHTML = JSON.stringify(data.results)
}
function cb_fail(error) {
console.log(error)
}
do_request(cb, cb_fail)
I'm trying to use ajax call in my blade view and post ajax data to controller to insert to database.
Here is my ajax:
<!DOCTYPE html>
<html>
<head>
<title>FormBuilder Editor</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://formbuilder.online/assets/js/form-builder.min.js"></script>
<meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body>
<div id="fb-editor"></div>
<div id="saveToDatabase">
<button id="saveBtn" type="button">Save To Database</button>
</div>
</body>
<script>
var formBuilder = $('#fb-editor').formBuilder();
$("#saveBtn").click(function() {
var mFormData = formBuilder.actions.getData(); //JSON data return
console.log(mFormData);
$.ajax({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
type: "POST",
url: "save",
data: {
"mFormData":mFormData
}
}).done(function (msg) {
alert("Data saved!" + msg);
});
});
</script>
</html>
And here is my controller:
public function saveToDb(Request $request) {
$data = $request->all();
if($data) {
Form::insertData($data);
}
return view('welcome');
}
And this is my insert function in Model:
public function insertData($formData) {
DB::EnableQueryLog();
$sql = DB::table('form')->insert(['formKey' => 'testForm2', 'formData' => $formData]);
return $sql;
}
When I click on button save, this is error in Network XHR:
How I can fix this? Thank you very much!
you are calling the inserData statically. so it should be
public static function insertData($formData) {
DB::EnableQueryLog();
$sql = DB::table('form')->insert(['formKey' => 'testForm2', 'formData' => $formData]);
return $sql;
}
Replace this line:
Form::insertData($data);
with this:
app()->make(From::class)->insertData($data);
Or inject the Form model instance in the constructor if you prefer.
However, the way you are inserting is not how models are meant to be inserted.
I am writing a script that sends an ajax request. The Cloud seems to response with the JSON, but how can I display the data from the JSON on my webpage?
Here the link for the pretty printed JSON.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<button onclick="myFunctionPost()">Start</button>
<script>
function myFunctionPost() {
jQuery.ajax( {
url: 'https://iotmmss0018275632trial.hanatrial.ondemand.com/com.sap.iotservices.mms/v1/api/http/app.svc/T_IOT_77877E443B666B7FED2F?$format=json',
type: 'POST',
crossDomain: true,
dataType: 'jsonp',
success: function( response ) {
console.log(response);
},
error : function(error) {
console.log(error);
}
} );
}
</script>
</body>
</html>
To achieve this you can use JSON.stringify() space argument. You will also need to wrap the output with <pre> </pre> will preserve the line spacing.
function myFunctionPost() {
$.ajax( {
url: 'https://jsonplaceholder.typicode.com/posts',
type: 'GET',
success: function(response) {
$('#pp').html('<pre>' + JSON.stringify(response, undefined, 4) + '</pre>');
},
error: function(error) {
console.log(error);
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<button onclick="myFunctionPost()">Start</button>
<p id="pp"></p>
</body>
</html>
Source: Does jQuery have a JSON/javascript object to HTML pretty print function similar to PHP's var_dump?
By var responseObject = json.parse(response) to make a javascript object.
And then do as you would with JS object?
Hard to tell exact code without knowing what do you wanna display, in what HTML.
I have this code doing http post, the post is working but the server side expecting data in json format. And it show the data from my post in not in json format. How can I change my code to post the data in json format?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("http://www.example.com/post",
dataType: 'json',
{
"userID" :"JohnDoe",
"timeStamp" :""
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
for (var key in data) {
if (data.hasOwnProperty(key)) {
var val = data[key];
console.log(val);
}
}
});
});
});
</script>
</head>
<body>
<button>Send an HTTP POST request to a page and get the result back</button>
</body>
</html>
To post all you need to do is specify the post in a data object like I've done below and specify the dataType: json. (by the way you had a typo, you're missing a ) somewhere)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$("button").click(function() {
$.post({
type: 'POST',
url: "https://jsonplaceholder.typicode.com/posts",
data: {
"userID": "JohnDoe",
"timeStamp": ""
},
dataType: 'json',
success: function(data, status) {
console.log(data);
alert("Data: " + data + "\nStatus: " + status);
for (var key in data) {
if (data.hasOwnProperty(key)) {
var val = data[key];
console.log(val);
}
}
},
error: function(err) {
console.log(err);
}
});
});
});
</script>
</head>
<body>
<button>
Send an HTTP POST request to a page and get the result back
</button>
</body>
</html>
i am trying to call c# web api but there is no response in html page but i getting response in cshtml
WEB API CODE
namespace MvcApplication3.Controllers
{
public class StoreController : Controller
{
public string Get2()
{
return "response data";
}
}
}
HTML CODE
<html>
<head>
<script src="jquery-1.8.2.js">
</script>
<!--<script src="jquery-1.8.2.min.js">
</script>-->
<script type="text/javascript">
$(function () {
$(document).ready(function () {
$('body').on('click', '.test', function (e) {
alert('a');
jQuery.support.cors = true;
$.ajax({
// url: 'http://localhost:3595/api/values/5',
url: 'http://localhost:1152/Store/Get2',
type: 'GET',
dataType: "Jsonp",
success: function (data) {
alert(data);
}
});
});
});
});
</script>
<title>
</title>
</head>
<body>
<input type="button" value="submit" class="test"/>
</body>
</html>