Why doesn't the function get called?

Joined
Nov 20, 2023
Messages
1
Reaction score
0
In a lab there is this part where i should call a function deployed in Azure from an HTML page, here's the question:

Create a simple HTML page that will send a POST request to your function deployed in Azure using the Fetch Javascript API and display its result in the page. Pass any parameters needed to your function.

I wrote the code :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fetch Function Example</title>
</head>
<body>

<h1>Fetch Function Example</h1>

<label for="name">Enter Name:</label>
<input type="text" id="name" name="name">
<button onclick="callAzureFunction()">Call Azure Function</button>

<div id="result"></div>

<script>
async function callAzureFunction() {
const functionUrl = 'https://your-function-app-name.azurewebsites.net/api/your-function-name';

const name = document.getElementById('name').value;

const requestBody = {
name: name
};

try {
const response = await fetch(functionUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(requestBody),
});

if (response.ok) {
const result = await response.json();
document.getElementById('result').innerText = Function Result: ${JSON.stringify(result)};
} else {
document.getElementById('result').innerText = Error: ${response.status} - ${response.statusText};
}
} catch (error) {
console.error('Error:', error);
document.getElementById('result').innerText = 'An error occurred while calling the function.';
}
}
</script>

</body>
</html>

and i replaced the URL with my function's URL, so when i execute the file it allows me to enter one argument which is the name but then an error "An error occurred while calling the function." shows up when i click on call function button. Can anyone please correct this code and explain to me what was wrong? I appreciate it.

1700516184787.png
 
Joined
Jan 24, 2024
Messages
42
Reaction score
7
Your code looks mostly correct, but it seems like you have a small syntax error in the line where you update the result element. The line:


JavaScript:
document.getElementById('result').innerText = Function Result: ${JSON.stringify(result)};

should be wrapped in backticks for template literals, like this:

JavaScript:
document.getElementById('result').innerText = `Function Result: ${JSON.stringify(result)}`;

Additionally, it's a good practice to properly handle the case when the response from the server is not in JSON format. You can add a check for the Content-Type header to ensure that it's a JSON response before trying to parse it. Here's the modified code:

HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fetch Function Example</title>
</head>
<body>

<h1>Fetch Function Example</h1>

<label for="name">Enter Name:</label>
<input type="text" id="name" name="name">
<button onclick="callAzureFunction()">Call Azure Function</button>

<div id="result"></div>

<script>
async function callAzureFunction() {
const functionUrl = 'https://your-function-app-name.azurewebsites.net/api/your-function-name';

const name = document.getElementById('name').value;

const requestBody = {
name: name
};

try {
const response = await fetch(functionUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(requestBody),
});

if (response.ok) {
const contentType = response.headers.get('content-type');
if (contentType && contentType.includes('application/json')) {
const result = await response.json();
document.getElementById('result').innerText = `Function Result: ${JSON.stringify(result)}`;
} else {
document.getElementById('result').innerText = 'Error: Response is not in JSON format';
}
} else {
document.getElementById('result').innerText = `Error: ${response.status} - ${response.statusText}`;
}
} catch (error) {
console.error('Error:', error);
document.getElementById('result').innerText = 'An error occurred while calling the function.';
}
}
</script>

</body>
</html>

Make sure to replace 'https://your-function-app-name.azurewebsites.net/api/your-function-name' with the actual URL of your Azure Function. With these changes, your code should work more reliably and provide better error handling.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,794
Messages
2,569,641
Members
45,355
Latest member
SJLChristi

Latest Threads

Top