Ajax 发布到 PHP 重定向而不是返回结果答案

【问题标题】：Ajax post to PHP redirects instead of return resultAjax 发布到 PHP 重定向而不是返回结果
【发布时间】：2015-07-07 22:37:48
【问题描述】：

我正在尝试制作一个用于上传用户头像的 PHP 页面，但我希望在文件选择后自动更新所选图片（可能带有确认头像更改的对话框）。到目前为止，我已经让自动上传位工作了，但是我在使用 POST 函数到我的外部 PHP 文件时遇到了问题。在测试时，它不会将结果返回给 Ajax，而是重定向到外部 PHP 文件并在那里回显结果。我确信我忽略了一些基本的东西，但我很想得到一些帮助，因为我似乎无法理解它。我之前已经设法在成功函数中将结果返回给 Ajax，但在这里它不会发出警报（仅重定向）。我还没有实现文件上传位，但我在网站的另一部分工作，所以我只需要让这段代码工作。

所以基本上我想要回答的是；

如何在不重定向的情况下获取回调？
我应该如何（以及在哪里）在 POST 到 uploadavatar.php 之前实现确认对话框？

这里是代码。

HTML / Javascript / Ajax

<?php
include_once 'includes/db_connect.php';
include_once 'includes/functions.php';
sec_session_start();
include_once 'header.php';
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
<script>
function chooseAvatar() { $("#avatarInput").click();}

$('form#avatarForm').submit( function( e ) {
e.preventDefault();

  var formData = new FormData($(this)[0]);

  $.ajax( {
  url: 'uploadavatar.php',
  type: 'POST',
  data: formData,
  async: false,
  cache: false,
  contentType: false,
  processData: false,
  success: function (returndata) {
  alert(returndata);
} });
return false;
});


</script>
</head>
<body>
<section>

<h1>Edit your profile: <?php echo htmlentities($_SESSION['username']) ?></h1>
<article>
<div style="height:0px;overflow:hidden">
<form action="uploadavatar.php" method="POST" enctype="multipart/form-data" name="avatarForm" id="avatarForm">
<input type="file" id="avatarInput" name="avatarInput" />
<script>
$("input[name='avatarInput']").change(function() {
  $( 'form#avatarForm' ).submit();
});
</script>
</form>
</div>
<p><span class='label_viewprofile'>Avatar (65x65):</span><img src="avatar/avatar.jpg" class="avatar-box" onclick="chooseAvatar();"></p>
<hr class="editprofile-line">

</article>
</section>
</body>
</html>

外部'uploadavatar.php'文件

<?php
echo  "Working!";
print_r ($_FILES);
print_r ($_POST);
?>

非常感谢您的帮助或意见！我是使用这些语言编程的新手，因此感谢所有反馈。

编辑 29/4-15： - 现在发布完整的代码。在我删除的页面上有另外两个表单和更多代码以检查是否存在任何冲突，但这是我现在正在使用的代码。仍然重定向而不是向 Ajax 提供“returndata”，而且我也没有运气删除表单“action=”部分（似乎没有发布或重定向）。再次，我非常感谢你们为帮助我所付出的时间和精力。我对 JS 和 Ajax 的经验很少，但我正在订购一本书以了解更多信息，再次感谢！

【问题讨论】：

这段代码中没有执行重定向的内容。
您的表单有一个“uploadavatar.php”的action，它将尝试重定向到该页面。只需删除该操作。
您不必这样做@xathien，因为 OP 在 AJAX 代码中使用了 preventDefault()。
一旦他遵循 Twisty 的回答，这将起作用。 :)
实际上，删除“uploadavatar.php”的action 根本没有任何动作。这是否意味着我的 JS 代码没有正确执行？再次，非常感谢您的意见。我已经更新了代码，希望它现在更有意义。

标签： php ajax forms post file-upload

【解决方案1】：

欢迎来到 SO。你调用了错误的事件（e），而不是（事件）：

$('form#avatarForm').submit( function( e ) {
  e.preventDefault();

这会阻止页面被提交，然后使用$.ajax()。

编辑：

https://jsfiddle.net/Twisty/0feqyqmw/

总体上做了一些更改，但这应该可以工作：

$(function () {
    $("#avatarBtn").click(function () {
        $("#avatarInput").click();
    });

    $("input[name='avatarInput']").on("change", function(){
        $('form#avatarForm').submit();
    });

    $('form#avatarForm').submit(function (e) {
        e.preventDefault();

        var formData = new FormData($(this)[0]);

        $.ajax({
            url: 'uploadavatar.php',
            type: 'POST',
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success: function (returndata) {
                alert(returndata);
            }
        });
        return false;
    });
});

为了便于使用，我将您所有的脚本都移到了 JQuery 中。我还在您的 HTML 中添加了一些包装：

<section>
     <h1>Edit your profile: UserName</h1>

    <article>
        <div style="height:0px;overflow:hidden">
            <form action="uploadavatar.php" method="POST" enctype="multipart/form-data" name="avatarForm" id="avatarForm">
                <input type="file" id="avatarInput" name="avatarInput" />
            </form>
        </div>
        <p> <span class='label_viewprofile'>Avatar (65x65):</span>

            <label id="avatarBtn">
                <img src="avatar/avatar.jpg" class="avatar-box" />
            </label>
        </p>
        <hr class="editprofile-line">
    </article>
</section>

【讨论】：

好眼光，Twisty！我错过了。我将代码更新为 event.preventDefault，但它仍然会重定向。
你更新了哪个？ $('form#avatarForm').submit( function( e ) { 到 event 或 event.preventDefault(); 到 e?
抱歉这里不够清楚。我将它们都命名为事件。像这样; $( 'form#avatarForm' ).submit( function( event ) {event.preventDefault();
试试：$("#avatarForm").on("submit", function( event ) {
如果仍然有问题，请添加console.log()。某处的 JS 中有些地方不对劲……检查你的控制台。发布所有代码。如果preventDefault() 未触发，则表明代码问题阻止您尝试执行的函数运行。