如何在不重新加载整个页面的情况下使用ajax，jquery，javascript更新动态网页内容

Question

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

我使用window.location.replace("http://localhost:3000/")重新加载页面，但希望“在不重新加载页面的情况下更新表内容” 。

我没有任何适当的解决方案来解决这些问题。请帮助我解决这些问题。我的代码在下面：

/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

/ *从数据库中获取表内容* /

$(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方法，但仍然无法更新表而无需重新加载整个页面，在提交模式时也不会关闭

Answer 1

您可以像这样将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
    })
});