gpt4 book ai didi

javascript - 正确缩放 html 并使用 javascript/jquery 附加新信息

转载 作者:太空宇宙 更新时间:2023-11-04 12:57:37 25 4
gpt4 key购买 nike

我对 javascript/jquery 真的很粗鲁,并且在考虑这段代码时遇到了麻烦。我使用 PHP 做了我想做的,但是当添加一定数量的新条目时它会导致 html 困惑。

我在 PHP 中的代码:

 for($i = 0; $i < sizeof($educationArray[0]); $i++)
{
echo "<div style=\"float:left; margin-right:50px; margin-bottom:30px; \">";
echo "<label>Institution Name</label>";
echo "<span>".$newarray[$i]['Institution']."</span>";
echo "<label>Location</label>";
echo "<span>".$newarray[$i]['Location']."</span>";
echo "<label>Start Date</label>";
echo "<span>".$newarray[$i]['StartDate']."</span>";
echo "<label>End Date</label>";
echo "<span>".$newarray[$i]['EndDate']."</span>";
echo "<label>Degree</label>";
echo "<span>".$newarray[$i]['Degree']."</span>";
echo "<label>Date Received Degree</label>";
echo "<span>".$newarray[$i]['DegreeDate']."</span>";
echo "<label>GPA</label>";
echo "<span>".$newarray[$i]['GPA']."</span>";

echo "</div>";

}

?>

我希望能够在 javascript 中自动完成此操作。我必须向数据库添加新信息的代码是:

    <h3 style="float:left;">Add Education</h3>
<button style="float:left;" class="editInfoButtons" id="AddEducationButton"></button>
<div style="float:left;" id="EducationInfo" class="modal-basicInfo">
<div style="height:600px;width:260px;">
<a title="Close" class="close">x</a>

<form method="post" action="<?php echo $_SERVER['PHP_SELF'] . "?user=" . $userInfo['Id']; ?>" >


<label for="InstitutionName">Institution Name: </label>
<input type="text" name="schoolName" id="InstitutionName" />



<label for="InstitutionLocation">Location: </label>
<input type="text" name="schoolLocation" id="InstitutionLocation" />

<br /><br />

<label for="DatesAttended">Dates of Attendance</label>
<input type="date" id="DateBegin" name="dateBegin" />-<input type="date" name="dateEnd" id="DateEnd" />

<br /><br />

<label for="DegreeEarned">Degree Earned</label>
<input id="DegreeEarned" name="DegreeEarned" type="text" />

<label for="DateEarned">Date Earned: </label>
<input style="float:left;" name="DateEarned" id="DateEarned" type="date" />

<br />
<br />

<label for="GPA">GPA: </label>
<input id="GPA" name="GPA" type="text" />



<input type="submit" id="AddSchools" name="AddSchools" class="button" value="Add Institute" />
</form>
</div>

快速描述正在发生的事情:当他们点击按钮时,会出现一个 div,他们可以在其中添加信息。一旦他们输入信息并点击提交,它就会被保存到数据库中,div 消失,页面重新加载以显示添加的新信息,将旧信息向下推。

关于使用 Javascript/Jquery 执行此操作的任何指导?

最佳答案

在 jQuery 中,您可以使用 ajax 请求,然后进行成功回调函数并在您的 div 中预先添加(将新插入的信息放在顶部,将旧信息向下推)。

让我给你一个 ajax 的开端......

$("#AddSchools").click(function(){
$.ajax({
type: "POST",
url: "insert-to-db.php",
data: { schoolName:$("#InstitutionName").val(),
schoolLocation:$("#InstitutionLocation").val(),
DateBegin:$("#DateBegin").val(),
DegreeEarned:$("#DegreeEarned").val(),
DateEarned:$("#DateEarned").val(),
GPA:$("#GPA").val()
} ,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(result){
$("div").prepend("<label>Institution Name</label><br>"+$("#InstitutionName").val()+"(and so on...)");
}
});

});

关于javascript - 正确缩放 html 并使用 javascript/jquery 附加新信息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25689628/

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