Question

对于大多数人来说这个简单的问题，但对我来说，作为php和jquery + ajax的新手，不是真的：如何用一些其他的html代码替换我的index.html，从php文件调用ajax请求？

的index.html

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>

   <h1>Login page</h1>

   <button id="btn_login">Login</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>

</body>
</html>

javascript.js

$('#btn_login').click(
function(){

   $.ajax({
      url: "login.php",
      type: "GET",
      success: function(data){
          // what to do here?
      }
   });
}
)

的login.php

<?php
echo '<div>Succesful login</div>';
?>

TLDR：我想在点击按钮时将“登录页面”+登录按钮屏幕替换为“成功登录”。谢谢

Answer 1

您需要识别 - 或分类 - 您的<h1>标记可以轻松更改它的内容，

<h1 id='title'>Login page</h1>

然后，在您的ajax调用中，如果成功，您可以更改内容：

success: function(data){
    // what to do here?
    if (data) {
        $('#title').html(data);
        $('#btn_login').remove();
    }
}

Answer 2

看看：（https://www.w3schools.com/xml/tryit.asp?filename=tryajax_first ： w3schools） ...

Answer 3

你可以试试这个：

$('#btn_login').click(
function(){

       $.ajax({
          url: "login.php",
          type: "GET",
          success: function(data){
              document.body.innerHTML = ""; // remove all content from the document
              document.write(data); // write the returned div to the document
          }
       });
    }
    )

简单的php ajax html问题

3 个答案: