How to write ajax backend? How to implement front-end and back-end interaction (code example)

The following article will introduce to you how to write an ajax backend? How to achieve front-end and back-end interaction has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Preface

What is front-end and back-end connection? Why it's called this is because I really can't think of another better name to describe the problems I encountered during front-end development in my novice stage.

1. We all know that the front-end is not only a good website interface and user interaction design, but also a good "communication" with the back-end.

That’s what I say, but how do I communicate with the backend? What kind of thing is the backend to the frontend? Although I always hear about it, how should I get in touch with it? Woolen cloth?

2. When our CSS technology has become proficient, we are no longer just satisfied with practicing imitation websites, but want to truly achieve enterprise development, develop an application of our own, or make It’s a small project, but fortunately I have something to show for it during the interview.

Question

So what is the backend?

Because I am not engaged in back-end development, I don’t want to say more.

However, as a front-end developer, you must know at least two things. The first is to do a good job in Web interaction design; the second is to use the data returned by the back-end.

So, the backend to the frontend simply means that it can process data and then return the data to the frontend for use by the frontend.

Of course, front-end work also includes browser compatibility, web performance optimization, etc.

How to contact the backend?

At this time we should put it another way: send my (front-end) request to the back-end.

As far as I know, there are the following methods to send requests to the backend. Of course, if you use other front-end development frameworks, such as Vue.js, React, etc., there will be other methods. , but I will only introduce the traditional method.

Method

1. Use the action attribute of the

tag to send a request to the backend. This method is useful in special scenarios. Will be used next.

Use as follows:

<form method="发送请求所使用的方法" action="向后台发送请求的url(访问的地址)">
    <input type="hidden" name="访问后台API需要传的参数" value="参数的值"/>
</form>

This method is only briefly introduced and is not the main explanation of this article.

And this method has many restrictions, such as complex request headers cannot be set.

2. Use WebSocket for communication. This is a relatively new method. You can search by yourself or simply call the API (using the provided method).

3.fetch() method, this is also a very new method, but currently compatible browsers are limited, so it is not very commonly used.

4.ajax (Ajax), this is a very common and convenient method. You can learn more about ajax on Baidu. When it comes to ajax, we have JavaScript’s ajax and jQuery’s ajax.

1) The ajax of native js is based on an object named XMLHttpRequest. Oh no, everything about ajax should be based on this object. You can go to Baidu's native ajax writing method, you just need to understand it, because there is really little need to write it.

2) jQuery is a JavaScript encapsulation library that encapsulates many commonly used and simple methods. It is very simple to use. I think it is a skill that every front-end developer must master. Therefore, this article mainly uses jQuery encapsulated ajax.

Example

Having said so much, we finally get to the point...

We want to send it to the backend Request, then there must be a backend, but I don’t know the backend, do I still have to learn the backend?

Fortunately, there is a magical thing in this world called open platform and open API. The more famous ones are Sina Open API, Douban Open API, major map open platforms, etc.

This open platform is equivalent to our backend, which provides us with an open API (url). Open, you know what it means even if I don’t say it.

The following is a piece of code:

$.ajax({
    type: 'GET',                                                     // 请求的方式
    url: 'https://free-api.heweather.com/s6/weather/now?parameters', // 请求的地址（和风天气开放API）
    data: {                                                          // 请求所需要填的参数
        location: '中山,广东',                                        // 需要查询的城市或地区
        key: '9da*********************95bcb82f'                      // 用户认证key    },
    success: function(data) {                                        // 请求成功后，接收到data
        console.log(data); // 打印获取到的数据
                
        // 对获取到的数据稍作处理
        var basic = data.HeWeather6[0].basic;        var now = data.HeWeather6[0].now;
        console.log(basic);
        console.log(now);

    }
});

Press F12 on the browser, and the result you see in the Console bar:

to Here, the process of connecting the front and back ends is complete!

Here, the open platform I am using is Heweather (https://www.heweather.com), which provides some weather data. If we use it, we can develop our own Weather APP.

##Okay, that’s it for my introduction! There is really a lot of knowledge about the front-end, and everyone needs to take the initiative to learn and master it!

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study. For more related tutorials, please visit JavaScript Video Tutorial, jQuery Video Tutorial, AJAX Video Tutorial!

Related recommendations:

php public welfare training video tutorial

JavaScript Online Manual

## AJAX Online Manual

jQuery Online Manual

The above is the detailed content of How to write ajax backend? How to implement front-end and back-end interaction (code example). For more information, please follow other related articles on the PHP Chinese website!