gpt4 book ai didi

javascript - AJAX jquery mobile php表单提交在没有刷新的情况下不会更新

转载 作者:行者123 更新时间:2023-11-29 23:59:40 26 4
gpt4 key购买 nike

我觉得我正在尝试使用 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);
// error checking stuff here
$("#fullname").val(items.fullname);
// can't remember how to select an item by value in JS at the moment, but do that here with items.pairingID being the 'value' to 'select'.

关于javascript - AJAX jquery mobile php表单提交在没有刷新的情况下不会更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25126179/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com