Comment écrire un backend ajax ? Comment implémenter l'interaction front-end et back-end (exemple de code)

L'article suivant vous présentera comment écrire un backend ajax ? Comment réaliser une interaction front-end et back-end a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère que cela vous sera utile.

Avant-propos

Qu'est-ce que la connexion front-end et back-end ? La raison pour laquelle on l'appelle ainsi est parce que je ne peux vraiment pas penser à un autre meilleur nom pour décrire les problèmes que j'ai rencontrés lors du développement front-end au stade novice.

1. Nous savons tous que le front-end n'est pas seulement une bonne interface de site Web et une bonne conception d'interaction utilisateur, mais aussi une bonne « communication » avec le back-end.

C'est tout, mais comment communiquer avec le backend ? Qu'est-ce que le backend exactement vers le frontend ? Même si j'en entends toujours parler, comment dois-je le contacter ?

2. Lorsque notre technologie CSS est devenue compétente, nous ne nous contentons plus de pratiquer des sites Web d'imitation, mais voulons véritablement réaliser le développement de l'entreprise, développer notre propre application ou faire C'est un petit projet, mais heureusement J'ai quelque chose à montrer pendant l'entretien.

Question

Alors, c'est quoi le backend ?

Parce que je ne suis pas engagé dans le développement back-end, je ne veux pas en dire plus.

Cependant, en tant que développeur front-end, vous devez savoir au moins deux choses : la première est de faire du bon travail dans la conception d'interactions Web ; la seconde est d'utiliser les données renvoyées par le back-end.

Ainsi, le backend vers le frontend signifie simplement qu'il peut traiter les données, puis renvoyer les données au frontend pour qu'elles soient utilisées par le frontend.

Bien sûr, le travail front-end inclut également la compatibilité des navigateurs, l'optimisation des performances Web, etc.

Alors, comment contacter le backend ?

À ce moment-là, nous devrions changer nos mots : envoyer ma demande (front-end) au back-end.

Pour autant que je sache jusqu'à présent, il existe les méthodes suivantes pour envoyer des requêtes au backend. Bien sûr, si vous utilisez d'autres frameworks de développement front-end, tels que Vue.js, React, etc., il y aura d'autres méthodes, mais je ne présenterai que la méthode traditionnelle.

Méthode

1 Utilisez l'attribut action de la balise

dans des scénarios spéciaux Sera utilisé ensuite.

est utilisé comme suit :

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

Cette méthode n'est que brièvement présentée et ne constitue pas l'élaboration principale de cet article.

Et cette méthode présente de nombreuses limitations, comme l'impossibilité de définir des en-têtes de requêtes complexes.

2. Utilisez WebSocket pour la communication. Il s'agit d'une méthode relativement nouvelle. Vous pouvez effectuer une recherche par vous-même ou simplement appeler l'API (en utilisant la méthode fournie).

Méthode 3.fetch(), c'est également une méthode très nouvelle, mais actuellement les navigateurs compatibles sont limités, elle n'est donc pas très couramment utilisée.

4.ajax (Ajax), c'est une méthode très courante et pratique. Vous pouvez en apprendre davantage sur ajax sur Baidu. En ce qui concerne ajax, nous avons l’ajax de JavaScript et l’ajax de jQuery.

1) L'ajax du js natif est basé sur un objet nommé XMLHttpRequest. Oh non, tout ce qui concerne ajax devrait être basé sur cet objet. Vous pouvez accéder à la méthode d'écriture ajax native de Baidu, il vous suffit de la comprendre, car il n'y a vraiment pas besoin de l'écrire.

2) jQuery est une bibliothèque d'encapsulation JavaScript qui encapsule de nombreuses méthodes courantes et simples. Elle est très simple à utiliser, je pense que c'est une compétence que tout développeur front-end doit maîtriser. Par conséquent, cet article utilise principalement l’ajax encapsulé par jQuery.

Instance

Après tant de choses dit, on arrive enfin au point...

Nous voulons l'envoyer See More à la requête backend, alors il doit y avoir un backend, mais je ne connais pas le backend, dois-je quand même apprendre le backend ?

Heureusement, il existe une chose magique dans ce monde appelée plateforme ouverte et API ouverte. Les plus célèbres sont Sina Open API, Douban Open API, les principales plates-formes ouvertes de cartes, etc.

Cette plateforme ouverte est équivalente à notre backend, qui nous fournit une API (url) ouverte. Ouvert, tu sais ce que ça veut dire même si je ne le dis pas.

Ce qui suit est un morceau de 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);

    }
});

Appuyez sur F12 sur le navigateur et le résultat que vous voyez dans la barre de console :

À ce stade, le processus de connexion des extrémités avant et arrière est terminé !

Ici, la plateforme ouverte que j'utilise est Heweather (https://www.heweather.com), qui fournit des données météorologiques. Si nous l'utilisons, nous pouvons développer notre propre application météo.

D'accord, c'est tout pour mon introduction ! Il y a vraiment beaucoup de connaissances sur le front-end, et chacun doit prendre l'initiative de l'apprendre et de le maîtriser !

Résumé : ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo JavaScript, le Tutoriel vidéo jQuery, le Tutoriel vidéo AJAX !

Recommandations associées :

Tutoriel vidéo de formation sur le bien-être public php

Manuel en ligne JavaScript

Manuel en ligne AJAX

Manuel en ligne jQuery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!