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

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.

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.

For me worked better to save all my data in the SESSION so to retrieve them every time i need. With AJAX works really fast and good. In this way all my data are saved also if the page refreshes. Obviously you have to declare all the variables you intend to use at the first step or it will never work!