使用JQuery Ajax保存数据以避免页面重新加载

Question

At the moment I save data when changes are made on the page using ordinary PHP but of course it makes the page reload every time which resets everything. I really need to do it without page reload. I've heard its possible to do with Ajax and JQuery. I would much prefer Jquery answers rather than Javascript.

Answer 1

for example you have this form

<input type="text" name="name" class="abc" id="test" placeholder="Name">
<a href="#" class="PopUpSendBtn" id="sendinfo">Send</a>

then write Script

<script>
    $(document).ready(function() {
   // invoke event on clicking send button
   $("#sendinfo").on("click", function(evt) {
   // get value of input field
var userName = $('#test').val();

                         jQuery.ajax({
                url: filename.php,
                type:'POST',
                async: false,
                data:{'userName':userName},
                success: function(output_string){
                    //    alert(output_string);
                    if(output_string == 1){
                        // do someting
                    } else { 
                        // do someting
                    }
                   }
                   , error: function(object, status, response) {
                    alert(response); 
                }
                });

    });
});
</script>

your php file(filename.php) get data using post request

 $data = $_POST['userName'];
// query to store data in db
// after saving data successfully in db your can send back a success message //in json or any other format (in my case i am using json)
         $data['success'] = TRUE;
        echo json_encode($data);

Don't forget to include jquery script.

This is the basic idea how to send data using ajax. You can modify it according to your requirements.