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에 해당 합 니 다.배경 클래스 는 여러 가지 가 있 습 니 다.그러면 적어도 우 리 는 하나의 전 송 된 매개 변 수 를 확인 할 수 있 습 니 다.전 송 된 것 은 관련 클래스 입 니 다.관련 류?어떤 부류 인지 구체 적 인 백 스테이지 수집 방법 에서 만 알 수 있다.그러면 생각 을 정리 해 보 세 요.지금 Dictionary이 데이터 류 로 바 뀌 려 고 합 니 다.데이터 류 는 도대체 어떤 속성 이 있 습 니까?잘 모 르 겠 지만,이 Dictionary의 key(키)는 이 데이터 클래스 속성 집합의 하위 집합 으로 볼 수 있 습 니 다.이 Dictionary의 value(값)는 이 데이터 클래스 속성 값 toString()의 하위 집합 입 니 다.그렇게 하면 이렇게 하기 쉽다.속성 집합 은 어떻게 가 져 옵 니까?반사이렇게 많은 종 류 는 도대체 어느 것 입 니까?그것 을 막론하고 범 형 해결.
이렇게 많아

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 폼 제출 및 백 스테이지 처 리 를 바탕 으로 간단 한 응용 프로그램 은 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 께 참고 가 되 고 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기