Run php script from html form with Ajax request
Question
I've been trying to make a small php script run through an ajax request. The bigger picture is that I want to store the data in an html form to my database on the click of a button, without actually submitting that form on the same click. However, since I'm new to programming, I'm trying to get the basic principles to work first.
For testing, I made a minimal example. In ajaxtest.hml, I made a button that should execute the function click() . That function is supposed to execute an ajax request to execute testing.php (located in the same folder). testing.php should just return 'Hello World'. However, the button does nothing, and I can't figure out what's wrong.
My code for ajaxtest.html:
<html>
<meta charset="UTF-8">
<body>
<button type="button" onclick="click()">Click Me</button>
<p id="p"></p>
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
function click(){
$.ajax({
type: 'POST',
url: 'testing.php',
success: function(data) {
alert(data);
}
});
}
</script>
</body>
</html>
and for testing.php:
<?php
echo "Hello World"; ?>
It is probably a typical rookie mistake I'm making here, but the jungle of different posts on this and similar topics hasn't helped me so far... Any help is greatly appreciated!
5 answers
solution1
0 2020-02-12 19:25:23
There are a few things wrong with your code: First of all, it is not a proper HTML file. Every HTML file should have a <head></head> tag and <body></body> tag within the <html></html> tag.
Secondly, you want to load your scripts in the <head> section. Where you can also define a title, meta tags, stylesheets, etc.
Thirdly, your <script> tag is wrong. You load a script and at the same time, you define a function. This should be two actions.
I think your script then will look something like:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</head>
<body>
<button type="button" onclick="click()">Click Me</button>
<p id="p"></p>
</body>
<script>
function click(){
$.ajax({
type: 'POST',
url: 'testing.php',
success: function(data) {
alert(data);
}
});
}
</script>
</html>
For information about HTML see W3schools
solution2
0 2020-02-12 19:25:27
您应该删除属性“onclick=click()”中的括号，否则该函数将在页面加载时立即执行，这就是您看不到按钮动作的原因。
solution3
0 2020-02-12 19:32:34
I suggest this way: (replace it instead of your code into Body tag.)
<button type="button" id="ajaxBtn">Click Me</button>
<p id="p"></p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
const btn=document.getElementById('ajaxBtn');
btn.addEventListener('click',click);
function click(){
$.ajax({
type: 'POST',
url: 'testing.php',
success: function(data) {
alert(data);
}
});
}
</script>
solution4
0 2020-02-12 19:33:22
It seems to me that you have 3 things you need to fix:
You are missing the opening
<script>tag for your function since the opening script tag you have at the moment is for the jquery library you are referencing.Also, don't use the reserved word "click" for your function name. I have changed it below to "myfunction"
Move the function definition to an appropriate place within your page.
If you try the code below it should work. I hope this helps.
<html> <meta charset="UTF-8"> <body> <script> function myclick(){ alert('posting!'); $.ajax({ type: 'POST', url: 'testing.php', success: function(data) { alert(data); } }); } </script> <button type="button" onclick="myclick()">Click Me</button> <p id="p"></p> <script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"/> </body> </html>solution5
0 2020-02-12 20:51:24
You can try calling the function implicitly
<html>
<meta charset="UTF-8">
<body>
<button id="testbutton" type="button">
Click Me
</button>
<p id="p"></p>
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$('body').on('click', '#testbutton', function(){
$.ajax({
type : 'POST',
url : 'testing.php',
success : function(data) {
alert(data);
}
});
});
</script>
</body>
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.