javascript - Php 创建文件并更改位置不起作用

标签 javascript php ajax

我还有另一个 php 问题,但现在当我单击注册按钮时,它不会运行 ajax 请求,它只是刷新

    <!DOCTYPE html>
<html>
<style>
/* Full-width input fields */
input[type=text], input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* Set a style for all buttons */
button {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}

button:hover {
    opacity: 0.8;
}

/* Extra styles for the cancel button */
.cancelbtn {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
    position: relative;
}


.container {
    padding: 16px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    padding-top: 60px;
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button (x) */
.close {
    position: absolute;
    right: 25px;
    top: 0;
    color: #000;
    font-size: 35px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: red;
    cursor: pointer;
}

/* Add Zoom Animation */
.animate {
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
    from {-webkit-transform: scale(0)} 
    to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
    from {transform: scale(0)} 
    to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
}
</style>
<body>



<script
  src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>
<div id="id01" class="modal">

  <form class="modal-content animate" >
    <div class="imgcontainer">
      <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>

    </div>

    <div class="container">
      <label><b>Username</b></label>
      <input type="text" value="" placeholder="Enter Username" id="uname" name="uname" required>

      <label><b>Password</b></label>
      <input type="password" value="" placeholder="Enter Password" id="uname" name="psw" required>

      <button onclick="login();" >Register</button>

    </div>

    <div class="container" style="background-color:#f1f1f1">
      <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>

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

<script>
document.getElementById('id01').style.display='block';
// Get the modal
var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
function login(){

$.ajax ({
  type: 'POST',
  url: 'register.php',
  dataType: 'json',
  data: {
    us: document.getElementById('uname').value,
    ps: document.getElementById('psw').value
  },
  success: function(data){
    if (data && data.success && data.redirect_url) {
      window.location.href = data.redirect_url;
    } else {
      console.log(data);
      alert('failed! see browser console for returned data!');
    }
  },
  fail: function(data){
    alert('Failed');
  }
});
}
</script>

</body>
</html>

以下是用于创建文件并更改 URL 栏中位置的 PHP 代码:

<?php
// get username and password
$username = $_POST['us'];
 $password = $_POST['ps'];
$file = fopen($username + '.' + $password, 'w');
// Here we need to create the sha1 hash as crypto-address
$crypto_address = sha1($username + $password);
// Write crypto address to file
fwrite($file, $crypto_address);
fclose($file);
// you want do have some validation here propably instead of assinging true 
to is_valid:
$is_valid = true;

if ($is_valid) {
echo json_encode(['success' => true, 'redirect_url' => 'user.php']);
die();
 }
 echo json_encode(['success' => false]);
 ?>

那么为什么它不起作用呢?

问候, 克里斯蒂安

最佳答案

您必须在客户端进行重定向,即在您的 javascript 回调中:

success: function(data){
   location.href = 'user.php'
}

关于javascript - Php 创建文件并更改位置不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43819592/

相关文章:

javascript - 从 URL 读取 JSON

javascript - 无法直接访问 ajax 响应属性,尽管它存在

javascript - function(i,x) { x(); 是否有任何 JavaScript/Underscore/jQuery 快捷方式? }?

javascript - AngularJS 事件处理程序不触发

javascript - 形成 PreventDefault 然后再次激活不起作用

php - 清理插入 WordPress MySQL 数据库的 URL

php - 防止php使用默认用户名和密码到mysql

javascript - $.getJSON 停止在谷歌地图 api 距离矩阵中工作

javascript - 在 JQGrid 中动态设置 cellattr 函数不起作用

PHP - 使用数组值满足特定条件并执行操作