JavaScript Learning Summary (iii) jquery encapsulated Ajax attempt by Fungleo

JavaScript Learning Summary (iii) jquery encapsulated Ajax attempt by Fungleo preface

In JS learning, I do not understand a lot of things about the native. But using jquery to manipulate the DOM is basically very skilled. But I don't quite understand the processing of AJAX data interactions.

Recently the team handed me a backend full interface to my project. I'm going to use these interfaces to organize the front-end code myself. To learn, I decided not to use Vue or any other front-end framework to do it. Instead, use only the jquery framework, where parts of the data are all implemented using a concatenation string.

Get the data, display the data, submit the data.

In this project (a smaller project), there is no more advanced way of using a local cache, but rather all the functionality that I need based on DOM and URLs.

Of course, it's silly to do that. But it can make me understand something more thoroughly. The project is nearing the end. This blog post is to share some of my code.

Does JQuery AJAX have the need for encapsulation?

To be honest, there is basically no such necessity. Because it's already very streamlined.

However, in my project, two functions were used, namely get fetch data and post submission data. The common code is still very much.

So, I'll wrap it up to get a handle on the basic use of the callback function. And second, you can make the code less.

Encapsulated functions

//Ajax Get JSON method function getjson(url,func){$.ajax ({type:' Get ', Url:url, Xhrfields: {withcredentials:true}, Crossdomain:true, Success: function(data){            if(data.status==0) {func (data); }Else{alert (data.data); Gourl ("//www.xxx.com/"); }}, Error: function(data){AlertJSON. stringify (data)); }    });}//Ajax Post JSON method function postjson(url,access,func){$.ajax ({type:' Post ', Url:url, DataType:"JSON", Xhrfields: {withcredentials:true}, Crossdomain:true, Data:JSON. stringify (Access), success: function(data){            if(Data.status = =0) {func (data); }Else{alert (data.data); }}, Error: function(data){AlertJSON. stringify (data)); }    });}

As shown in the code above, I encapsulated getJson() and postJson() two functions.

The ability to encapsulate such a package is based on the uniform specification of the interface provided by the backend. Also, the process of success and error is consistent.

If this condition is not met, then the encapsulation is meaningless.

How to use

Get Data

function getBuyOrderList(status,page){    var"//www.xxx.com/api/buy-order?status="+status+"&page="+page;    getJson(url,function(data){        console.log(data);    });}

When you get the data, just replace it with the code above console.log(data); .

In this way, the amount of code that I use in my project to get the data is a lot less.

Post data

function sendInquireJson(){    var id = getGoodsId();    var"//www.xxx.com/api/inquire/"+id;    postJson(url,buildInquireJson(),function(){        alert("提交成功");        gourl("https://www.yaoyingli.com/scm/");    });}

I first use buildInquireJson() this function to organize the JSON data, and then through the sendInquireJson() function can be passed up.

Summarize

As I have said earlier, JQuery Ajax has been very streamlined, and we are generally not required to encapsulate it.

If all the interfaces are uniform, and all the processing is consistent, then it can be encapsulated to reduce the amount of our code

You can try to encapsulate a variety of duplicated code. If you know what you're encapsulating and how to use it

Naming is important, and basically my naming principle is that I know what it's like to look at that name. For example, the above buildInquireJson() function, I did not provide the code for this function in the article. But at the first glance, this is a function of assembling the Inquire json data of this contraption.

This article is original by Fungleo, allow reprint. But reprint must be signed by the author, and keep the article starting link. Otherwise, legal liability will be investigated.
Starting Address: http://blog.csdn.net/FungLeo/article/details/51497604

JavaScript Learning Summary (iii) jquery encapsulated Ajax attempt by Fungleo