Shulou(Shulou.com)06/03 Report--

This article mainly shows you "how to use Ajax to achieve form submission and background processing", the content is easy to understand, clear, hope to help you solve your doubts, the following let Xiaobian lead you to study and learn "how to use Ajax to achieve form submission and background processing" this article.

First of all, let's talk about form submission, if you want to submit a form, you have to collect form data first (as for verification, I won't say it, but leave it next time). With jquery, take a html value or simply $("xxid"). Val (), etc., but if a form collects a lot of data, and there are many forms like this, it must be troublesome to use this method, and it is easy to make mistakes. So, we can simply define a collection rule, such as the data form control to be sent back to the server, we can make a tag, and then retrieve the data of these tags together.

Take the simplest stylistic input as an example, let's add a "datafield" attribute, and the stored value is the property name of the corresponding server-related class. With this mark, it will be easy for the receptionist to pick up the data.

We can decide on a general method such as the following code

GetFormData: function (formid) {var data = {}; / / get the contents of the TEXT file $("#" + 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;}

Here is a simple way to get all the text text in the form and put it into a data object. As for how to take the values of other form controls, I won't say much about the principle.

Then the next time is to send the data to the server, I will directly use the ajax with jquery here.

Var save = function (sender) {$(sender) .prop ("disabled", true); / / disable the button to prevent repeating 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 (" saved successfully! ") ;} else if (msg.d = = "0") {alert ("Save failed!") ;}, complete: function (jqXHR, textStatus) {$(sender) .prop ("disabled", false); / / restore button}});}

The "xxxxx.aspx/Save" here is the ajax processing page, and the rest is a webmethod. Do to prevent the customer hand speed is too fast, service processing is too slow, repeated click processing.

Such a form data collection is completed by the backhaul server. Here, we use json2.js 's JSON.stringify method to uniformly convert objects into json characters. The advantage is that you don't have to consider the format of json for spelling json strings, which is simple and clean.

Then the customer has collected the data, and the server should also process the data. The key to the data we have from the foreground (the key of json) cannot include all the attributes of a data class. And there are many data classes, which class should only be known by the server. So here we need to write a helpful conversion class. There is another problem here, it is possible that there are many data classes, do I have to write a method for each class, isn't that a pit? So if we analyze the data format passed from the client to the server, it is a set of key-value pairs and will not be repeated, so it is equivalent to a Dictionary. There are many kinds of classes in the background, so at least we can determine one incoming parameter, and what comes out is the relevant class. Related classes? Which category is only known in the specific background collection method. So, sort out the idea, now there is a Dictionary to become a data class, what exactly is the data class has what kind of properties? I don't know, but the key (key) of this Dictionary can be thought of as a subset of the attribute set of this data class, and the value (value) of this Dictionary is a subset of the attribute value toString () of this data class. That would be easy. How to get the property set? Reflex. Which one are so many categories? Regardless of it, generics are solved.

Say so much, post the core code

Public static T1 UpdateObjectByDic (T1 scrobj, IDictionary 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);}

I here T1 scrobj is to update together, such as adding a form to send a new object in, if it is an update to the order to send the original form data in. Here, by the way, the ChangeType method, and the other is that some properties in the data class are nullable (int? DateTime? (etc.) the traditional Convert.ChangeType will have an exception, so simply change it. IgnoreCase is the attribute (the value corresponding to the datafield in the foreground) to find out whether to deal with case (generally regardless of case, it is believed that it will be drowned by the foreground mouth flow).

In this way, the background data processing core is finished, and the calling part of the code is also posted.

[WebMethod (EnableSession = true)] public static string Save (Dictionary jsondata) {string result = "0"; Model.Project pro = ConvertHandle.UpdateObjectByDic

(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 of the background specific handling of method calls, prohandle.Insert (pro) will store the class in the database, pro.CreatorID,pro.CreatorName for some other information of the project, not to mention these. Here a form foreground data collection, background processing, in addition to saving that piece, it is all over, hehe.

At the end of the article, this is just a simple application. As I said, the foreground collection, many foreground js frameworks have been done long ago, and the consideration is much more comprehensive than mine. The background processing is based on my foreground simple collection. Many third-party frameworks have a complete system, but what I am talking about here is just a simple way of thinking. Whether you can easily implement this path when you don't have so many controls at the moment. Of course, I strongly recommend not to repeat the wheel, but it is important to understand the core function and principle of the wheel.

The above is all the contents of the article "how to use Ajax to achieve form submission and background processing". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.