Call external web service using jquery - javascript

I am using the following code to call external web service using jquery. In Chrome, I am getting this '500 Internal Server Error' and in firefox, it shows '0'
I am unable to figure out the problem. Here is my complete code..
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jQuery/1.2.6/jQuery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#btnCall").click(function (event) {
$.ajax({
type: "POST",
url: "www.google.com",
data: "{'ESS123', 'aaaaaa', '', 'abc#hotmail.com', '23424234', '', 0, 100, 1000007, 1, '', 12, '','','', '2013', '', 1, 1000006, 1000033, 100, 1000012, 1000012, 1000001, 1000001, 100, 'caff4eb4fbd6273e37e8a325e19f0991'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
alert('s');
},
error: AjaxFailed
});
});
});
function AjaxSucceeded(result) {
alert('s');
//alert(result.d);
}
function AjaxFailed(result) {
alert(result.status + ' ' + result.statusText);
}
</script>
<body>
<input type="button" value="Submit" id="btnCall" />
</body>

There could be additional reasons, but your data argument does not contain valid JSON. Invalid input is a common reason for 500 Internal Server Errors.
See JSONLint:
Parse error on line 1:
{ 'ESS123', 'aaaaa
-----^
Expecting 'STRING', '}'
(Hint, strings in JSON must be quoted with " characters, and, unlike arrays, objects require key:value pairs not a list of values).

Related

jQuery shows output but instantly dissapears

I'm creating a PHP application where I have to send a JavaScript variable to the same page and then use it in PHP. However when I run my code the output shows and is correct but it goes away and dissappears.
$.ajax({
type: 'POST',
url: 'ajax.php',
data: { id: 1},
success: function(result) {
$('body').html(result);
console.log(result);
},
error: function() {
alert('Some error happened. Please try again!');
}
});
I accessed the posted variable via PHP post variable and the output is correct but I cant get it to stay on the screen. Is the innerHTML of my ajax.php being overwritten?
The console shows correct output also !
Are you doing something else with your html <body> element? If I were you, I'd make a new element in the body and put your results there.
$.ajax({
type: 'POST',
url: 'ajax.php',
data: { id: 1},
success: function(result) {
$('#results').html(result);
console.log(result);
},
error: function() {
alert('Some error found. Please try again!');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<title>Title</title>
</head>
<body>
<div id="results"></div>
</body>
</html>
You are calling body attributes, try changing this line:
$('body').html(result);
To;
$("#myResult").html(result);
You can now print your response by adding this to your HTML code:
<div id="myResult"></div>
If you want to select via a Class instead:
$(".myResult").html(result);
Here, the ID selector # is replaced by the Class selector . so your div will now become:
<div class="myResult"></div>
Now try this:
$.ajax({
type: 'POST',
url: 'ajax.php',
data: {id: 1},
success: function(result) {
// $('body').html(result);
// $(".myResult").html(result);
$("#myResult").html(result);
console.log(result);
},
error: function() {
alert('Some error found. Please try again!');
}
});
On the HTML side enter this:
<div class="myResult"></div>

How can I display the data from the JSON on my webpage?

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.

Ajax firing success event but not getting to the web method

I'm using ajax to call a server side function. for some reason, the success is firing but it doesn't get to the function
here is the javascript
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
url: "Server.aspx/sendEmail",
data: { name: "foo", company: "bar", country: "foo", email: "bar", msg: "bla" },
async: false,
success: function (data) {
var a = 3;
},
error: function (a, b) {
alert("error");
var a = 43;
}
});
});
here is the c#
[WebMethod]
public static string sendEmail(string name, string company, string country, string email, string msg)
{
//somecode here
}
the data message(for some reason it is breaking)
<form method="post" action="./sendEmail?%7b%22name%22%3a%22foo%22%2c%22company%22%3a%22bar%22%2c%22country%22%3a%22foo%22%2c%22email%22%3a%22bar%22%2c%22msg%22%3a%22bla%22%7d" id="form1">
<div>
</div>
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="368A1591" />
Take the following points into account when you are calling an ASP.NET AJAX page methods:
To use ASP.NET AJAX page methods, you need to make a POST request. This is to prevent CSRF
Ensure that the contentType is set to application/json.
Use JSON.stringify to convert the JavaScript object into JSON text.
Your JS code could be something similar to this:
$(document).ready(function () {
var data = { name: "foo", company: "bar", country: "foo", email: "bar", msg: "bla" };
$.ajax({
url: "Server.aspx/sendEmail",
type: "POST",
data: JSON.stringify(data),
async: false,
contentType: 'application/json',
success: function (data) {
//Do something
},
error: function (xhr) {
alert('Request Status: ' + xhr.status
+ ' Status Text: ' + xhr.statusText
+ ' ' + xhr.responseText);
}
});
});
If it still doesn't work, check the statusText for the error.

Error when making Ajax REST API calls

I have this application that I am trying to create.
The application should login (using REST API), and respond with a session id.
I have created a button, which calls the JavaScript function that performs the ajax call, which in turn tries to login.
The results are appended to the div (appscan_results)
Here's is the code
<html>
<head>
<title> AppScan Issues Exporter </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
function login(){
var request = $.ajax({
type:"POST",
url:"myurl",
dataType: "json",
contentType: "application/json",
data:{
"userId": "username",
"password": "password",
"featureKey": "AppScanEnterpriseUser",
"clientVersion": "",
"clientIp": "",
"clientHostName": ""
},
});
request.done(function (jqXHR){
alert('Success');
$("#appscan_results").html(jqXHR.responseText);
});
request.fail(function(jqXHR) {
alert('Failure');
$("#appscan_results").html(jqXHR.responseText);
});
}
</script>
<button onclick="login()">Get Issues</button>
<div id="appscan_login"></div>
<div id="appscan_results"></div>
</body>
</html>
After it runs, I get the following error:
Exception thrown by application class 'org.apache.wink.server.internal.RequestProcessor.handleRequest:195'
javax.servlet.ServletException: org.codehaus.jackson.JsonParseException: Unexpected character ('u' (code 117)): expected a valid value (number, String, array, object, 'true', 'false' or 'null') at [Source: com.ibm.ws.webcontainer.srt.SRTInputStream#d80cceaa; line: 1, column: 2]
at org.apache.wink.server.internal.RequestProcessor.handleRequest(RequestProcessor.java:195)
at com.ibm.websphere.jaxrs.server.IBMRestServlet.service(IBMRestServlet.java:106)
at [internal classes]
at com.ibm.appscan.server.filters.ClickjackFilter.doFilter(Unknown Source)
at com.ibm.ws.webcontainer.filter.FilterInstanceWrapper.doFilter(FilterInstanceWrapper.java:192)
at [internal classes]
What am I missing in the code?
PS: I have tested the REST call using REST API client and I do get a response,
org.codehaus.jackson.JsonParseException
Your servlet/rest controller is not able to parse the Input JSON string and convert it to a Valid Java Object.
Change data to
data:JSON.stringify({
userId: "username",
password: "password",
featureKey: "AppScanEnterpriseUser",
clientVersion: "",
clientIp: "",
clientHostName: ""
},
})

How can I get the results of a JSON POST back

I'm posting this JSON from a form page
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js" type="text/javascript"></script>
<script type="text/javascript">
function poster()
{
var dataToPost = {grant_type: "password", username: dojo.byId("username").value, password: dojo.byId("password").value, redirect_uri: "http://localhost/default.html"};
var xhrArgs =
{
url: "https://localhost/api/did/authenticate?client_id=12345",
handleAs: 'json',
postData: dojo.toJson(dataToPost),
headers: { "Content-Type": "application/json; charset=UTF-8", "Accept" : "application/json" },
load: function(data, args)
{
alert("Data = " + data);
},
error: function(error, args)
{
alert("Error! " + error);
}
}
dojo.rawXhrPost(xhrArgs);
}
</script>
But I'm not able to get the JSON results from said POST. How can I get those results? Please help. The data I get on the load function is null
The script at https://localhost/api/did/authenticate needs to print or echo or write or otherwise return the JSON as text as it exits.
Turns out that what I was trying to do is not possible in JavaScript since I'm trying to do it from one domain into another... so the cross-domain implementation is not possible, unless I use an embedded flash object, or a proxy pass in my server. thanks for the help though...

Categories

Resources