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

Question

目前我使用普通 PHP 在页面上进行更改时保存数据，但当然它每次都会重新加载页面，从而重置所有内容。我真的需要在不重新加载页面的情况下这样做。我听说它可能与 Ajax 和 JQuery 有关。我更喜欢 Jquery 答案而不是 Javascript.

Answer 1

例如你有这个表格

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

然后编写脚本

<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>

您的 php 文件 (filename.php) 使用 post 请求获取数据

 $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);

不要忘记包含 jquery 脚本。

这是使用 ajax 发送数据的基本思路。您可以根据自己的需求进行修改。

Answer 2

对我来说，将所有数据保存在 SESSION 中效果更好，以便在每次需要时检索它们。使用 AJAX 效果非常好。这样，如果页面刷新，我的所有数据也会被保存。显然你必须在第一步声明你打算使用的所有变量，否则它永远不会起作用！

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

Save data using JQuery Ajax to avoid page reload

php

ajax

jquery

reload