Ajaxバックエンドの書き方は？フロントエンドとバックエンドの対話を実装する方法 (コード例)

次の記事では、ajax バックエンドの作成方法を紹介します。フロントエンドとバックエンドのインタラクションを実現する方法については、参考にしていただければ幸いです。

まえがき

フロントエンド接続とバックエンド接続とは何ですか?なぜこれと呼ばれているかというと、私が初心者の段階でフロントエンド開発中に遭遇した問題を説明するのにこれ以上良い名前が思いつかないからです。

1. フロントエンドは、優れた Web サイト インターフェイスとユーザー インタラクション デザインであるだけでなく、バ​​ックエンドとの優れた「コミュニケーション」でもあることは誰もが知っています。

そうは言っても、バックエンドとフロントエンドってどうやってやり取りするんですか？ よく聞く話ですが、どうやってコミュニケーションを取ればいいのでしょうか？

2. CSS テクノロジーが熟練すると、模倣 Web サイトを実践するだけでは満足できなくなり、本当にエンタープライズ開発を達成したり、独自のアプリケーションを開発したり、小規模なプロジェクトになります。面接中に見せたいものがある。

質問

それでは、バックエンドとは何でしょうか?

私はバックエンド開発に従事していないため、これ以上は言いません。

ただし、フロントエンド開発者は、少なくとも 2 つのことを知っておく必要があります。1 つ目は、Web インタラクション デザインを適切に行うことです。2 つ目は、バックエンドから返されたデータを使用することです。

つまり、バックエンドからフロントエンドへということは、単にデータを処理し、フロントエンドで使用できるようにデータをフロントエンドに返すことができることを意味します。

もちろん、フロントエンドの作業には、ブラウザの互換性、Web パフォーマンスの最適化なども含まれます。

バックエンドに接続するにはどうすればよいですか?

現時点では、別の言い方をする必要があります。(フロントエンドの) リクエストをバックエンドに送信します。

私の知る限り、バックエンドにリクエストを送信する方法は次のとおりです。もちろん、Vue.js や React などの他のフロントエンド開発フレームワークを使用する場合は、次のような方法があります。他の方法もありますが、ここでは従来の方法のみを紹介します。

メソッド

1.

タグの action 属性を使用して、バックエンドにリクエストを送信します。特別なシナリオで使用されます。

次のように使用します:

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

この方法は簡単に紹介するだけであり、この記事の主な説明ではありません。

そして、この方法には複雑なリクエストヘッダーを設定できないなど、多くの制限があります。

2. WebSocket を使用して通信します。これは、自分で検索することも、(提供されたメソッドを使用して) API を呼び出すこともできます。

3.fetch()メソッド、これも非常に新しいメソッドですが、現状では対応ブラウザが限られているため、あまり使われていません。

4.ajax (Ajax)、これは非常に一般的で便利な方法です。ajax について詳しくは、Baidu をご覧ください。 ajax に関しては、JavaScript の ajax と jQuery の ajax があります。

1) ネイティブ JS の ajax は、XMLHttpRequest という名前のオブジェクトに基づいています。いや、ajax に関するすべてはこのオブジェクトに基づいているはずです。 Baidu のネイティブ ajax 記述メソッドに進むことができます。実際に記述する必要はほとんどないため、理解するだけで十分です。

2) jQuery は、一般的に使用される多くの単純なメソッドをカプセル化する JavaScript カプセル化ライブラリであり、使用するのは非常に簡単です。すべてのフロントエンド開発者が習得しなければならないスキルだと思います。したがって、この記事では主に jQuery でカプセル化された ajax を使用します。

例

ここまでお話してきましたが、ようやく本題に入ります...

送りたいバックエンドへのリクエストの場合、バックエンドがあるはずですが、バックエンドがわかりません。それでもバックエンドについて学ぶ必要がありますか?

幸いなことに、この世界にはオープン プラットフォームとオープン API と呼ばれる魔法のようなものがあります。より有名なものには、Sina Open API、Douban Open API、主要な地図オープンプラットフォームなどがあります。

このオープン プラットフォームはバックエンドに相当し、オープン API (URL) を提供します。オープン、言わなくてもそれが何を意味するか知っていますか。

以下はコードの一部です:

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

    }
});

ブラウザで F12 を押すと、結果がコンソール バーに表示されます:

to これでフロントエンドとバックエンドの接続作業は完了です。

ここで、私が使用しているオープン プラットフォームは Heweather (https://www.heweather.com) です。これを使用すると、独自の天気アプリを開発できます。

さて、私の紹介は以上です。フロントエンドについては本当に多くの知識があり、誰もが率先して学び、習得する必要があります。

要約: 上記がこの記事の全内容です。皆さんの学習に役立つことを願っています。関連チュートリアルの詳細については、JavaScript ビデオ チュートリアル 、jQuery ビデオ チュートリアル 、AJAX ビデオ チュートリアル をご覧ください。

関連する推奨事項:

php 公共福祉トレーニング ビデオ チュートリアル

JavaScript オンライン マニュアル

## AJAX オンライン マニュアル

jQuery オンライン マニュアル

以上がAjaxバックエンドの書き方は？フロントエンドとバックエンドの対話を実装する方法 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。