求大侠们解释下这个问题为什么？

我的这个问题基本内容是：首先我从后台获取数据填充到一个<div>中,然后我点击按钮改变div中的内容，类似分页那样的效果。可是，当我点击按钮后，经调试发现：点击按钮后，先执行那个按钮对应的函数，然后居然接着执行获取后台数据然后填充到<div>中的效果。这个结果类似于刷新页面了，这个是为什么呢？求帮助，谢谢。

这个是asp内的代码：
HTML code

        <div id="main">
        <table class="result_table" id="table_top">
                            <tr class="result_table_top">
                                 <td class="result_table_top_td1">
                              <input name="result_check_all" type="checkbox" id="result_all_bt" onclick="unSelect_selectAll()"/>
                              <label onclick="selectAll()">全选</label></td>
                                <td class="result_table_top_td2">序号</td>
                                <td class="result_table_top_td3">名称<button class="result_table_top_name_bt1"></button></td>
                              <td class="result_table_top_td4">测绘成果资源类型</td>
                                <td class="result_table_top_td5">比例尺分母/分辨率(m)</td>
                                <td class="result_table_top_td6">分发单位</td>
                                <td class="result_table_top_td7">元数据</td>                               
                            </tr>                                                                  
                        </table>
        <div id="content"></div>
        <button id="change" onclick="changeTxt()">Click to change</button>

这个是做的起始的代码，用于填充table.
JScript code

   var reee;
$('#table_top').ready(function() {
    $.ajax({
        type: "POST",
        url: "dataconn.asmx/start",
        data: "{}",
        dataType: 'xml', //返回的类型为XML ，和前面的Json，不一样了
        success: function(result) {
            //演示一下捕获
            try {
                var txt;
                var count;
                count = 1;
                reee = result;
                txt = "<table>";
                $(result).find("Rs_table").each(function() {
                    if(count<13)
                        txt = txt + "<tr><td class=\"result_table_top_td1\"><input name='result_all' type='checkbox' id='result_all'/></td><td class='result_table_top_td2'>" + count + "</td><td class='result_table_top_td3'>" + $(this).find("Rs_name").text() +"</td></tr>";
                        count++;
                });
                txt = txt;
                $('#content').append(txt + "</table>");
            }
            catch (e) {
                alert(e);
                return;
            }
        },
        error: function(result, status) { //如果没有上面的捕获出错会执行这里的回调函数
            if (status == 'error') {
                alert(status);
            }
        }

    });
});

这个是点击按钮改变内容的代码。
JScript code

function changeTxt() 
{
                var txt;
                var count;
                count = 1;
                txt = "<table>";
                $(reee).find("Rs_table").each(function() {
                    if (count>=13)
                        txt = txt + "<tr><td class=\"result_table_top_td1\"><input name='result_all' type='checkbox' id='result_all'/></td><td class='result_table_top_td2'>" + count + "</td><td class='result_table_top_td3'>" + $(this).find("Rs_name").text() + "</td></tr>";
                    count++;
                });
                txt = txt;
                $('#content').append(txt + "</table>");
  }

我想问问，为什么会在点击按钮后会再次执行，开始的那个代码，就是$('#table_top').ready(function() {
填充的那段起始代码。

<button id="change" onclick="changeTxt()">Click to change</button>

//你这个是按钮，默认是拥有提交功能的

尝试1：换成这种标签<input id="Button1" type="button" value="button" />

尝试2：

<button id="change" onclick="return changeTxt();">Click to change</button>


//记得在你的这个JS函数changeTxt()的最后一行代码处加上：
return false;
//这样它就不会提交了，如果返回true，则提交