A simple application based on Ajax form submission and background processing

Below I will bring you a simple application based on Ajax form submission and background processing. Let me share it with you now and give it as a reference for everyone.

First of all, let’s talk about form submission. To submit the form, you must first collect the form data (as for verification, I won’t talk about it. I’ll leave it for next time). With jquery, you can get the html. The value is still as simple as $("xxid").val() and so on, but if a form collects a lot of data, and there are many forms like this, it will definitely be troublesome to use this method, and it is easy to make mistakes in recording. Therefore, we can simply define a collection rule. For example, we can mark the data form control that is to be sent back to the server, and then retrieve the marked data together.

Let’s take the simplest stylistic input as an exampleUs Add a "datafield" attribute, and the stored value is the attribute name of the corresponding server-related class. With this mark, it will be easier to retrieve data at the front desk.

We can define a general method such as the following code

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

This is a simple way to get all the text in the form and put it into a data object. As for I won’t go into details about how to get the values ​​of other form controls, the principles are similar.

The next step is to send the data to the server. I will directly use ajax with jquery here.

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); //还原按钮
        }
      });
    }

The "xxxxx.aspx/Save" here is the ajax processing page, and the other is a webmethod. We have done some processing to prevent customers from being too fast, service processing being too slow, and repeated clicks.

Such a form data collection and return to the server is completed. The JSON.stringify method of json2.js is used here to uniformly convert objects into json characters. The advantage is that you don’t have to consider the format of json to spell the json string yourself. It is simple and clean.

Then the client has collected the data, and the server should process the data. The key of the data we come from the front desk (json key) cannot all include all attributes of a certain data class. There are also many data classes, and only the server knows which class it is. So here we need to write a helper conversion class. There is another problem here. There may be many data classes. Do I have to write a method for each class? Isn’t that a pitfall? So we analyze the data format transmitted from the client to the server. It is a set of key-value pairs and does not repeat. It is equivalent to a Dictionary. There are many kinds of background classes, so at least we can Once an incoming parameter is determined, the relevant class will be passed out. Related classes? Which category it is can only be known by looking at the specific background collection method. So, let’s sort out our thoughts. Now we have a Dictionary that needs to be turned into a data class. What exactly is a data class and what are its attributes? I can’t figure it out, but the key (key) of this Dictionary can be regarded as a subset of the attribute set of this data class, and the value (value) of this Dictionary is the value of this data class attribute. A subset of toString(). That would be easier to handle. How to get the attribute set? reflection. Which of these categories are there? Regardless, generics solve it.

After talking about so much, post the core code

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

My T1 scrobj here is to make updates together. If a form is added, it is passed A new object comes in. If the order is updated, the original form data is passed in. By the way, here is the ChangeType method. Others are that some attributes in the data class are nullable (int? DateTime?, etc.). The traditional Convert.ChangeType will have exceptions, so I simply changed it. ignoreCase is the attribute (the value corresponding to the datafield in the front desk) Check whether it handles upper and lower case (usually regardless of case, if you want to handle case, I believe you will be drowned by the front desk's saliva).

This completes the background data processing core, and the calling part of the code is also posted

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

Here is the core usage of the background specific processing method call, prohandle.Insert(pro) saves the class into the database , pro.CreatorID, pro.CreatorName are some other information about the project, which I won’t go into. At this point, the front-end data collection and background processing of a form are all finished except for the saving part, haha.

Finally, this is just a simple application. Like the front-end collection I mentioned, many front-end js frameworks have already been developed, and the considerations are much more comprehensive than mine. For background processing, this is Based on my simple collection at the front desk, many third-party frameworks have complete systems, but what I am talking about here is just a simple idea. When you don’t have so many controls at the moment, can you easily follow this path? accomplish. Of course, I strongly recommend not to reinvent the wheel, but you must understand the core function and principle of the wheel.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Ajax Get data by city name

MVC meets ajax form validation after bootstrap

AJAX request queue implementation

The above is the detailed content of A simple application based on Ajax form submission and background processing. For more information, please follow other related articles on the PHP Chinese website!