提交表单而不刷新页面（部分页面刷新）答案

【问题标题】：Submit form without page refresh (partially page refresh)提交表单而不刷新页面（部分页面刷新）
【发布时间】：2016-05-21 12:20:25
【问题描述】：

HTML 头中的Index.php：

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
  <script src="http://malsup.github.com/jquery.form.js"></script>
  <script>
    // wait for the DOM to be loaded
    $(document).ready(function() {
      // bind 'myForm' and provide a simple callback function
      $('#loginform').ajaxForm(function() {

        $.get("loginform.php", function(data) {
          $("#loginform1").html(data);
        });
      });
    });
  </script>
</head>

loginform.php：

<div id="loginform1">
<?php if(!isset($_COOKIE['login']) && $obj->checkCookie($database, $_COOKIE['login'])){ ?>
<form class="pure-form" id="loginform" method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>">
    <fieldset>
        <legend style="width:500px;">Anmeldung</legend>
        <input type="text" name="username" placeholder="Benutzername">
        <input type="password" name="password" placeholder="Passwort">
        <button type="submit" name="submit" class="pure-button pure-button-primary">Login</button>
    </fieldset>
</form>
<?php } else { ?>
  <form class="pure-form" id="loginform" method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>">
      <fieldset>
          <legend style="width:500px;">Anmeldung</legend>
          <button type="submit" name="logout" class="pure-button pure-button-primary">Logout</button>
      </fieldset>
  </form>
  <?php } ?>
</div>

loginform.php 包含在一个名为 header.inc 的文件中，该文件包含在 index.php 中。

现在登录可以使用 ajax，页面不会刷新，它会设置 cookie。但是登录表单没有刷新，所以登录后没有显示注销按钮，整个页面也没有显示我登录后要显示的内容。手动刷新页面后，它显示注销按钮和内容。

【问题讨论】：

标签： php ajax

【解决方案1】：

    <script>
$(document).ready(function() {

      $('#loginform').submit(function() {

var fdata = $('#loginform').serialize()
            $.ajax({
                url: "login.php",//path to the page submit data
                type: 'GET',
                data: fdata,
                success: function (data) {
                    //do on success
                }

            });

       return false;

      });
    });

        </script>

【讨论】：

【解决方案2】：

首先，删除action="<?php echo $_SERVER['PHP_SELF']; ?>"，

您可以添加 jquery 脚本，例如，

$("input[name=yourbtnname]").click(function(){
  $.ajax({
    url:'yoururl.php',
    data:'yourdatacontenet',
    ...,
    success:function(result){
        /* show your resulted data */
        console.log(result);
    }
  });
});

在yoururl.php中制作你的php脚本

供您进一步插入数据

【讨论】：

【解决方案3】：

如果您通过 ajax 提交登录信息，那么 PHP 的 header() 重定向将不起作用。登录成功后需要通过 JavaScript 刷新页面。即你可以在登录成功时运行它（在 loginform.php 中）：

if($login) {
    // run this only if login is successful
    echo "<script>
        setTimeout(function(){
           window.location='index.php';
        }, 2000);
    </script>";
}

【讨论】：