집 > 기사 > 웹 프론트엔드 > Ajax 양식 제출 및 백그라운드 처리

Ajax 양식 제출 및 백그라운드 처리

php中世界最好的语言원래의: 2018-04-03 15:16:181550검색

이번에는 Ajax 폼 제출 및 백그라운드 처리에 대해 알려드리겠습니다. Ajax 폼 제출 및 백그라운드 처리에 대한 주의 사항은 무엇인가요?

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

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

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

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 키)에는 특정 데이터 클래스의 모든 속성이 포함될 수 없습니다. 또한 많은 데이터 클래스가 있으며 서버만이 그것이 어떤 클래스인지 알고 있습니다. 따라서 여기서 도우미 변환 클래스를 작성해야 합니다. 여기에는 또 다른 문제가 있습니다. 데이터 클래스가 많을 수도 있습니다. 각 클래스마다 메소드를 작성해야 하는 것이 함정이 아닌가요? 그래서 클라이언트에서 서버로 전송되는 데이터 형식을 분석합니다. 이는 키-값 쌍의 집합이며 사전과 동일합니다. 적어도 우리는 할 수 있습니다. 들어오는 매개변수가 결정되면 관련 클래스가 전달됩니다. 관련 수업? 어떤 카테고리인지는 구체적인 배경 수집 방식을 살펴봐야만 알 수 있다. 이제 우리의 생각을 정리해 보겠습니다. 이제 데이터 클래스로 변환해야 하는 Dictionary가 있습니다. 알 수는 없지만 이 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 프레임워크가 이미 개발되었으며 고려 사항은 저보다 훨씬 더 포괄적입니다. 제 프런트엔드에는 간단한 컬렉션이 있습니다. 많은 타사 프레임워크에는 완전한 시스템이 있지만 여기서 말하는 것은 현재 컨트롤이 많지 않은 경우 구현할 수 있는지에 대한 것입니다. 그냥 이 길? 물론 바퀴를 재발명하지 말라고 강력히 권하지만, 바퀴의 핵심 기능과 원리를 이해해야 한다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!