即使是POST方法,Ajax充当GET方法

时间:2014-11-07 20:00:46

标签: javascript php ajax post get

您好我在Javascript和PHP(Ajax非jquery)编码时遇到了问题。我试图通过Ajax上传文件,并在PHP中处理它。

这是我的代码:

的index.html

<html>
<head>
<title>PHP AJAX Upload</title>

<script type="text/javascript">


function upload() {
    // 1. Create XHR instance - Start
    var dat= "bla";
    document.getElementById("div2").innerHTML = "working";
   if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) {
        xhr = new ActiveXObject("Msxml2.XMLHTTP");
    }
    else {
        throw new Error("Ajax is not supported by this browser");
    }

    var rad = document.getElementById('fajl');
    var filee = rad.files[0];

    var formData = new FormData();
    formData.append('rad',filee)
    formData.append('var',dat)

    xhr.open('POST', 'upload.php'); 


    xhr.send(formData);

    xhr.onload = function () {
        if (xhr.readyState === 4 && xhr.status == 200) {

                document.getElementById("div2").innerHTML = xhr.responseText;
                //alert(xhr.readyState);
                //alert(xhr.status);
             }       
    }
}

</script>
</head>
<body>

<form id="uploadForm"  enctype="multipart/form-data">
<label>Upload File:</label><br/>
<input name="rad" id="fajl" type="file" class="inputFile" />
<input type="submit" value="Submit" class="btnSubmit" onclick="upload()" />
<div id="div2">
</div>

</form>
</body>
</html>

upload.php

<?php

if(is_array($_FILES)) {
if(is_uploaded_file($_FILES['rad']['tmp_name'])) {
$sourcePath = $_FILES['rad']['tmp_name'];
$targetPath = "images/".$_FILES['rad']['name'];
if(move_uploaded_file($sourcePath,$targetPath)) {
echo ("uspjeh<br>");

}}
}
$podatak=$_POST['var'];
echo "$podatak"

?>

问题是我在div2元素中看不到PHP脚本响应。 Ajax表现得很奇怪,让我很困惑。我已将JavaScript alert命令置于xhr.readyState条件下(现已注释)。当我这样做然后我看到输出,但是当我关闭警报对话框时,浏览器自动重新加载页面并使URL像我正在使用GET方法(我正在使用POST)然后服务器输出消失。 (rad in?rad = ...是我输入元素的名称)

enter image description here

当我没有使用alert命令时,我根本看不到输出,因为页面重定向非常快。我在做什么??

2 个答案:

答案 0 :(得分:1)

这是因为您正在使用提交按钮并且提交表单。默认情况下,表单方法是GET请求。改为只改为按钮:

<input type="button" value="Submit" class="btnSubmit" onclick="upload()" />

答案 1 :(得分:1)

正在执行默认表单操作(提交)。

要停止此操作,请将return false添加到您的点击处理程序:

onclick="upload(); return false;"