Display PHP on HTML with AJAX
Question
I was recently doing a PHP web-app, which turns out needs AJAX to display temporary and permanent results without reloading the page or redirecting to another page. Just simply update.
So I have a form on my index, where it collects search terms:
<form action="search.php" method="post">
<label for="fname" id="label">Enter search terms:</label>
<br>
<input type="text" id="fname" name="search"><br>
<input type="submit" id="submit">
Then I have it take it to my PHP script, which then processes the search terms and in theory should display them on the same page just in the other paragraph with something like this which is permanent:
echo 'Selected search terms: '. $terms. ".<br>
Search terms found: ".$termc."." ;
While my PHP script is working, I display a permanent "Loading..." and when it finishes it should display "Done." replacing the "Loading..." text.
Would anyone know how I could implement this with AJAX? How could I talk to PHP?
3 answers
solution1
1 2017-10-06 06:17:06
use the below code to help display data with out refresh the page.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>New User Registration</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
<div id="newUserHld">
<form name="serarch_frm" method="post" id="serarch_frm">
<label for="fname" id="label">Enter search terms:</label>
<br>
<input type="text" id="fname" name="search"><br>
<input type="submit" id="submit" onclick="formSubmit(); return false;" >
</form>
</div>
<div id="success">
</div>
</body>
<script>
function formSubmit(){
$.ajax({
type:'POST',
url:'search.php',
data:$('#serarch_frm').serialize(),
success:function(response){
$('#success').html(response);
}
});
return false;
}
</script>
</html>
create the search.php file and put this code.
<?php
echo 'Selected search terms:'.$_POST['search'];
exit;
?>
solution2
0 2017-10-06 06:14:41
you need to write js code something like this
(function($){
$(document).ready(function(){
$("form").submit(function(e){
$( ".result" ).html( "Loading.." );
e.preventDefault();
// ajax call to your php file
$.post( "file.php", function( data ) {
$( ".result" ).html( data );
});
});
});
})(jQuery);
solution3
0 2017-10-06 06:27:44
Please follow below step.
1) You can put form tag like this <form onsubmit="submitFormData()">
2) Create javascript function.
3) function submitFormData(){ var form_data ='search='+$('#fname').val();$("#loading").show(); $.ajax({url: "yourphpfile.php",type: "POST",data: form_data,success: function (res){$("#loading").hide();});} function submitFormData(){ var form_data ='search='+$('#fname').val();$("#loading").show(); $.ajax({url: "yourphpfile.php",type: "POST",data: form_data,success: function (res){$("#loading").hide();});}
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.