如何更新我的dynamic网页内容,而无需重新加载整个页面使用Ajax,jQuery的,JavaScript的

我有一个dynamic表 ,其中包含一些userInfo使用get method ("/api/dashboard/v1") 。我有一个模式,onSubmit,它using post method ("/api/adduserInfo/v1").将userInfo添加到表using post method ("/api/adduserInfo/v1").

我用window.location.replace("http://localhost:3000/")重新加载页面,但希望“更新表格内容,而不重新加载页面”

我没有得到任何妥善的解决scheme来解决这些问题。请帮助我解决这些问题的人。我的代码是在下面:

/index.html

 <table class="table-bordered mytable"> <thead class="table-head"> <tr> <th>Name</th> <th>Email</th> <th>Status</th> <th>Address</th> <th>Action</th> </tr> </thead> <tbody class="table-body mytabBody"> </tbody> </table> <div class="col-md-12 text-right"> <button type="button" data-toggle="modal" data-target="#myModal">Update User Information</button> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Enter User Information</h4> </div> <div class="modal-body"> <div class="form-group"> <input type="text" class="form-control" id="user_name" placeholder="User name"> </div> <div class="form-group"> <input type="email" class="form-control" id="email_id" placeholder="Enter email"> </div> <div class="form-group"> <input type="text" class="form-control" id="address" placeholder="Enter Address"> </div> </div> <div class="modal-footer"> <button type="submit" class="btn btn-default" id="myFormSubmit">Submit</button> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> 

/modal.js

/ *这些函数用于将新的userInfo保存到表中* /

 $(function() { $('#myFormSubmit').click(function (e) { e.preventDefault(); var username = $("#user_name").val(); var email = $("#email_id").val(); var address = $("#address").val() $.ajax({ url: "/api/adduserInfo/v1", data: { user_name: username, email: email, address: address }, type: 'post', dataType: 'html', success: function(data) { }, error: function(xhr, status) { alert("Sorry, there was a problem!"); }, }); window.location.replace("http://localhost:3000/"); //not update only the table content without reloading the page. I want only update the table content not reload the page. }) }); 

/table.js

/ *从DB获取表内容* /

 $(function(){ $.get("/api/menu/v1", function(response) { //console.log(response); var html = ""; for(var i = 0; i< response.length ; i++){ html += "<li><a href =''>"+response[i].name+"</a></li>" } $('.sidebar-nav').html(html); }); $.get("/api/dashboard/v1", function (response) { //console.log(response); var myhtmlsec= ""; for(var i=0; i<response.data.length; i++) { myhtmlsec += "<tr class='myTable'>"; myhtmlsec +="<td id='tabUser'>"+response.data[i].user_name+"</td>"; myhtmlsec +="<td id='tabEmail'>"+response.data[i].email+"</td>"; myhtmlsec +="<td id='tabStatus'> </td>"; myhtmlsec +="<td id='tabAddress'>"+response.data[i].address+"</td>"; myhtmlsec +="<td>\ <a href='#' onclick='myEdit(this);return false;' class='table-edit img-size'>\ <img src='image/Edit.png'>\ </img>\ </a>\ <a href='#' onclick='myDelete(this);return false;' class='table-delete img-size'>\ <img src='image/Delete.png'>\ </img>\ </a>\ </td>"; myhtmlsec +="<td class='hide' id='tabId'>"+response.data[i]._id+"</td>"; myhtmlsec +="</tr>" } $('.table-body').append(myhtmlsec); }); }); 

我尝试了大多数所有的ajax,jquery,javascript方法,但仍然没有更新表没有重新加载整个页面,对提交模态也没有closures

你可以像这样在你的表中附加你的ajax的结果

 $(function() { $('#myFormSubmit').click(function (e) { e.preventDefault(); var username = $("#user_name").val(); var email = $("#email_id").val(); var address = $("#address").val() $.ajax({ url: "/api/adduserInfo/v1", data: { user_name: username, email: email, address: address }, type: 'post', dataType: 'json', success: function(data) { //append the data here just like you do in your other ajax request var myhtmlsec= ""; for(var i=0; i<data.length; i++) { myhtmlsec += "<tr class='myTable'>"; myhtmlsec +="<td id='tabUser'>"+data[i].user_name+"</td>"; myhtmlsec +="<td id='tabEmail'>"+data[i].email+"</td>"; myhtmlsec +="<td id='tabStatus'> </td>"; myhtmlsec +="<td id='tabAddress'>"+data[i].address+"</td>"; myhtmlsec +="</tr>"; //and so on... } $('.table-body').append(myhtmlsec); alert("User Information Added Successfully"); }, error: function(xhr, status) { alert("Sorry, there was a problem!"); }, }); //window.location.replace("http://localhost:3000/"); remove this }) });