Javascript Php创建文件和更改位置不起作用_Javascript_Php_Ajax

Javascript Php创建文件和更改位置不起作用

javascript php ajax

Javascript Php创建文件和更改位置不起作用,javascript,php,ajax,Javascript,Php,Ajax,我还有一个php问题，但是现在当我单击register按钮时，它没有运行ajax请求，只是刷新了一下 <!DOCTYPE html> <html> <style> /* Full-width input fields */ input[type=text], input[type=password] { width: 100%; padding: 12px 20px; margin: 8px 0; display: in

我还有一个php问题，但是现在当我单击register按钮时，它没有运行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>


/*全宽输入字段*/
输入[类型=文本]，输入[类型=密码]{
宽度：100%；
填充：12px 20px；
利润率：8px0；
显示：内联块；
边框：1px实心#ccc；
框大小：边框框；
}
/*为所有按钮设置样式*/
钮扣{
背景色：#4CAF50；
颜色：白色；
填充：14px 20px；
利润率：8px0；
边界：无；
光标：指针；
宽度：100%；
}
按钮：悬停{
不透明度：0.8；
}
/*取消按钮的其他样式*/
.取消{
宽度：自动；
填充：10px 18px；
背景色：#f44336；
}
/*将图像居中并放置关闭按钮*/
.imgcontainer{
文本对齐：居中；
保证金：24px 0 12px 0；
位置：相对位置；
}
.集装箱{
填充：16px；
}
span.psw{
浮动：对；
填充顶部：16px；
}
/*模态（背景）*/
.莫代尔{
显示：无；/*默认情况下隐藏*/
位置：固定；/*保持原位*/
z指数：1；/*位于顶部*/
左：0；
排名：0；
宽度：100%；/*全宽*/
高度：100%；/*全高*/
溢出：自动；/*根据需要启用滚动*/
背景色：rgb（0,0,0）；/*回退色*/
背景色：rgba（0,0,0,0.4）；/*黑色w/不透明度*/
填充顶部：60px；
}
/*模态内容/框*/
.模态内容{
背景色：#fefe；
保证金：5%自动15%自动；/*5%从顶部，15%从底部和居中*/
边框：1px实心#888；
宽度：80%；/*可能更多或更少，具体取决于屏幕大小*/
}
/*关闭按钮（x）*/
.结束{
位置：绝对位置；
右：25px；
排名：0；
颜色：#000；
字体大小：35px；
字体大小：粗体；
}
.关闭：悬停，
.结束：聚焦{
颜色：红色；
光标：指针；
}
/*添加缩放动画*/
.制作动画{
-webkit动画：animatezoom 0.6s；
动画：动画空间0.6s
}
@-webkit关键帧动画库{
来自{-webkit变换：缩放（0）}
到{-webkit转换：缩放（1）}
}
@关键帧动画空间{
来自{transform:scale（0）}
到{变换：比例（1）}
}
/*更改超小屏幕上“跨度”和“取消”按钮的样式*/
@媒体屏幕和屏幕（最大宽度：300px）{
span.psw{
显示：块；
浮动：无；
}
.取消{
宽度：100%；
}
}
&时代；
用户名
密码
登记
取消
document.getElementById（'id01'）.style.display='block'；
//获取模态
var modal=document.getElementById（'id01'）；
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}
函数登录（）{
$.ajax({
键入：“POST”，
url:'register.php'，
数据类型：“json”，
数据：{
us:document.getElementById（'uname'）.value，
ps:document.getElementById（'psw'）.value
},
成功：功能（数据）{
if（data&&data.success&&data.redirect\u url）{
window.location.href=data.redirect\u url；
}否则{
控制台日志（数据）；
警报（'失败！有关返回的数据，请参阅浏览器控制台！'）；
}
},
失败：功能（数据）{
警报（“失败”）；
}
});
}

以下是用于在urlbar中创建文件和更改位置的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]);
 ?>

那为什么它不起作用呢

问候,，

Christian

您必须在客户端执行重定向，即在javascript回调中：

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

您的浏览器不会重定向（urlbar中的位置不会更新），因为您执行的是AJAX调用，而不是表单POST请求。所以，在JS中执行此操作：

$.ajax ({
  type: 'POST',
  url: 'register.php',
  dataType: 'json',
  data: {
    us: document.getElementByName('uname').value,
    ps: document.getElementByName('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');
  }
});

而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]);

问题不是很清楚，但根据我的猜测：您的头是在Ajax请求上执行的，而不是在用户请求上执行的。看看你的开发工具，ajax请求必须被重定向。我没有理解你的意思，我想你的意思是我应该在javascript中更改位置，或者你的头（'location:…）
在通过ajax调用的代码中被调用。因此，只能重定向Ajax请求。如果要重定向用户，必须在成功回调中执行此操作
扩展@NicolasPerraut所说的内容-添加一个location.href=“user.php”在success Callback中，另一个问题与此无关，但也许你知道一些好的免费php托管服务，因为前4个在5分钟后不知什么原因暂停了我现在它只是刷新站点，甚至没有运行请求，更新了下面的代码，改为向按钮添加id，并删除内联onclick=“login（）；”然后执行document.getElementById（“”）.onclick=function（）{>AJAX调用HERE>}