如何在不刷新整页的情况下仅刷新页面中的div？ [英] How To refresh only div in page without refreshing whole page ?

问题描述

我想在没有刷新页面的情况下插入到数据库中并且它已经正确完成但是我的问题是刷新表格，插入后显示数据而不刷新整个页面

我在后面的代码中执行html表并将其绑定到这样的aspx页面

 <％ = html％> 

html是字符串Bulider，我在其上绘制HTML表并按数据库数据填充

ok，插入后ajax这里

 $（[id * = btnSave]）。bind（click，function（）{
 var user = {}; 
 user.Username = $（[id * = txtUsername]）。val（）; 
 user.Password = $（[id * = txtPassword]）。val（）; 
 $ .ajax（{
类型：POST，
 url：CS.aspx / SaveUser，
数据：'{user：'+ JSON.stringify（user）+ '}'，
 contentType：application / json; charset = utf-8，
 dataType：json，
 success：function（response）{
 //window.location.reload（）; 
} 
}）; 
返回false; 
}）; 

在saveUser函数中我调用那个在html字符串生成器中重建HTML表的函数

但最后一行我添加后不会出现在表格中，直到我手动刷新页面或删除此行中的评论

 window.location.reload（）; 

这是我的HTML表格

 html.Append（ < table border ='1'id ='myTable'class ='tablesorter'>）; 
 
  //  构建标题行。 
 html.Append （ < thead>）; 
 html.Append（ < tr>）; 
 
  string  name =   ; 
  foreach （DataColumn column  in  dt.Columns）
 {
 html.Append（ < th>）; 
 html.Append（column.ColumnName）; 
 html.Append（ < / th>）; 
 
} 
 html.Append（ < th>）; 
 
 html.Append（ 删除）; 
 html.Append（ < / th>）; 
 
 html.Append（ < th>）; 
 html.Append（  Update）; 
 html.Append（ < / th>）; 
 
 html.Append（ < / tr>）; 
 html.Append（ < / thead>）; 
 html.Append（ < tbody>）; 
  //  构建数据行。 
  foreach （DataRow行 in  dt.Rows）
 {
  int  i =  0 ; 
 html.Append（ < tr>）; 
  foreach （DataColumn column  in  dt.Columns）
 {
 html.Append（ < td>）; 
 html.Append（row [column.ColumnName]）; 
 html.Append（ < / td>）; 
  if （i ==  0 ）{
 name = row [column。的ColumnName]的ToString（）; 
} 
 i ++; 
} 
 
 html.Append（ < td>）; 
 html.Append（ < input type ='submit'value ='Delete'class ='btnDelete 'id =' + name +  '>）; 
 html.Append（ < / td>）; 
 
 html.Append（ < td>）; 
 html.Append（ < input type ='submit'value ='Update'class ='btnPrepareToUpdate 'id ='update + name +  '>）; 
 html.Append（ < / td>）; 
 
 html.Append（ < / tr>）; 
} 
 html.Append（ < / tbody>）; 
  //  表格结束。 
 html.Append（ < / table>）; 

任何帮助只刷新HTML表？

解决方案

（[id * = btnSave]）。bind（click，function（）{
var user = {};
user.Username =

（[id * = txtUsername]）。val（）;
user.Password =

（ [ID * = txtPassword]）VAL（）;

Hi,
I want to insert into database without refreshing page and it's done correctly but my problem is refreshing table that show the data after insertion without refreshing the whole page
I did html table in code behind and bind it to aspx page like this

<%= html  %>

html is string Bulider that I draw my HTML table on it and fill it by database data
ok, after insertion by ajax here

$("[id*=btnSave]").bind("click", function () {
            var user = {};
            user.Username = $("[id*=txtUsername]").val();
            user.Password = $("[id*=txtPassword]").val();
            $.ajax({
                type: "POST",
                url: "CS.aspx/SaveUser",
                data: '{user: ' + JSON.stringify(user) + '}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    //window.location.reload();
                }
            });
            return false;
        });

in saveUser function I call that function that rebuild HTML table in html string builder
but the last row I added doesn't appear in table until I refresh the page manually or I remove comment in this line

window.location.reload();

and this is my HTML table

html.Append("<table border = '1' id='myTable' class='tablesorter'>");

                        //Building the Header row.
                        html.Append("<thead>");
                        html.Append("<tr>");
                        
                        string name = "";
                        foreach (DataColumn column in dt.Columns)
                        {
                            html.Append("<th>");
                            html.Append(column.ColumnName);
                            html.Append("</th>");
                            
                        }
                        html.Append("<th>");
                        
                        html.Append("Delete");
                        html.Append("</th>");

                        html.Append("<th>");
                        html.Append("Update");
                        html.Append("</th>");

                        html.Append("</tr>");
                        html.Append("</thead>");
                        html.Append("<tbody>");
                        //Building the Data rows.
                        foreach (DataRow row in dt.Rows)
                        {
                            int i = 0;
                            html.Append("<tr>");
                            foreach (DataColumn column in dt.Columns)
                            {
                                html.Append("<td>");
                                html.Append(row[column.ColumnName]);
                                html.Append("</td>");
                                if(i == 0){
                                    name = row[column.ColumnName].ToString();
                                }
                                i++;
                            }

                            html.Append("<td>");
                            html.Append("<input type='submit' value='Delete' class='btnDelete' id='" + name + "' >");
                            html.Append("</td>");

                            html.Append("<td>");
                            html.Append("<input type='submit' value='Update' class='btnPrepareToUpdate' id='update" + name + "'>");
                            html.Append("</td>");

                            html.Append("</tr>");
                        }
                        html.Append("</tbody>");
                        //Table end.
                        html.Append("</table>");

any help to refresh only HTML table ?

解决方案

("[id*=btnSave]").bind("click", function () { var user = {}; user.Username =

("[id*=txtUsername]").val(); user.Password =

("[id*=txtPassword]").val();

这篇关于如何在不刷新整页的情况下仅刷新页面中的div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！