JSon 기반 Ajax 페이지 새로 고침 효과 없 음 (2)
5343 단어 Ajax
이전 페이지 에 쓴 js 에 BindCommentList (1) 가 있 습 니 다. / /페이지 로 딩 기본 바 인 딩 첫 페이지 데이터 방법.매개 변 수 는 현재 페이지 입 니 다.페이지 에서 처음으로 기본 값 1 을 불 러 옵 니 다. 즉, 첫 페이지 의 데 이 터 를 불 러 옵 니 다.
그리고 페이지 분할 기 에서 a 탭 을 클릭 할 때 BindCommentList js 이벤트 가 발생 합 니 다.매개 변 수 는 클릭 한 a 탭 의 속성 title 에서 값 을 추출 하여 페이지 번 호 를 표시 합 니 다. BindCommentList 이벤트 코드 는 다음 과 같 습 니 다.
//
function BindCommentList(page) {
$.post("/Ajax/Elec_Comment/GetData.aspx", { pid: '<%=DotNet.Framework.Common.QueryString.QId("id") %>', page: page },
function(data) {
var Comments = $.parseJSON(data);
$("#divCommentList").empty();
for (var i = 0; i < Comments.length; i++) {
var comment = Comments[i];
var span = "<span class=\"hsk\"><span>" + comment.id + comment.NickName + "</span><span> " + comment.CommentIP + "</span> <span>" + comment.CommentDate + "</span></span><span class=\"pl_text\">" + comment.CommentBody + "</span>"
$("#divCommentList").append(span);
}
}
);
}
ajax 요청 페이지 가 / Ajax / Elec 인 것 을 볼 수 있 습 니 다.Comment / GetData. aspx, 2 개의 인 자 를 전 달 했 습 니 다. pid 는 해당 하 는 제품 ID 입 니 다.첫 페이지 에 page = 1 을 불 러 옵 니 다. 페이지 번 호 를 누 르 면 전 달 된 page 값 은 a 탭 의 title 속성 에서 읽 습 니 다.구체 적 으로 어떻게 실현 할 것 인 가 는 이전 문장 을 참고 하 시기 바 랍 니 다. 전송 문
jquery 의 post 방법 은 위의 코드 와 같은 요청 결 과 를 되 돌려 줍 니 다. data. 이 data 는 json 형식의 데 이 터 를 되 돌려 줍 니 다.그 는 List < T > 범 형 집합 이다.
$("#divCommentList").empty(); 댓 글 목록 을 비 운 div 의 내용 입 니 다.그리고 결 과 를 되 돌려 줍 니 다.json 을 이용 하여 데 이 터 를 되 돌려 분석 하고 html 로 연결 합 니 다. 마지막 으로 divCommentList div 에 다시 추가...
다음은 ajax 방법 요청 페이지 를 보 겠 습 니 다. /Ajax/Elec_Comment/GetData.aspx 검색 한 목록 을 json 대상 으로 정렬 하 는 방법 코드 는 다음 과 같 습 니 다:
public partial class GetData : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
int page = DotNet.Framework.Common.QueryString.StrToId(DotNet.Framework.Common.QueryString.F("page"));
int pid = DotNet.Framework.Common.QueryString.StrToId(DotNet.Framework.Common.QueryString.F("pid"));
GSSS.HTML.BLL.PromotionZone.ElectronicProducts.T_ElectronicProducts_Comment bll = new GSSS.HTML.BLL.PromotionZone.ElectronicProducts.T_ElectronicProducts_Comment();
if (page == 0)
{
page = 1;
}
DataSet data = bll.GetPageData(page, pid);
List<commm> list = new List<commm>();
if (data == null || data.Tables.Count == 0 || data.Tables[0].Rows.Count == 0)
{
Response.Write(" ");
Response.End();
}
commm model = null;
foreach (DataRow row in data.Tables[0].Rows)
{
model = new commm()
{
CommentBody = row["CommentBody"].ToString(),
CommentIP = row["CommentIP"].ToString(),
CommentDate = row["CommentDate"].ToString(),
CommentRate = row["CommentRate"].ToString(),
Email = row["Email"].ToString(),
id = row["id"].ToString(),
NickName = row["NickName"].ToString(),
ProdictID = row["ProdictID"].ToString(),
};
list.Add(model);
}
JavaScriptSerializer jss = new JavaScriptSerializer();
Response.Write(jss.Serialize(list));
Response.End();
}
}
public class commm
{
public string CommentBody { get; set; }
public string CommentIP { get; set; }
public string CommentDate { get; set; }
public string CommentRate { get; set; }
public string Email { get; set; }
public string id { get; set; }
public string NickName { get; set; }
public string ProdictID { get; set; }
}
댓 글 에 댓 글 시간 필드 가 있 습 니 다.그 는 DataTime 형식 으로 처음에는 데이터베이스 에서 DataTable 을 직접 읽 어 JSon 대상 으로 정렬 하여 되 돌려 주 려 고 했 으 나 변환 할 수 없 음 을 발견 하고 List < T > 범 형 으로 바 꾸 었 다.돌아 와 서 서열 화 된 이유 로DataTime 형식의 데 이 터 를 어떻게 해석 해 야 할 지 모 르 겠 습 니 다. 차라리 문자열 형식 으로 돌아 가 겠 습 니 다.그래서 새로운 종류의 commm 를 만 들 었 습 니 다. 클래스 결과 와 제품 평론 실체 류 의 결 과 는 차이 가 많 지 않 고 페이지 에 사용 할 수 없 는 데 이 터 를 생략 했 습 니 다.
추출 한 DataTable 데 이 터 는 List 집합 에 옮 겨 다 니 며 추가 되 었 습 니 다.그리고 List 집합 을 JSon 대상 으로 정렬 하여 클 라 이언 트 에 게 되 돌려 줍 니 다. 코드 는 다음 과 같 습 니 다.
여기 있 습 니 다.페이지 를 새로 고침 하지 않 는 효과 가 실 현 됩 니 다. 저희 가 하고 있 는 프로젝트 이기 때문에 Demo 를 제공 할 수 없습니다. 양해 해 주 십시오. 고수 여러분 께 서 더 좋 은 건의 가 있 으 면 댓 글 을 제출 해 주 십시오. 감사 하기 그 지 없습니다!!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
원생 Ajax와 jQuery Ajax의 차이점 예시 분석선언: 이번에 소개한 것은 aax와 백그라운드를 이용하여 데이터 교환을 하는 작은 예이기 때문에 demo는 서버를 통해 열어야 합니다.서버 환경은 구축하기 매우 좋다. 인터넷에서wamp나xampp를 다운로드하여 한 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.