I am developing an web application using rest web services. I am trying to call the simple web service from the ajax. But I am not getting desired output.
My web service code is:
#Path("hello")
public class Hello {
#GET
#Path("/first")
#Produces("text/html")
public String function1(){
return "Something happens";
}
}
and my html file which gives ajax call for rest web service is:
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script>
function callme(){
alert("hello");
$.ajax({
type: "GET",
url: "http://localhost:8080/WebApplication4/webresources/hello/first",
data:"",
dataType:"text",
contentType: "text/html",
success: function(resp){alert("Server says" + resp);},
error: function(e){ alert("An error has occured");},
});
}
</script>
</head>
<body>
<form id="form1" method="GET" onsubmit="callme();">
<input type="text" name="t1">
<input type="submit" Value="SUBMIT">
</form>
</body>
</html>
When I call web service from the browser, then my web service gives return value as expected.
I call web service from browser as http://localhost:8080/WebApplication4/webresources/hello/first
and it return with text "Something happens"
What goes wrong here with ajax call?
And also How can capture the returned json object in ajax?
Thank you
This is the correct way to do it.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function callme(){
alert("hello");
$.ajax({
type: "GET",
url: "https://localhost/codeTest.php",
data:"",
dataType:"text",
contentType: "text/html",
success: function(resp){alert("Server says" + resp);},
error: function(e){ alert("An error has occured");},
});
}
</script>
</head>
<body>
<form id="form1" method="GET">
<input type="text" name="t1">
<input type="button" Value="SUBMIT" onclick="callme();">
</form>
</body>
The ajax call has to made from html input type button click event, not on form submit. Form submit event reloads the page and it doesn't wait for ajax response.
Related
Hello im making an hcaptcha redirect page, it dosn't work can anybody help/fix me with this?
So after i do the Hcaptcha id does show "405 error", note that i entered correct site key, thanks! Also im using github.io sites
<html>
<head>
<title>hCaptcha Demo</title>
<script src="https://js.hcaptcha.com/1/api.js" async defer></script>
</head>
<script type="text/javascript">
if (hrecaptcha.getResponse() == "success") {
function Redirect() {
window.location.href = "https://www.youtube.com/";
}
Redirect()
setTimeout(Redirect, 1000);
} else alert("You can't proceed!");
</script>
<body>
<form action="" method="POST">
<div class="h-captcha" data-sitekey="my-sitekey"></div>
<br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
Edit: I noticed about "hrecaptcha" and i edited it but it still wont work
I need help on the following: I cannot get the JQuery to load the JSON data even though the JSON file is firing in the console.
Here is the HTML code;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/jquery-3.3.1.js"></script><!-- places Javascript reference file in html-->
<link rel="stylesheet" type="text/css" href="css/stylesheet.css"> <!--places css in sub folder-->
<title>H</title>
</head>
<body>
<div id="vanilla_ajax">
</div>
<button type="button" id="button1" onclick="loadAJAX()">Change to AJAX</button>
<div id="jq_ajax">
</div>
<button type="button" id="button2" onclick="loadJQUERY()">Change to JQUERY</button>
<script src="js/ajax.js"></script>
</body>
</html>
The first button loads and is fine so I have excluded that portion. It is the second one "loadJQuery()" that does not render on the screen. Here is the Javascript for it:
function loadJQUERY(){
/*place holder for ajax loading using JQuery*/
$('#jq_ajax').append('<p id = "test">'); //jq test
$.ajax({
url: "data/Holder.json",
type: 'GET',
dataType: "json",
success: function (result) {
$("#jq_ajax").html("<p>" + result.data + "</p>");
}
});
}
The pathway for the folder is correct as it works with the XML/Ajax version.
the JSON file was using single quotes instead of double quotes. That was the issue
I am working through learning feathers and I am trying to send some data to a service I created. It works fine when I use it without any authorization. When I add authorization I can send the JWT token manually with postman. However when I send a post I am not sure how to send the token in the header or the best way to handle this. The example I have found uses socket.io. Is there a way to do this with a simple post?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0">
<title>Feathers Chat</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="//cdn.rawgit.com/feathersjs/feathers-chat/v0.1.0/public/base.css">
<link rel="stylesheet" href="//cdn.rawgit.com/feathersjs/feathers-chat/v0.1.0/public/chat.css">
</head>
<body>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="//unpkg.com/feathers-client#^1.0.0/dist/feathers.js"></script>
<script type="text/javascript">
var host = 'http://localhost:3030';
// Set up Feathers client side
var app = feathers()
.configure(feathers.rest(host).jquery(jQuery))
.configure(feathers.hooks())
.configure(feathers.authentication({ storage: window.localStorage }));
// authenticate using your JWT that was passed in the short lived cookie
app.authenticate().then(function(result){
console.log('Authenticated!', result);
alert('Your JWT is: ' + app.get('token'));
}).catch(function(error){
console.error('Error authenticating!', error);
});
</script>
<main class="login container">
<div class="row">
<div class="col-12 col-6-tablet push-3-tablet text-center">
<h1 class="font-100">Post</h1>
</div>
</div>
<div class="row">
<div class="col-12 col-6-tablet push-3-tablet col-4-desktop push-4-desktop text-center">
<form class="form" method="post" action="/posts">
<fieldset>
<input class="block" type="text" name="title" placeholder="title">
</fieldset>
<fieldset>
<input class="block" type="text" name="description" placeholder="description">
</fieldset>
<button type="submit" class="button button-primary block login">
Post
</button>
</form>
</div>
</div>
</main>
</body>
</html>
Thanks for any help! I really like feathers so far.
Ok so this is what I did and seems to work fine. I wasn't sure if feathers was somehow automagically handling the auth token after it was created. Once I setup the post to send via jquery and setup the authorization header it worked fine. Thanks for all the help. I do like feathers a lot so far!
$(document).ready(function() {
$( ".test-form" ).submit(function( event ) {
var token = app.get('token');
event.preventDefault();
$.ajax({
url: 'http://localhost:3030/posts/',
type: 'post',
data: {
title: $("#title").val(),
description: $("#description").val()
},
headers: {
Authorization: token
},
dataType: 'json',
success: function (data) {
console.info(data);
}
});
});});
Use the Feathers client. The same app you're using to do authentication.
// Get the Posts service to work with
var postsService = app.service('posts');
// Create a post
postsService.create({
title: $('#title').val(),
description: $('#description').val()
});
// Do something when a Post is created
postsService.on('created', function (post) {
// `post` is the newly created post
// this callback will run whenever a post is created
console.log(post);
});
You could even use the postsService.create method in an event handler, something like…
$('form').on('submit', function () {
postsService.create({
title: $('#title').val(),
description: $('#description').val()
});
});
Read this section: http://docs.feathersjs.com/authentication/client.html
You can get token with app.get('token').
when you post the data, set the header field in Authorization -> token which you get when you login.
Here i have created web service and given public url for getting data from the data.I have written following code in office 365 developer preview(NAPA) default.htm page.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>DemoApplication</title>
<link rel="stylesheet" type="text/css" href="../Content/Office.css" />
<!-- Add your CSS styles to the following file -->
<link rel="stylesheet" type="text/css" href="../Content/App.css" />
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script src="https://appsforoffice.microsoft.com/lib/1.0/hosted/office.js"></script>
<!-- Add your JavaScript to the following file -->
<script src="../Scripts/App.js"></script>
</head>
<body onload="GetData()">
<select id="CbxArea" style="width: 200px">
<option>Select Area</option>
</select>
<input type="button" value="submit" id="btnsubmit"/>
</div>
</body>
</html>
fallowing code is written in app.js file
Office.initialize = function (reason) {
};
function GetArea(){
var ddlArea = $("#CbxArea");
$.ajax({
type: "POST",
url: "http://192.168.3.252:8081/HaraveerWCF/ExcelDataService.asmx/GetAreaNames",
contentType: "application/json; charset=utf-8",
//url:"ExcelDataService.asmx/GetAreaNames",
dataType: "json",
success: function (data) {
for (i = 0; i < data.d.length; i++) {
ddlArea.append($("<option></option>").val(data.d[i].AreaName).html(data.d[i].AreaName));
}
},
failure: function (msg) {
alert(msg);
}
});
}
Where i have written wrong.Please help me out.Make sure total code is written in only online office 365 portal account.Not written in visual studio.
You have done little bit, we can say override to options html. You are placing values and the text of the each options:
for (i = 0; i < data.d.length; i++) {
ddlArea.append($("<option></option>").val(data.d[i].AreaName)
.text(data.d[i].AreaName));
}
You can achieve this with $.each():
$.each(data.d, function(i, v){
ddlArea.append("<option></option>").val(v[i].AreaName).text(v[i].AreaName);
});
With jQuery 1.4+, you could just do
for (i = 0; i < data.d.length; i++) {
ddlArea.append($('<option/>', { value : data.d[i].AreaName }).text(data.d[i].AreaName);
}
You may have run into a JavaScript cross-domain data access issue as you're trying to access a remote address from you Office 365 Preview site. If the return type of the request to the remote address is JSONP, then you may be able to override the cross-domain data access issue.
Check with your browser Developer Tools (invoke it with F12 keyboard shortcut & then look under Network tab) or Firefox Firebug if the remote server URL returns any JSONP data.
Being new to Dojo I'm trying to initialize a Dijit form with values, e.g. read from storage, XHR etc.
However, invoking form.setFormValues() causes an error TypeError: invalid 'in' operand this.formWidgets thrown by http://yandex.st/dojo/1.7.3/dojox//form/manager/_Mixin.js
Is there anything I'm doing wrong or is this a Dojo issue? (The complete sample is also found here: http://pastebin.com/7LUHr3iA)
<!-- language-all: lang-html -->
`
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.3/dijit/themes/claro/claro.css" media="screen">
<script type="text/javascript">
dojoConfig = {async: true,parseOnLoad: true};
</script>
<script type="text/javascript" src="http://yandex.st/dojo/1.7.3/dojo/dojo.js"></script>
<script type="text/javascript">
require(["dijit/form/TextBox","dijit/form/Button","dojox/form/Manager",
"dojo/parser","dojo/dom","dijit/registry"], function () {});
</script>
</head>
<body class="claro">
<form id="myForm" method="post" data-dojo-type="dojox.form.Manager">
<label for="name">Name</label>
<input id="name" name="nameField" data-dojo-type="dijit.form.TextBox"/><br/>
<label for="surname">Surname</label>
<input id="surname" name="surnameField" data-dojo-type="dijit.form.TextBox"/><br/>
<button data-dojo-type="dijit.form.Button">Submit</button>
<script type="dojo/method" event="startup">
var form = dijit.byId("myForm");
form.setFormValues({
nameField: "Hello",
surnameField: "World"
});
</script>
</form>
</body>
</html>
`
Dojo 1.7 is asynchronous. Code should take the form:
require(["dependency"], function(dep) {
// use dependency
});
There is no reason to believe dojox/form/Manager would be loaded when you try to reference it further down the page.
The registry is the correct way to reference the widget, not 1.6 style code of the form dijit.byId. See livedocs.
See also the dojo/domReady! plugin.