WeChatアプレット開発におけるPostリクエストの詳細説明

韦小宝
リリース: 2023-03-21 12:50:02
オリジナル
14233 人が閲覧しました

この記事では、WeChat アプレット開発における 投稿リクエスト について説明します。WeChat アプレット開発における投稿リクエストについて知らない場合、または WeChat アプレット開発における投稿リクエストに興味がある場合は、見てみましょう。一緒に見てみましょう。くだらない話はやめて、本題に入りましょう。

1.post request


wx.request(OBJECT)
wx.request
は、HTTPSリクエストを開始します。 WeChat アプレットは同時に 5 つのネットワーク リクエスト接続のみを持つことができます。
公式ウェブサイトの説明


パラメータ名urldataヘッダー呼び出しback 関数が返されました開発者サービスによって正常に実行されました。res = { data: '開発者サーバーから返されたコンテンツ'}インターフェイス呼び出しに失敗したコールバック関数インターフェイス呼び出しの終了時のコールバック関数(呼び出しが成功または失敗した場合に実行されます)
タイプ 必須 説明
文字列 は、 開発者サーバーインターフェイスのアドレスです
Object、String No リクエストされたパラメータ
いいえデフォルトは GET、有効な値: OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT 関数 いいえ
fail Function No
完了 関数 いいえ


WeChat ミニプログラムの例

wx.request({
  url: 'test.php', //仅为示例,并非真实的接口地址
  data: {
        x: '' , 
        y: ''
   }, 
  header: { 
    'content-type': 'application/json' 
  }, 
  success: function(res) { 
    console.log(res.data) 
  }
})
ログイン後にコピー


このリクエストの GET メソッドは OK であり、ヘッダーを追加する必要はありません。
しかし、POSTにはさらに大きな問題があります。

デバッグには次のコードを使用します (コード 1):

wx.request({
    url: ApiHost + '/?service=default.getOrderInfo',
    data: {
      'order_id': order_id
    },
    method: 'POST',
    success: function (res) {
      // console.log(res);
      if (res.data.ret == 200) {
       //something to do
      }
      else{
       //something to do
      }
    }
    fail: function (res) {
      console.log(res);
    }
  });
ログイン後にコピー

下の図、WeChat 開発ツールのプロンプトに注目してください:

POST リクエストはデータの値を入力しますクエリ文字列パラメータではなく、リクエスト ペイロード。バックエンド サーバーが注意を払わない場合、データを取得できません。
ネット上にはこんな感じのリフォーム方法がたくさんあります。 ----ヘッダーを追加

wx.request({
    url: ApiHost + '/?service=default.getOrderInfo',
    data: {
      //数据urlencode方式编码,变量间用&连接,再post
      'order_id='+order_id
    },
    method: 'POST',
    header:{
      'content-type':'application/x-www-form-urlencoded'
    },
    success: function (res) {
      // console.log(res);
      if (res.data.ret == 200) {
       //something to do
      }
      else{
       //something to do
      }
    }
    fail: function (res) {
      console.log(res);
    }
  });
ログイン後にコピー

このように変更すればバックエンドで特別な処理は必要ありません。
でも...

やはり標準的な方法を使いたいので、バックエンドサーバーを変更するしか方法はありません。
ここでは Phalapi フレームワークを使用しています。お勧めします~~~

if(DI()->request->getHeader('content-type'))
{    
  $contentType = DI()->request->getHeader('content-type');
}
if(!empty($contentType)&&(strtolower(@$contentType) === 'application/json'))
{
    $HTTP_RAW_POST_DATA = isset($GLOBALS['HTTP_RAW_POST_DATA']) ? $GLOBALS['HTTP_RAW_POST_DATA'] : "{}";
    DI()->request = new PhalApi_Request(array_merge($_GET,json_decode($HTTP_RAW_POST_DATA, true)));
}
ログイン後にコピー

最後に、PC 上で コード 1 を使用してデバッグに成功しました。標準リクエストを使用し、application/x-www-form-urlencoded モードを使用しないでください。

しかし...実機を使ってデバッグすると、またリクエストパラメータを受信できないのはなぜですか?奇妙なこと。 。 。 。 。 。 。 。 。
最後に、パケットキャプチャと分析を通じて

実機側

POST /?service=default.getOrderInfo HTTP/1.0
Host: proxy
Connection: close
Content-Length: 43
Content-Type: application/json
Accept-Encoding: gzip, deflate
Accept: */*
User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 9_3_5 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Mobile/13G36 
MicroMessenger/6.5.1 NetType/WIFI Language/zh_CN
Referer: https://servicewechat.com/###/0/page-frame.html
Accept-Language: zh-cn

{"order_id":"011T00wO0gZVR72P89tO0DFNvO0T00w0"}
ログイン後にコピー

PCシミュレーション開発側


POST /?service=default.getOrderInfo HTTP/1.0
Host: proxy
Connection: close
Content-Length: 43
Origin: http://###.appservice.open.weixin.qq.com
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 Safari/537.36 
appservice webview/100000
content-type: application/json
Accept: */*
Referer: https://servicewechat.com/####/devtools/page-frame.html
Accept-Encoding: gzip, deflate, br

{"order_id":"011T00wO0gZVR72P89tO0DFNvO0T00w0"}
ログイン後にコピー

最終的に違いを見つけました:
Content-Typeとcontent-type
エミュレータのデフォルトはcontent-typeです
実機のデフォルトはContent-Typeです
バックエンドサーバーがContent-Typeの処理を追加して完了です。

上記がこの記事のすべての内容です。詳しくない場合でも、両方を自分で簡単にマスターできます。

関連する推奨事項:
プルダウン読み込みとプルアップ更新を実装する WeChat アプレットの詳細な説明

指ズーム画像コード共有を実装する WeChat アプレット

WeChat アプレット支払いを実装する PHPコードシェア

以上がWeChatアプレット開発におけるPostリクエストの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート