$.ajax can't find server side url
Question
I'm new to using servers and ajax so I might add useless information or forget important information, let me know if either is the case.
I have a main.js and test.js . From my main.js I use express to get a folder to the client side, in this folder are my .html and .css files. For some more clearance, it looks like this:
/main.js
/test.js
/clientSide/index.html
/clientSide/style.css
Now from the .html file I'm trying to run the test.js , thats on the server side. I've tried to do this with jquery as follows:
$.ajax({
type: "POST",
url: "./test.js",
success: function (result) { alert("succes"); },
error: function (result) { alert("no succes"); }
})
I've also tried url: "../test.js" in case the url would take the .html as the root. Sadly both give a 404 error saying there is no test.js file.
Is someone able to tell me what I'm doing wrong?
2 answers
solution1
0 ACCPTED 2018-03-31 21:27:05
You need to allow access to the file. Using Express, you can make a path static using:
const express = require('express')
const app = express()
app.use(express.static('public'))
Everything inside the public folder can now be accessed. In your case, create a public folder and include your test.js file.
Edit
This is indeed what I've done tot make my clientSide folder public. But test.js should be on the serverside since it should update a sqlite3 database there
In this case, you should create an API. With Express, this will be very simple. Simply create a route:
app.get('/test', (req, res) => {
//perform functions here
//send response
res.send(data);
});
In your jquery code, you can call the route like so:
$.ajax({
type: 'GET',
url: '/test',
success: function (result) { alert("succes"); },
error: function (result) { alert("no succes"); }
});
You can read more about routing in Express here: https://expressjs.com/en/guide/routing.html
solution2
0 2018-04-01 03:59:54
I have created an example on how to retrieve data correctly using ajax. If you backend server file is test.js, you can replace the url data with that. In the example that I implemented, am getting data on smoke.php server side using ajax. This method will work for you
<html>
<head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
//$('#result').click(function(){
var post1 = 'data to post if any';
$('#loader').fadeIn(400).html('Please Wait. Data is being Loaded');
// assuming that you want query result by posting a variable
var datasend = "alert1="+ post1;
$.ajax({
type:'POST',
url:'smoke1.php',
data:datasend,
crossDomain: true,
cache:false,
success:function(msg){
alert('success');
$('#loader').hide();
$('#result').fadeIn('slow').prepend(msg);
}
});
//})
});
</script>
<div id="loader"></div>
<div id="result"></div>
</body></html>
smoke.php
<?php
$smoke_status = 'I am not smoking';
echo htmlspecialchars($smoke);
?>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.