如何更新我的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">×</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 }) });