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

This article mainly introduces layui how to grab form data, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

Note:

1. The submit button in layui is based on the "listening" mechanism.

2. The call to form.on () needs to be placed in the callback function of layui.use.

3. The 'return false' at the end is indispensable to ensure that the page refresh is not triggered. Note that it must be 'return false',' and not simply 'return''.

Fetching form data can be achieved in four steps:

1. Disable the button. To prevent users from clicking continuously, note that the button is explicitly enabled again after the end of the Ajax request (complete).

2. Integrate form data. In many cases, in addition to getting data from the formal form, you need to add some additional data.

3. Determine the path. Sometimes, the same button can express a variety of actions, such as adding or modifying.

4. Initiate a request. Initiates an Ajax request, passes parameters to the server, and processes the return value in the callback function.

5 、 return false .

Important code enumeration

1. HTML statement

Save

If you only need the listening effect (click event), you only need one of the above button, as well as lay-filter and lay-submit. If you need to collect the values of form elements, you also need form and its style layui-form.

2. Js event monitoring

/ / Save form.on ('submit (btnSave)', function (data) {console.info ('start saving'); / / * button disable var isDisabled = $("# btnSave"). HasClass ('layui-btn-disabled'); if (isDisabled) {return false;} / / * integrate form data var formData = data.field Extend (formData, {Id: $("# hiddenId"). Val ()}); console.info (formData); / / * determine the path var url = ""; if (editMode = = "add") {url = urlEnum.Add;} else if (editMode = = "update") {url = urlEnum.Update;} else {alert ('Editing Model uncertainty, add / update') Return;} / / * initiate a request for $.ajax ({data: formData, type: "POST", dataType: "JSON", url: url, beforeSend: function () {/ / disable $("# btnSave") .addClass ('layui-btn-disabled') }, complete: function () {/ / enable $("# btnSave") .removeClass ('layui-btn-disabled');}, success: function (result) {console.info ("data saved successfully, returned data is: ↓"); console.info (result) If (result.Status) {/ / refresh the list parent.$ ("# mainGrid") .bootstrapTable ("selectPage", 1); / / make sure to close the form parent.layer.close (parent.layer.getFrameIndex (window.name)) at the end } else {/ / failed layer.alert (result.StatusMessage, {title: 'prompt', icon: 5});}); / / end ajax return false;}) Thank you for reading this article carefully. I hope the article "layui how to grab form data" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.