jQuery自动加载更多程序

SELECT ID, Name, Message, ROW_NUMBER() OVER (ORDER BY ID) AS RowNum

FROM T_Paginate WITH(NOLOCK))

SELECT * FROM Results_CTE WHERE RowNum BETWEEN @Start AND @Offset

上面我们定义了公用表表达式Results_CTE，它获取T_Paginate表中的数据并且根据ID值由小到大排序，然后根据该顺序分配ROW_NUMBER值，其中@Start和@Offset是要查询的数据范围。

接下来，让我们实现方法GetListMessages()，具体实现如下：

///

/// Get the user message.

///

/// the pagination number

/// the pagination data

[WebMethod]

[ScriptMethod(ResponseFormat = ResponseFormat.Json)]

public string GetListMessages(int groupNumber)

{

string query = string.Format("WITH Results_CTE AS (SELECT ID, Name, Message, ROW_NUMBER() OVER (ORDER BY ID) AS RowNum " +

"FROM T_Paginate WITH(NOLOCK)) " +

“SELECT * FROM Results_CTE WHERE RowNum BETWEEN ‘{0}’ AND ‘{1}’;”,

(groupNumber - 1) * Offset + 1, Offset * groupNumber);

var messages = new List();

using (var con = new SqlConnection(ConfigurationManager.ConnectionStrings[“RadditConn”].ToString()))

using (var com = new SqlCommand(query, con))

{

con.Open();

using (var reader = com.ExecuteReader(CommandBehavior.CloseConnection))

{

while (reader.Read())

{

var message = new Message

{

Id = (int)reader[“ID”],

Name = (string)reader[“Name”],

Comment = (string)reader[“Message”]

};

messages.Add(message);

}

}

// Returns json data.

return new JavaScriptSerializer().Serialize(messages);

}

}

上面，我们定义了GetListMessages()方法，为了简单起见，我们把数据库的操作直接写在Web Service上了请大家见谅，它通过调用公用表表达式Results_CTE来获取分页数据，最后，我们创建一个JavaScriptSerializer对象序列化数据成JSON格式返回给客户端。

Javascript

---

由于，我们调用的是本地Web Service API，所以，我们发送同源请求调用API接口（跨源请求例子），具体实现如下：

/**

* Sends same origin request with ajax and json.

* @param options

* The options need to send to server.

* For instance: url and groupNumber.

*/

$.getData = function(options) {

var opts = $.extend(true, {}, $.fn.loadMore.defaults, options);

$.ajax({

url: opts.url,

type: “POST”,

contentType: “application/json; charset=utf-8”,

dataType: “json”,

data: “{groupNumber:” + opts.groupNumber + “}”,

success: function(data, textStatus, xhr) {

if (data.d) {

// We need to convert JSON string to object, then

// iterate thru the JSON object array.

$.each($.parseJSON(data.d), function() {

$(“#result”).append(‘

• ’ +

• this.Id + ’ - ’ + ‘’ +

  this.Name + ‘’ + ’ —?’ + ‘’ +

  this.Comment + ‘’);

  });

  $(‘.animation_image’).hide();

  options.groupNumber++;

  options.loading = false;

  }

  },

  error: function(xmlHttpRequest, textStatus, errorThrown) {

  options.loading = true;

  console.log(errorThrown.toString());

  }

  });

  };

  上面，我们定义了getData()方法，它通过使用jQuery.ajax()方法，发送同源请求调用GetListMessages接口，当数据获取成功加载到result div中显示并且分页数量（groupNumber）加一。

  现在，我们已经实现了getData()方法，每当用户把滚动条拖到最底端时，就调用getData()方法获取数据，那么，我们需要把getData()方法和滚动条事件进行绑定，具体实现如下：

  // The scroll event.

  $(window).scroll(function() {

  // When scroll at bottom, invoked getData() function.

  if ($(window).scrollTop() + $(window).height() == $(document).height()) {

  if (trackLoad.groupNumber <= totalGroups && !trackLoad.loading) {

  trackLoad.loading = true; // Blocks other loading data again.

  $(‘.animation_image’).show();

  $.getData(trackLoad);

  }

  }

  });

  上面，我们实现了jQuery的scroll事件，当滚动条滚动到最底部时，调用getData()方法获取服务器中的数据。

  CSS样式

  ---

  接下来，我们给程序添加CSS样式，具体定义如下：

  @import url(“reset.css”);

  body,td,th {font-family: ‘Microsoft Yahei’, Georgia, Times New Roman, Times, serif;font-size: 15px;}

  .animation_image {background: #F9FFFF;border: 1px solid #E1FFFF;padding: 10px;width: 500px;margin-right: auto;margin-left: auto;}

  #result{width: 500px;margin-right: auto;margin-left: auto;}

  #result ol{margin: 0px;padding: 0px;}

  #result li{margin-top: 20px;border-top: 1px dotted #E1FFFF;padding-top: 20px;}

  

  图3 加载更多程序

  上面，我们实现了jQuery自动加载更多程序，每当滚动条到底部时，发送异步请求获取服务器中的数据。

  1.1.3 总结

  ========

  紧跟潮流

  大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。

  这边整理了一个对标“阿里 50W”年薪企业高级前端工程师成长路线，由于图片太大仅展示一小部分

  201310/30211827-2cd65143726f4853ac51b08c6f3fde1c.png)

  图3 加载更多程序

  上面，我们实现了jQuery自动加载更多程序，每当滚动条到底部时，发送异步请求获取服务器中的数据。

  1.1.3 总结

  ========

  紧跟潮流

  大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。

  这边整理了一个对标“阿里 50W”年薪企业高级前端工程师成长路线，由于图片太大仅展示一小部分