提交表单而不刷新页面(部分页面刷新)

时间:2016-05-21 12:20:26

标签: php ajax

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。但登录表单不刷新,因此登录后不会显示注销按钮,整个页面不会显示登录后我想要显示的内容。手动刷新页面后会显示注销按钮和内容。

3 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

首先,删除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脚本

了解您的进一步插入数据

答案 2 :(得分:0)

如果您通过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>";
}