Detailed examples of the combined use of angularjs and ajax_AngularJS
WBOY
Release： 2016-05-16 15:35:37
Original
1796 people have browsed it
This is an article about the use of easyui with ajax. It also introduces the use of angularjs and allows you to feel the power of angularjs. There are a lot of articles about ajax on the Internet. I won't start writing directly from the js of the native httpxmlrequest object. Reading that kind of thing is just to understand how high-level things come from and what the principles are. When you actually do it, write that kind of thing. Isn’t it nonsense? If you take advantage of your skills, you can use that kind of code to write the entire site. Things like html js were not fully thought out when they were first designed, and they are just bullshit. Fortunately, there are various frameworks that can help us make this shit more delicious more easily. Fortunately, due to the promotion of the Internet industry, these things on the browser side are developing in the direction of unified standards.
Let’s create a webform page HelloAjaxNet.aspx. Let’s talk about ajax first. Here I use the AjaxPro.2.dll that is widely circulated on the Internet. His website is http://www.ajaxpro.info/ This is a personal work and it is very easy to use.
Originally, the new asp.net comes with server-side methods declared using the webmethod attribute and client-side pagemethods access methods. Various objects can also be digitized in json, and the functions are the same as above. Microsoft comes with the codebehind of aspx. The code method must be static. As for webconfig, there is no need to configure it in the new version of vs2013 development environment. If it is an old one, create a new ajax website project and the webconfig will be automatically completed. Then the server page is loaded in the ScriptManager. .GetCurrent(Page).EnablePageMethods = true; The client must have the form of runat=server and Then the client can use pagemethods way to access.
I still think the above one is more useful. I won’t say much about its principle. When the page is loaded, the server object is registered, and then the generated html page has a few more sentences
Why? It’s to reference a js file ajaxpro/WebApplication1.NewFolder2.HelloAjaxNet,WebApplication1.ashx
Then you will understand that this script for you to call js on the client is automatically generated by the server and has exactly the same name as your server. Then you can call back the server method on the client. There is nothing magical about it. Yes, we mainly want to use this feature and the convenience of json data to achieve seamless transfer of client-server data.
About the serialization of json data. In the past, you could only use external json libraries or Microsoft’s own for manual parsing:
Server:
public string ServerProcerMethod(string stu)
{
//System.Web.Script.Serialization.JavaScriptSerializer jsSerializer = new System.Web.Script.Serialization.JavaScriptSerializer();
//StuInfo s= jsSerializer.Deserialize<StuInfo>(stu);
System.Web.Script.Serialization.JavaScriptSerializer jsSerializer = new System.Web.Script.Serialization.JavaScriptSerializer();
List<StuInfo> s = jsSerializer.Deserialize<List<StuInfo>>(stu);
if (s != null && s.Count > )
{
StuInfo stu= s[];
StringBuilder sb = new StringBuilder();
jsSerializer.Serialize(stu, sb);
return sb.ToString();
}
else
return null;
}
Copy after login
Client:
//javascript 字符串转json对象：
var obj = JSON.parse(str);
//javascript json 对象转字符串：
JSON.stringify(obj);
Copy after login
Regarding the relationship between AjaxPro.2.dll and ajax.dll, it is said on the Internet that they are different. In fact, it is basically done by one person. I guess. Please download ajaxpro from the above website. This is the perfect version
After referencing the dll file, you need to configure the webconfig httphandler. The function is to transfer the above ashx request to our ajaxpro code, and then allow our client js to directly call the server method successfully.
Then I won’t say much else. I’ll look directly at the server code later.
You can understand easyui as a bunch of extended controls. Just like jquery, you package the js objects and native html controls with his stuff, and then you can click on some of the methods written for you to help you process data conveniently. And it also has a default control appearance that is okay, which is really good for enterprise management software. For other software, you can only haha. Download the easyui file and put it into the project and introduce easyui related js and style files and jquery:
Then, you can use easyui to render the native html control into an easyui control through css style or js code as introduced on the easyui homepage http://jeasyui.com/
Yes, very convenient. In fact, there are quite a few good JS writers in China. They have created some UIs like this and that. You can choose between them, so let’s stick with this one. The most commonly used requirement is ajax server-side paging. Let’s get it done.
Let’s talk about this easyui datagrid first. To make it worse, put a table tag in the client html:
Then use js to do it like this $('# studb').datagrid() will render it into an easyui datagrid control for you. You can do this in document.ready(). Our data table needs to be filled with data. Where does this data come from? Which columns are displayed? How to paginate? How many items are displayed on each page? These are all parameters and how to pass them in. Easyui receives a bunch of parameters in the form of json objects in many places, such as this datagrid:
I saw that I made a data binding function by myself. Refer to the loader of datagrid in easyui. After the first request to get the paging information, I immediately bound the data to the table. You can see that it is exactly like making a template, and then initializes my own paging control. When ng-click is used, the client click is triggered as before, and then the method in the controller is called to update the data. Note that the data is only updated according to the business logic, and there is no need to do anything else. If you don’t understand the above two pieces of code, you can check it out by yourself. Getting started with angularjs and data binding takes less than 10 minutes,
Due to the two-way binding mechanism like WPF, when the data model data is updated, the page content will automatically change accordingly. You can even see that when I edit the data in the text box below, the data in the above table changes before it is submitted. Because their data comes from the same place, it feels like it is ajax.
The project source code of all the examples above can be downloaded and run directly, but due to the introduction of some external libraries, it is almost too big to fit in 10MB
Something to say
In fact, if the Internet continues to develop like this, the front end will be unified, and the front end will be king. By then, a web page will be a system and a client. The backend is only responsible for data and security. Isn’t HTML5 now almost an industry standard? Some embedded devices support it
For the time being, I have seen a few people in the blog garden talking about the MVC mode where the front end and the back end operate on the same model. When the front end updates attributes, there is a mechanism that automatically updates the back end for persistence. Go to the database or update a certain attribute of the model in the backend, and the value of the front-end html page will automatically change. It’s not that it can’t be done. After all, there are so many talented people, so I think it’s at least not stable yet.
Various UIs include easyui ligerui fineui miniui Devexpress and many js frameworks seajs requirejs JavaScriptMVC backbone avalonjs knockout angular jquery jqueryui js is really shit, I can’t finish learning all kinds of frameworks
Especially the software industry is changing with each passing day. There are too many technologies based on frameworks and platforms. If you are not proficient in a certain technology, it doesn’t matter if you can use it. But as a technician, you must be proficient in at least one or one technology. Otherwise, it is a pity that you are just a fool. I'm basically still on the road to moving bricks. Writing business code means using one year's experience for ten years. Writing business code is his job. After work, he has to have some energy to investigate the essence of things. As long as a good programmer has been working on this kind of database system for a long time, he will know how to do it himself. Develop some so-called small frameworks that can be developed quickly to accumulate some of your own tool libraries and experience.
Don’t have any bias at work. As long as he can write business code every day, software development is just a profession. You are not a hero. The purpose is to solve problems, not to turn the corner.
I personally am not very fond of js. js is also terrible. When this thing was originally designed, it was not perfect and caused various obstacles to our use of it. However, you have to use it when doing web development. There is no prejudice against those who do front-end work here. Thanks to those who have a thorough knowledge of the front-end, such as Situ Zhengmei, for creating these tools to make it easier for us to complete these website programs.
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
