AJAX jquery移动php表单提交没有更新没有刷新

时间:2014-08-04 19:32:40

标签: javascript php jquery mysql ajax

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

基本上发生的事情是用户在表单中键入两个数据 - 名称和团队。他还从相机的库中选择了一张照片。然后javascript函数submitForm()从表单中读取数据并将其提交给upload2.phpfunction 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; } 存储文本字段和mySQL数据库中照片的链接。它还可以保存照片上传。

所有这一切都正常。什么不是提交后,字段返回到以前的值(提交前)。这使用户感到困惑,因为看起来他的更改没有通过。

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

这是javascript:

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"];
}               
}
}

这是php:

<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>

这是html表单:

{{1}}


   

1 个答案:

答案 0 :(得分:0)

这些评论中的格式肯定不足!!所以我希望能够找到其中一个“答案”部分......

简短回答:我使用的是JSON。

例如,也许你的PHP返回JSON(json_encode()),其中数组的键与HTML的id匹配。然后使用jQuery的JSON'解析器'(http://api.jquery.com/jquery.parsejson/)来获取JS对象。循环遍历此对象并将'value'放入表单中的每个元素(由id标识)。

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

类似的东西:

  

PHP:
  $ json_array = array('fullname'=&gt; $ fullname,'pairingID'=&gt; $ pairingID);
  echo jsone_encode($ json_array);

然后在你的JS中:

  

var items = $ .parseJSON(data);
  //错误检查这里的东西
  $( “#全名”)VAL(items.fullname);
  //不记得目前如何在JS中按值选择项目,但是这里使用items.pairingID作为'select'的'value'。