XML HTTP 请求无法从 JS 向我的 PHP 文件发送请求

debugcn 发表于 Dev

米沙·萨琴科

在log.js下面的功能无法正常工作由于某种原因，我真的希望它的工作，也许有人知道如何使用POST而不是GET，这样我就不必使用cookie来检索PHP文件登录信息

function refreshData(file,msg){
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.open("GET", file);
  xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xmlhttp.send();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState === 4 && this.status === 200) {
      location.reload();
    } else {
      swal(msg);
    };
  }
}

但是当我用这个函数替换该函数时没有请求，一切正常，但它打开了一个新选项卡

function refreshData(file,msg){
  window.open("login.php");
}

这是我的index.php：

<DOCTYPE! HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="/cafe/script/main2.js"></script>
	<link rel='stylesheet' type='text/css' href='../style/main.css' media='screen' />
</head>
<body>

<div align='left' class='nav-top'>
	<a class='logo' id='logo'>kush.</a>
	<a class='logo2' id='logo'>by</a>
	<a href='../novosti' id='btnNews'>news</a>
	<a href='../zavedenia' id='btnPlaces'>places</a>
	<a href='../kontakty' id='btnContacts'>contacts</a>
	<a href='../blog' id='btnBlog'>blog</a>
<script src='log.js'></script>
</body>
</html>

这是我的 log.js

var authentication = "no";
var authentication=getCookie("auth");
var email=getCookie("email");

	if(authentication=="logged_in")
	{
		//some code
		if(email.indexOf("@cafe.eda")>-1)
		{
			loadCafeProfile(email);
		}
		else
		{
			loadPersonProfile(email);
		}
	}
	else
	{
		//some code
		var login = document.getElementById("btnLogIn");
		login.addEventListener('click', logIn);
	}

	function logIn()
	{
		var email = document.getElementById("InputEmail").value;
		var pass = document.getElementById("InputPass").value;
		var re = /^[a-zA-Z0-9]+$/i;
		if(!validateEmail(email))
		{
			swal("check  email");
		}
		else if(pass.length<6)
		{
			swal("max password length 6 char");
		}
		else
		{
			setCookie("email",email,1);
			setCookie("pass",pass,1);
			refreshData("login.php","login in");
		}
	}

function validateEmail(email)
{
    //email validation
    return //true false
}

function setCookie(cname,cvalue,exdays)
{
	var d = new Date();
	d.setTime(d.getTime()+(exdays*24*60*60*1000));
	var expires="expires="+d.toGMTString();
	document.cookie=cname+"="+cvalue+";"+expires+";path=/";
}

function getCookie( name )
{
    var dc = document.cookie;
    var prefix = name + "=";
    var begin = dc.indexOf("; " + prefix);
    var end = null;
    if (begin == -1)
    {
        begin = dc.indexOf(prefix);
        if (begin != 0)
        {
        	return null;
        }
        end = document.cookie.indexOf(";", begin);
    } 
    else
    {
        begin += 2;
        end = document.cookie.indexOf(";", begin);
        if (end == -1)
        {
            end = dc.length;
        }
    }
    return decodeURI(dc.substring(begin + prefix.length, end) ).replace(/"/g, '');
}



function loadCafeProfile(email)
	{
		//load cafe profile
	}
	function loadPersonProfile(email)
	{
		//loads persons profile
	}

function refreshData(file,msg){
      var xmlhttp = new XMLHttpRequest();
      xmlhttp.open("GET", file);
      xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      xmlhttp.send();
      xmlhttp.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200) {
          location.reload();
        } else {
          swal(msg);
        };
      }
    }

这是我的 login.php

<?php
$ini_array = parse_ini_file("../../db.ini");
$servername=$ini_array['sn'];
$username=$ini_array['un'];
$password=$ini_array['pw'];
$dbname=$ini_array['dn'];
	setcookie("jumbo","jumbo",time()+3600,'/');
	$conn=new mysqli($servername,$username,$password,$dbname);
	
	//check conection
	if(!$conn)
	{
		setcookie('error','connection_fail',time()+3600,'/');
		//header("Location:../cafe");
	}
	$email=mysqli_real_escape_string($conn,$_COOKIE['email']);
	$pass=mysqli_real_escape_string($conn,$_COOKIE['pass']);

	$email = filter_var($email, FILTER_SANITIZE_EMAIL);

// Validate e-mail and password
if (filter_var($email, FILTER_VALIDATE_EMAIL) && !preg_match('/[^A-Za-z0-9]/', $pass))
{
	$pass=md5(sha1(md5($pass)));
	if(strpos($email,'@cafe.eda')!==false)
	{
		$sql="SELECT * FROM cafe WHERE email='".$email."' and parol='".$pass."'";
	}
	else
	{
		$sql="SELECT * FROM rebyata WHERE email='".$email."' and parol='".$pass."'";
	}
	$result = mysqli_query($conn, $sql);
	if ($row = mysqli_fetch_array($result, MYSQLI_BOTH))
	{
		setcookie('auth','logged_in',time()+3600*2400,'/');
		setcookie('ses',md5($email.$pass),time()+3600*2400,'/');
		//echo "<script>window.close();</script>";
	}
	else
	{
		setcookie('error','loginfail',time()+3600*2400,'/');
		//header("Location:../cafe");
	}
}
else
{
	setcookie('error','wrong_input',time()+3600*2400,'/');
	//header("Location:../cafe");
}
?>

山姆

好的，因此您可以使用该函数传递信息，而不是cookies用于传输数据。xmlHttpRequest()send()

Web API | MDN：

send() 接受一个可选参数，它允许您指定请求的正文；这主要用于请求，例如 PUT。如果请求方法为 GET 或 HEAD，则忽略 body 参数并将请求正文设置为 null。

对象

send()允许参数；在这种情况下，您可以在一个内部传递用户名和密码object：

.send({
  user: email,
  pass: password
});

然后在 PHP 中将$_POST数据放入正确的数组中：

if($_POST)
{
    $email = $_POST['user'];
    $password = $_POST['pass'];
}

连载

或者您可以将数据序列化为字符串：

var params = "email="+ email + "&pass="+ password;

然后发送：

.send(params);

如果您使用 jQuery，您还可以使用他们方便的小serialize()功能。

$('form').serialize();

这将简单地将项目放入一个字符串中，如上所示。

一旦收到login.php文件中的数据，您就可以解析字符串（如果序列化），如果将它们放入对象中，则可以使用标准$_POST变量。

if($_POST)
{
    parse_str($_POST, $form);
    // you can now get the post data into an array:
    $form['email'];
    $form['password'];
}

解析度

你的login()功能：

function logIn() {
    var email = document.getElementById("InputEmail").value;
    var pass = document.getElementById("InputPass").value;
    var re = /^[a-zA-Z0-9]+$/i;
    if (!validateEmail(email)) {
        swal("check  email");
    } else if (pass.length < 6) {
        swal("max password length 6 char");
    } else {
        refreshData("login.php", {
                email: email,
                password: pass
        });
    }
}

那么你的refreshData()函数看起来像这样：

function refreshData(file, data) {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("POST", file);
    xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xmlhttp.send(data);
    xmlhttp.onreadystatechange = function () {
        if (this.readyState === 4 && this.status === 200) {
            location.reload();
        } else {
            swal(msg);
        };
    }
}

承诺

或者，更好的是，您可以使用fetch()哪个更好（更新）替代xmlHttpRequest. 您还可以使用承诺 - 效果很好。

function refreshData(url, data) {
    return fetch(url, {
        body: JSON.stringify(data),
        cache: 'no-cache',
        method: 'POST',
        mode: 'cors'
    })
    .then(function(response){
        return response.json();
    })
    .catch(function(e) {
            console.log("Error: ", e);
    });
}

那是实现AJAX调用的新方法，如果你有兴趣看MDN的文档，它们非常好，也有很好的例子。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。