집 >웹 프론트엔드 >JS 튜토리얼 >Ajax 양식 제출 및 백그라운드 처리를 기반으로 하는 간단한 애플리케이션

Ajax 양식 제출 및 백그라운드 처리를 기반으로 하는 간단한 애플리케이션

亚连원래의: 2018-05-23 14:32:421204검색

이제 Ajax 양식 제출 및 백그라운드 처리를 기반으로 한 간단한 애플리케이션을 소개하겠습니다. 이제 그것을 여러분과 공유하고 모든 사람에게 참고 자료로 제공하겠습니다.

먼저 양식 제출에 대해 이야기해 보겠습니다. 양식을 제출하려면 먼저 양식 데이터를 수집해야 합니다. (검증에 대해서는 언급하지 않겠습니다. jquery로 남겨두겠습니다.) html $ ("xxid").val() 등의 값을 얻는 것은 쉽지만, 폼이 데이터를 많이 수집하고, 이런 폼이 많으면 이 방법을 사용하는 것은 확실히 번거로울 것입니다. 그리고 녹음할 때 실수하기 쉽습니다. 따라서 간단히 수집 규칙을 정의하면 됩니다. 예를 들어 서버로 다시 전송될 데이터 양식 컨트롤을 표시한 다음 표시된 데이터를 함께 검색할 수 있습니다.

가장 간단한 스타일 입력을 예로 들어 보겠습니다.1a68931579285e3227dba517acb2bf2a , 저장된 값은 해당 서버 관련 클래스의 속성 이름입니다. 이 마크를 사용하면 프런트에서 데이터를 검색하기가 더 쉬워집니다.

다음 코드와 같은 일반적인 방법을 정의할 수 있습니다

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;
}

이것은 양식의 모든 텍스트를 가져와서 데이터 개체에 넣는 간단한 방법입니다. 다른 양식의 값을 가져오는 방법입니다. 자세한 내용은 다루지 않겠습니다. 원리는 비슷합니다.

그런 다음 다음 단계는 데이터를 서버로 보내는 것입니다. 여기서는 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); //还原按钮
        }
      });
    }

여기 "xxxxx.aspx/Save"는 Ajax 처리 페이지이고 다른 하나는 웹 메소드입니다. 고객이 너무 빠르게 처리하는 현상, 서비스 처리가 너무 느린 현상, 반복적인 클릭 현상을 방지하기 위해 일부 처리 작업을 수행했습니다.

이렇게 폼 데이터 수집 및 서버로의 반환이 완료되었습니다. 여기서는 json2.js의 JSON.stringify 메서드를 사용하여 객체를 json 문자로 균일하게 변환합니다. 장점은 json 문자열을 직접 작성하기 위해 json 형식을 고려할 필요가 없다는 것입니다.

그러면 클라이언트가 데이터를 수집했고 서버는 데이터를 처리해야 합니다. 프론트 데스크에서 가져온 데이터의 키(json 키)에는 특정 데이터 클래스의 모든 속성이 포함될 수 없습니다. 그리고 많은 데이터 클래스가 있으며 서버만이 그것이 어떤 클래스인지 알고 있습니다. 따라서 여기서 도우미 변환 클래스를 작성해야 합니다. 여기에는 또 다른 문제가 있습니다. 데이터 클래스가 많을 수도 있습니다. 각 클래스마다 메소드를 작성해야 하는 것이 함정이 아닌가요? 그래서 클라이언트에서 서버로 전송되는 데이터 형식을 분석합니다. 이는 키-값 쌍의 집합이며 사전708d620c35cc3f2d1dd0b997d136c07a과 동일합니다. 최소한 우리는 할 수 있습니다. 들어오는 매개변수가 결정되면 관련 클래스가 전달됩니다. 관련 수업? 어떤 카테고리인지는 구체적인 배경 수집 방식을 살펴봐야만 알 수 있다. 이제 우리의 생각을 정리해 보겠습니다. 이제 데이터 클래스로 변환해야 하는 Dictionary708d620c35cc3f2d1dd0b997d136c07a가 있습니다. 알 수는 없지만 이 Dictionary의 키(key)는 이 데이터 클래스의 속성 집합의 하위 집합으로 간주할 수 있고, 이 Dictionary의 값(value)은 ;는 이 데이터 클래스 속성의 값입니다. 그러면 처리하기가 더 쉬울 것입니다. 속성 세트를 얻는 방법은 무엇입니까? 반사. 다음 중 어떤 카테고리가 있나요? 그럼에도 불구하고 제네릭이 문제를 해결합니다.

여기에 핵심 코드가 있습니다

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 scrobj가 함께 업데이트를 수행합니다. 양식이 추가되면 새 개체가 전달됩니다. 주문이 업데이트되면 원본 양식 데이터는 다음과 같습니다. 추가했습니다. 그런데 여기에는 ChangeType 메서드가 있습니다. 다른 것들은 데이터 클래스의 일부 속성이 null을 허용한다는 것입니다(int? DateTime? 등). 기존 Convert.ChangeType에는 예외가 있으므로 간단히 무시합니다. (프런트 데스크의 데이터 필드에 해당하는 값) 대문자와 소문자를 처리하는지 확인하십시오. (대개 케이스에 관계없이 케이스를 처리하려면 프런트 침에 빠질 것이라고 생각합니다.)

이로 백그라운드 데이터 처리 코어가 완성되고, 코드의 호출 부분도 게시됩니다

[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 프레임워크가 개발되었으며, 고려사항은 저보다 훨씬 더 포괄적입니다. 프런트 데스크는 간단하게 수집되며 많은 타사 프레임워크에는 완전한 시스템이 있습니다. 하지만 여기서 제가 말하는 것은 현재로서는 컨트롤이 많지 않은 경우 이 경로를 간단하게 구현할 수 있습니까? 물론 바퀴를 재발명하지 말라고 강력히 권하지만, 바퀴의 핵심 기능과 원리를 이해해야 한다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

Ajax 양식 제출 및 백그라운드 처리를 기반으로 하는 간단한 애플리케이션

관련 기사