javascript – 为什么当我使用AJAX重新加载页面时,数据会消失

基本上我在互联网上找到代码来测试和使用它.
问题是当我重新加载页面时,数据消失了.
我想要发生的是数据或价值留下来.

多谢你们

这是index.html中的代码

 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="utf-8">
  <title>Pass Data to PHP using AJAX without Page Load</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script
  src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
 </head>
<body>
 <div class="container">
 <h2>Enter Some Data Pass to PHP File</h2>
  <div class="row">
   <div class="col-md-3">
    <form>
     <div class="form-group">

      <input type="text" id="pass_data" class=" form-control">
       <input type="button"  class="btn btn-success" onclick="passData();" value="Set">

      <p id="message"></p>
    </div>

  </form>
</div>
</div>
</div>
</body>

<script type="text/javascript">

function passData() {
    var name = document.getElementById("pass_data").value;
    var dataString = 'pass=' + name; 
    if (name == '') {
        alert("Please Enter the Anything");
    } else {
        // AJAX code to submit form.
        $.ajax({
            type: "POST",
            url: "post.php",
            data: dataString,
            cache: false,
            success: function(data) {
                $("#message").html(data);
            },
            error: function(err) {
                alert(err);
            }
        });
    }
    return false;
}

</script>
</html>

这是我的PHP代码

  <?php

  $pass=$_POST['pass'];

  echo json_encode($pass);
   ?>

解决方法:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Pass Data to PHP using AJAX without Page Load</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script
            src="https://code.jquery.com/jquery-2.2.4.js"
            integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
    <h2>Enter Some Data Pass to PHP File</h2>
    <div class="row">
        <div class="col-md-3">
            <form>
                <div class="form-group">

                    <input type="text" id="pass_data" class=" form-control">
                    <input type="button" id="success" class="btn btn-success" value="Set">

                    <p id="message"></p>
                </div>

            </form>
        </div>
    </div>
</div>
</body>

<script type="text/javascript">

    $("#success").click(function () {
        var name = document.getElementById("pass_data").value;
        var dataString = 'pass=' + name;
        if (name == '') {
            alert("Please Enter the Anything");
        } else {
            // AJAX code to submit form.
            $.ajax({
                type: "POST",
                url: "post.php",
                data: dataString,
                cache: false,
                success: function (data) {
                    $("#message").html(data);
                    localStorage.setItem("data",data);
                },
                error: function (err) {
                    alert(err);
                }
            });
        }
        return false;
    })


    $(document).ready(function () {
        var someVarName = localStorage.getItem("data");
        console.log(someVarName)
        $("#message").html(someVarName);
    });


</script>
</html>

首先,我更改了你的js代码以使用更多的jquery语法,因为你已经包含它(我在脚本上触发on click事件而我没有把它放在html中).在那之后为了在ajax成功刷新后不丢失你的变量我将数据的值传递给localstorage,并且在刷新之后(在文档就绪)我检索它并在标签中显示它.

当然,每次放置一个新值并显示它时,它会覆盖前一个值,因此刷新后会显示输入字段中的最新值.

javascript – 为什么当我使用AJAX重新加载页面时,数据会消失

相关文章