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

次のように使用します:

<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 サイトの他の関連記事を参照してください。