I am working on a web server where user submits some information/inputs in a html form. On clicking the submit button the background php code initiates a python code for analysis. Python code takes long time. Following code shows 'form submitted' message when python code finishes. I do not want the user to wait until the python code finishes. I want to show user the 'form submitted' message when the submit button is clicked and python code will keep on running in the server. html
<form name="input" action='input.php' method="post">
<input type="text" name="num1" id="num1" size="4">
<input type="text" name="num2" id="num2" size="4">
<input type="submit" name = "submit" value="Submit" class="submit"/>
</form>
php
echo ("Form submitted");
$num1=$_POST["num1"];
$num2=$_POST["num2"];
$makeinfo= shell_exec('python mypycode.py');
I already searched in this site and did not find any useful post. Please comment/reply/vote only if it is useful to solve this issue.
To illustrate the comment a very simple ajax request sent, in this case to the same page but would be to input.php
, which takes a while to process data ( hence the sleep
) ~ the request is sent but no callback is used or waits for the response - look in the network tab of the console
<?php
if( $_SERVER['REQUEST_METHOD']=='POST' ){
/* to emulate input.php processing request using python */
ob_clean();
sleep(20);
exit( json_encode( $_POST ) );
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>ajax - send and forget</title>
</head>
<body>
<form name='input' action='<?php echo $_SERVER['REQUEST_URI'];?>'>
<input type='text' name='num1' size='4'>
<input type='text' name='num2' size='4'>
<input type='submit' value='Submit' class='submit' />
<div id='msg'></div>
</form>
<script>
const ajax=function( url, query ){
let xhr=new XMLHttpRequest();
xhr.open( 'POST', url, true );
xhr.send( query );
}
document.querySelector('input[type="submit"]').addEventListener('click',e=>{
e.preventDefault();
ajax( e.target.parentNode.action, new FormData( e.target.parentNode ) );
document.getElementById('msg').innerText='Request sent... Game Over';
});
</script>
</body>
</html>
The above is NOT intended to be the code you use - merely to illustrate the use of a send and forget type ajax request. The form ACTION
attribute is used in the ajax call - and as I don't have a file called input.php
I showed the request to the same page. Your actual input.php
will NOT have the sleep
function call - perhaps this might be of more use to you... it really is very basic ~ adapt this to your webpage and form.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>ajax - send and forget</title>
</head>
<body>
<form name='input' action='input.php'>
<input type='text' name='num1' size='4'>
<input type='text' name='num2' size='4'>
<input type='submit' value='Submit' class='submit' />
<div id='msg'></div>
</form>
<script>
const ajax=function( url, query ){
let xhr=new XMLHttpRequest();
xhr.open( 'POST', url, true );
xhr.send( query );
}
document.querySelector('input[type="submit"]').addEventListener('click',e=>{
e.preventDefault();
ajax( e.target.parentNode.action, new FormData( e.target.parentNode ) );
document.getElementById('msg').innerText='Request sent... Game Over';
});
</script>
</body>
</html>
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.