Ajax 폼 제출 및 배경 처리 기반 간단 한 응용
가장 간단 한 문체 입력 을 예 로 들 자.우 리 는"datafield"속성 을 추가 하고 서버 관련 클래스 에 대응 하 는 속성 이름 으로 저 장 된 값 을 추가 합 니 다.이 표지 가 있 으 면 프론트 데스크 에서 데 이 터 를 찾 으 면 처리 하기 쉽다.
우 리 는 아래 코드 와 같은 일반적인 방법 을 정할 수 있다.
getFormData: function(formid) {
var data = {};
// TEXT
$("#" + formid + " input[type=text]").each(function(i, o) {
var jo = $(o);
if (jo.attr("datafield")) {
var str = jo.val();
str = str.replace(" ", "");
if (str !== "") {
data[jo.attr("datafield")] = jo.val();
}
}
});
return data;
}
이것 은 폼 에 있 는 모든 text 텍스트 를 간단하게 가 져 와 하나의 data 대상 에 넣 는 것 입 니 다.다른 폼 컨트롤 값 을 어떻게 가 져 오 는 지 에 대해 서 는 더 이상 말 하지 않 겠 습 니 다.원리 가 많 지 않 습 니 다.그럼 다음 에는 서버 에 데 이 터 를 보 내 는 겁 니 다.제 가 있 는 곳 은 바로 jquery 가 가 져 온 ajax 입 니 다.
var save = function(sender) {
$(sender).prop("disabled", true); // ,
var data = getFormData("form1");
var jsonobj = { jsondata: data };
var textdata = JSON.stringify(jsonobj);
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "xxxxx.aspx/Save",
dataType: "json",
data: textdata,
success: function(msg) {
if (msg.d == "1") {
document.form1.reset();
alert(" !");
}
else if (msg.d == "0") {
alert(" !");
}
},
complete: function(jqXHR, textStatus) {
$(sender).prop("disabled", false); //
}
});
}
이곳 의"xxxx.aspx/save"는 ajax 처리 페이지 이 고,다른 것 은 웹 메 서 드 입 니 다.고객 의 손 속도 가 너무 빠 르 고 서비스 처리 가 너무 느 리 며 중복 클릭 처 리 를 방지 했다.이러한 폼 데이터 수집 은 리 턴 서버 가 완성 된다.json 2.js 의 JSON.stringify 방법 을 사용 하여 대상 을 json 문자 로 통일 시 키 는 것 은 json 문자열 을 맞 추기 위해 json 의 형식 문 제 를 고려 하지 않 고 간단 하고 깨끗 하 다 는 것 이 장점 이다.
그러면 고객 은 이미 데 이 터 를 수 록 했 으 니 서버 도 데 이 터 를 처리 해 야 한다.이전 데스크 톱 에서 온 데이터 키(json 의 key)는 특정한 데이터 류 의 모든 속성 을 포함 할 수 없습니다.그리고 데이터 클래스 도 여러 가지 가 있 습 니 다.어떤 클래스 인지 서버 만 알 수 있 습 니 다.그래서 여기 서 우 리 는 도움 이 되 는 전환 류 를 써 야 한다.여기에 또 문제 가 있 습 니 다.데이터 류 에 여러 가지 가 있 을 수 있 습 니 다.제 가 모든 유형 에 방법 을 써 야 합 니까?그것 은 구덩이 가 아 닙 니까?그래서 우 리 는 클 라 이언 트 가 서버 에 전 달 된 데이터 형식 을 분석 합 니 다.이것 은 키 값 이 맞 고 중복 되 지 않 습 니 다.그러면 Dictionary
이렇게 많아
public static T1 UpdateObjectByDic<T1>(T1 scrobj, IDictionary<string, string> sourceobject, bool ignoreCase)
where T1 : new()
{
T1 result = scrobj;
PropertyInfo[] pifresults = typeof(T1).GetProperties();
foreach (var dic in sourceobject)
{
foreach (PropertyInfo pifresult in pifresults)
{
if (string.Compare(dic.Key, pifresult.Name, ignoreCase) == 0)
{
pifresult.SetValue(result, ChangeType(dic.Value, pifresult.PropertyType), null);
break;
}
}
}
return result;
}
public static Object ChangeType(object value, Type targetType)
{
Type convertType = targetType;
if (targetType.IsGenericType && targetType.GetGenericTypeDefinition().Equals(typeof(Nullable<>)))
{
NullableConverter nullableConverter = new NullableConverter(targetType);
convertType = nullableConverter.UnderlyingType;
}
return Convert.ChangeType(value, convertType);
}
제 가 있 는 T1 scrobb 는 업 데 이 트 를 함께 하 는 것 입 니 다.폼 을 추가 하면 new 대상 을 보 내 고 업 데 이 트 를 하면 원본 폼 데 이 터 를 보 냅 니 다.여기 서 Change Type 방법 을 말씀 드 리 겠 습 니 다.다른 것 은 데이터 클래스 의 일부 속성 은 nullable(int?DateTime?등)전통 적 인 Convert.Change Type 에 이상 이 있 을 수 있 으 므 로 간단하게 고 쳤 습 니 다.ignoreCase 는 속성(프론트 데스크 의 datafield 에 대응 하 는 값)으로 대소 문 자 를 처리 할 지 여 부 를 찾 습 니 다.이렇게 하면 백 스테이지 데이터 처리 핵심 이 끝나 고 호출 부분 코드 도 붙 입 니 다.
[WebMethod(EnableSession = true)]
public static string Save(Dictionary<string, string> jsondata)
{
string result = "0";
Model.Project pro = ConvertHandle.UpdateObjectByDic< Model.Project>(jsondata,new Model.Project,true);
pro.CreatorID = BLL.Sys_User.GetCurUser().ID.ToString();
pro.CreatorName = BLL.Sys_User.GetCurUser().Name;
prohandle.Insert(pro);
result = "1";
return result;
}
여기 가 바로 배경 구체 적 인 처리 방법 호출 의 핵심 입 니 다.prohandle.Insert(pro)는 클래스 를 데이터베이스,pro.CreatorID,pro.CreatorName 을 프로젝트 의 다른 정보 로 저장 합 니 다.이 는 말 하지 않 겠 습 니 다.여기까지 폼 프론트 데스크 데이터 수집,백 스테이지 처리,그 블록 을 저장 하 는 것 외 에 모두 끝 났 습 니 다.하하.글 에서 마지막 으로 말 하면 여 기 는 간단 한 응용 일 뿐 입 니 다.제 가 말 한 이 프론트 데스크 에서 수집 한 것 처럼 많은 프론트 데스크 js 프레임 워 크 도 이미 일찍 만 들 었 습 니 다.고려 하 는 것 도 저 보다 훨씬 전면적 입 니 다.백 스테이지 에서 저 를 처리 하 는 것 은 저 같은 프론트 데스크 에서 간단하게 수집 한 것 입 니 다.많은 제3자 프레임 워 크 는 완전한 체 계 를 가지 지만 제 가 여기 서 말 하 는 것 은 간단 한 사고 일 뿐 입 니 다.당신 이 일시 적 으로 그렇게 많은 컨트롤 이 없 을 때 이 길 을 간단하게 실현 할 수 있 습 니까?물론 나 는 바퀴 를 반복 해서 만 들 지 말 라 고 강력 히 건의 하지만 바퀴 의 핵심 작용 과 원 리 를 반드시 알 아야 한다.
이상 의 이 Ajax 폼 제출 및 백 스테이지 처 리 를 바탕 으로 간단 한 응용 프로그램 은 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 께 참고 가 되 고 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Javascript Ajax에 대한 간단한 연습저는 약 4년 동안 프로그래밍 개인 튜터로 일한 경험이 있습니다. 약 5년 전에 " "이라는 제목의 페르시아어로 내 웹사이트에 블로그 게시물을 올렸고 사람들이 저에게 전화하기 시작했습니다. 나는 항상 사람들을 가르치...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.