AJAX jquery移动php表单提交不更新而不刷新


AJAX jquery mobile php form submission not updating without refresh

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

基本上,发生的情况是用户在表单中键入两条数据 - 名称和团队。他还从相机的库中选择了一张照片。然后一个javascript函数submitForm()从表单中读取数据并将其提交给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(json_encode(((,其中数组的键与HTML的ID匹配。 然后使用jQuery的JSON"解析器"(http://api.jquery.com/jquery.parsejson/(来获取JS对象。 遍历此对象并将"值"放入表单中的每个元素中(由 id 标识(。

您甚至可以在JSON中加入一个"额外"元素,其中包括"其他内容"来告诉用户。

像这样:

.PHP:
$json_array = array('fullname'=>$fullname, 'pairingID'=>$pairingID(;
echo jsone_encode($json_array(;

然后在您的 JS 中类似于:

var items = $.parseJSON(data(;
错误检查的东西在这里
$("#fullname"(.val(items.fullname(;
目前不记得如何在JS中按值选择项目,但在这里使用items.pairingID作为"选择"的"值"。