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

Question

我真的很难用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自动完成。 代码中，我有新的信息添加到数据库是：当他们点击一个div出现在那里他们可以添加信息的按钮：

<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将消失，并且页面将被重新加载，以显示添加的新信息，并将旧信息向下推送。

任何有关使用Javascript/JQuery做这个的指导？

Answer 1

在jQuery中，您可以使用ajax请求，然后在您的div中创建一个成功的回调函数并预先（将新插入的信息放在顶部，将旧信息压低）。

让我给你一个良好的开端在阿贾克斯...

$("#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...)"); 
     } 
    }); 

});