Wie schreibe ich ein Ajax-Backend? So implementieren Sie Front-End- und Back-End-Interaktion (Codebeispiel)

Wie folgt verwenden:

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

Diese Methode wird nur kurz vorgestellt und ist nicht die Haupterklärung dieses Artikels.

Und diese Methode hat viele Einschränkungen, wie zum Beispiel die Unfähigkeit, komplexe Anforderungsheader festzulegen.

2. Verwenden Sie WebSocket für die Kommunikation. Sie können selbst suchen oder einfach die API aufrufen (mit der bereitgestellten Methode).

3.fetch()-Methode, dies ist ebenfalls eine sehr neue Methode, aber derzeit sind die kompatiblen Browser begrenzt, sodass sie nicht sehr häufig verwendet wird.

4.ajax (Ajax), dies ist eine sehr verbreitete und praktische Methode. Sie können mehr über Ajax auf Baidu erfahren. Wenn es um Ajax geht, ist es das Ajax von JavaScript und das Ajax von jQuery.

1) Der Ajax von nativem js basiert auf einem Objekt namens XMLHttpRequest. Oh nein, alles an Ajax sollte auf diesem Objekt basieren. Sie können auf die native Ajax-Schreibmethode von Baidu zurückgreifen, Sie müssen sie nur verstehen, da es wirklich wenig Bedarf gibt, sie zu schreiben.

2) jQuery ist eine JavaScript-Kapselungsbibliothek, die viele gängige und einfache Methoden kapselt. Ich denke, es ist eine Fähigkeit, die jeder Front-End-Entwickler beherrschen muss. Daher verwendet dieser Artikel hauptsächlich jQuery-gekapseltes Ajax.

Instanz

Nachdem wir so viel gesagt haben, kommen wir endlich zum Punkt...

Wir wollen es verschicken zur Backend-Anfrage, dann muss es ein Backend geben, aber ich kenne das Backend nicht, muss ich das Backend noch lernen?

Glücklicherweise gibt es auf dieser Welt etwas Magisches namens offene Plattform und offene API. Die bekannteren sind Sina Open API, Douban Open API, wichtige offene Kartenplattformen usw.

Diese offene Plattform entspricht unserem Backend, das uns eine offene API (URL) zur Verfügung stellt. Offen, Sie wissen, was es bedeutet, auch wenn ich es nicht sage.

Das Folgende ist ein Codestück:

$.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);

    }
});

Drücken Sie F12 im Browser und das Ergebnis wird in der Konsolenleiste angezeigt:

Damit ist der Prozess der Verbindung von Front- und Back-End abgeschlossen!

Hier verwende ich die offene Plattform Heweather (https://www.heweather.com), die einige Wetterdaten bereitstellt. Wenn wir sie nutzen, können wir unsere eigene Wetter-APP entwickeln.

Okay, das war's für meine Einleitung! Es gibt wirklich viel Wissen über das Frontend und jeder muss die Initiative ergreifen, um es zu lernen und zu beherrschen!

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Tutorials finden Sie unter JavaScript-Video-Tutorial, jQuery-Video-Tutorial, AJAX-Video-Tutorial!

Verwandte Empfehlungen:

PHP-Video-Tutorial zum Gemeinwohltraining

JavaScript Online-Handbuch

AJAX-Online-Handbuch

jQuery-Online-Handbuch

Das obige ist der detaillierte Inhalt vonWie schreibe ich ein Ajax-Backend? So implementieren Sie Front-End- und Back-End-Interaktion (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!