Javascript AJAX jquery移动php表单提交未经刷新即不更新

我觉得我正在尝试使用AJAX向php/mySQL提交最基本的后台表单，但却无法让它正常工作。我可能花了15个小时搜索和尝试不同的组合，但无法让我的网站正常工作

基本上，用户在表单中键入两条数据——一个名称和一个团队。他还从相机库中选择了一张照片。然后，javascript函数submitForm从表单读取数据并将其提交到upload2.php，upload2.php将文本字段和照片链接存储在mySQL数据库中。它还保存了照片上传

所有这些都正常工作。但是，在提交之后，字段会返回到提交之前的值。这让用户感到困惑，因为看起来他的更改没有通过

然而，它们确实会通过-他只需手动点击刷新即可在页面上查看它们。这似乎是最简单的问题，但我一直无法解决它

下面是javascript：

function submitForm() {
        console.log("submit event");
        var fd = new FormData(document.getElementById("fileinfo"));
        fd.append("label", "WEBUPLOAD");
        $.ajax({
          url: "upload2.php",
          type: "POST",
          data: fd,
          cache: false,
          enctype: 'multipart/form-data',
          processData: false,  // tell jQuery not to process the data
          contentType: false   // tell jQuery not to set contentType
        }).done(function( data ) {
            console.log("PHP Output:");
            console.log( data );
        });
        return false;
    }

下面是php：

if ($_POST["label"]) {
include 'config.php';
$label = $_POST["label"];
$uid = $_POST["uid"];
echo "uid=" . $uid;
$fullname = addslashes($_POST["fullname"]);
$pairingID = $_POST["pairingID"];
$query = "update usertable set fullname ='$fullname', pairingID = $pairingID where id = $uid";
echo $query;
//run update query
mysql_query($query,$dbconnection) or print "DB ERROR: ".mysql_error($dbconnection);     

if ($_FILES["file"]) {
$allowedExts = array("gif", "jpeg", "jpg", "png");
$temp = explode(".", $_FILES["file"]["name"]);
$extension = end($temp);
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/x-png")
|| ($_FILES["file"]["type"] == "image/png"))
&& ($_FILES["file"]["size"] < 2000000)
&& in_array($extension, $allowedExts)) {
    if ($_FILES["file"]["error"] > 0) {
        echo "Return Code: " . $_FILES["file"]["error"] . "<br>";
    } else {
        $filename = time(). $label.$_FILES["file"]["name"];
        echo "Upload: " . $_FILES["file"]["name"] . "<br>";
        echo "Type: " . $_FILES["file"]["type"] . "<br>";
        echo "Size: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
        echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br>";

        if (file_exists("upload/" . $filename)) {
            echo $filename . " already exists. ";
        } else {
            move_uploaded_file($_FILES["file"]["tmp_name"],
            "upload/" . $filename);
            echo "Stored in: " . "upload/" . $filename;
            echo "fullname=" . $fullname;
            $imgurl = "upload/" . $filename;
            include 'config.php';
            $time_stamp = date('Y-m-d H:i:s');
            //$uname = trim($_POST["uname"]);
            //update tblFeed

            $query = "update usertable set selfie = '$imgurl' where id = $uid";
            echo $query;
            //run update query
            mysql_query($query,$dbconnection) or print "DB ERROR: ".mysql_error($dbconnection);     


        }
    }
} else {
    echo "Invalid file";
    echo "filetype:" . $_FILES["file"]["type"];
    echo "filesize:" . $_FILES["file"]["size"];
}               
}
}

这是html表单：

<form method="post" id="fileinfo" name="fileinfo">
    <label>Name:</label>
    <input type="text" style="max-width: 80%" name="fullname" value="temp" id="fullname" />
    <input type="hidden" name="uid" value="44" id="uid" />
    <label>Selfie:</label><br>
    <img style="width:50px;" src="" />
    <input type="file" name="file" style="max-width:80%;"/><br/>Today's pairing:</br>

<select name="pairingID" id="pairingID">Day 1<ul data-role="listview" data-inset="true"><option selected value="1">Andy/Mark (Day 1)</option><option value="2">Cory/Adam (Day 1)</option><option value="3">Morgan/Brandon (Day 1)</option><option value="4">John/Phil (Day 1)</option><option value="5">Casey/Kyle (Day 1)</option><option value="6">Foskey/Taylor (Day 1)</option><option value="7">Clint/James (Day 1)</option><option value="8">Matt/Desha (Day 1)</option><option value="9">Ross/Ryan H (Day 1)</option><option value="10">Ryan V/Dan (Day 1)</option><option value="11">Rene/JZ (Day 1)</option><option value="12">AD/Jake (Day 1)</option></ul>Day 2<ul data-role="listview" data-inset="true"><option value="13">Andy/Mark (Day 2)</option><option value="14">Cory/Adam (Day 2)</option><option value="15">Morgan/Phil (Day 2)</option><option value="16">John/Brandon (Day 2)</option><option value="17">Foskey/Kyle (Day 2)</option><option value="18">Casey/Taylor (Day 2)</option><option value="19">Matt/James (Day 2)</option><option value="20">Clint/Desha (Day 2)</option><option value="21">Dan/Ryan H (Day 2)</option><option value="22">Ross/Ryan V (Day 2)</option><option value="23">AD/Rene (Day 2)</option><option value="24">JZ/Jake (Day 2)</option></select>

---

这些评论中肯定缺少格式！！所以我希望能转到其中一个“答案”部分

简短回答：我会使用JSON

例如，可以让PHP返回JSON编码，其中数组的键与HTML的id匹配。然后使用jQuery的JSON“解析器”获取JS对象。循环此对象，并将“值”放入由id标识的表单中的每个元素中

您甚至可以在JSON中加入一个“额外”元素，其中包含告诉用户的“其他内容”

比如：

PHP: $json_array=array'fullname'=>$fullname，'pairingID'=>$pairingID； echo jsone_encode$json_数组

然后在JS中，类似于：

var items=$.parseJSONdata； //在这里检查内容时出错 $fullname.valitems.fullname； //现在不记得如何在JS中按值选择项，但在这里使用items.pairingID作为“选择”的“值”来执行此操作

---

“上传”完成后，您在浏览器控制台中看到了什么。您从JavaScript中的以下两行代码中得到了什么？>console.logPHP输出：；>console.log数据；因为我的第一个想法是不使用AJAX调用的结果-您的.done函数不显示PHP的“echo”语句。。。不确定数据id应该如何进入表单。好问题。第一行是：submiteventindex:58，我想这之后通常会延迟很长时间才能上传，然后是：PHP输出：index:69 uid=44 updateusertable set fullname='MoB'，pairingID=7，其中id=44上传：image.png类型：image/pngSize:345.4267578125 kBTemp文件：/tmp/php6t调整为：Upload/image.png全名=MoB update usertable set selfie='Upload/1407181633WEBUPLOAD2014-07-29-这可能是大城市骑行的终极自行车u Design uuuwired.png'其中id=44抱歉格式设置不当。我怀疑你可能是对的——我不确定done函数是否正在将数据拉入表单。正确的方法是什么？JSON？XMLHttpRequest？就是这样-谢谢@david-m。仅供参考-您可以使用相同的方式从中选择项目。