Question

基本上，我可以在Internet上找到要测试和使用的代码。问题是当我重新加载页面时，数据消失了。我想发生的事情是保留数据或值。

谢谢大家

这是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);
   ?>

Answer 1

<!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成功刷新后不会丢失您的变量，我将data的值传递给localstorage，并且刷新后（在准备好文档时）我将其检索并显示在标签中。

当然，每次您输入并显示新值时，它都会覆盖前一个值，因此刷新后，您会在输入字段中显示最新值。

Answer 2

我不确定我理解你的意思，但是...

在此行之前：

<!DOCTYPE html>

输入

<?php session_start(); ?>

在此行添加

<input type="text" id="pass_data" class=" form-control" value="<?php echo $_SESSION['VAL']; ?>">

并在您的php文件中：

<?php session_start();

  $pass=$_POST['pass'];
  $_SESSION['VAL'] = $pass;
  echo json_encode($pass);
   ?>

为什么当我使用AJAX重新加载页面时数据消失了

2 个答案: