ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery の問題がリクエストを取得してサーバーに送信する方法

jQuery の問題がリクエストを取得してサーバーに送信する方法

php中世界最好的语言オリジナル: 2018-04-25 14:18:571828ブラウズ

今回は、jQuery がサーバーに get リクエストと post リクエストを発行する方法について説明します。以下は実際のケースです。

ユーザー名を入力するための単純なページがある Web サイト A があるとします。インターフェイスには 2 つの入力ボックスがあり、最初の入力ボックスはフォーム送信を実装するために含まれており、2 番目の入力ボックスは分離されています。フォームには含まれていませんが、これら 2 つの入力ボックスを使用して jQuery の ajax を学習しましょう。

1、フロントエンドHTMLおよびJavaScriptコード

ページhtml

<main style="text-align: center; margin: 200px auto;">
   <h2>输入用户名</h2>
   <form class="" action="demo01.php" method="post" style="margin-bottom: 20px;">
   <input id="user-name" type="text" name="username" placeholder="请填写您的用户名">
    <input type="submit" name="submit1" value="form提交1" class="input">
   </form>
   <input id="user-name2" type="text" name="username2" placeholder="请填写您的用户名">
   <input type="button" name="submit2" value="ajax提交2">
   <p class="box">
   </p>
  </main>
  <script src="../../js/jquery-3.1.0.min.js"></script>
  <script src="demo.js"></script>

demo01.jsコードは、ページで紹介されています。ここで実装されているのは単純なGETリクエストであることに注意してください。

 $(function($) {
  $('input[name=submit2]').on('click', function(e) {
   let username = '';
   if ('' !== (username = $('#user-name2').val())) {
    $.ajax({
     url: `demo.php?name=${username}`,
     dataType: 'json',
     method: 'GET',
     success: function(data) {
      if (data.result == 1) {
       $('.box').html(`<p>你的姓名${username}已成功保存。</p>`);
      }
     },
     error: function(xhr) {
      // 导致出错的原因较多，以后再研究
      alert('error:' + JSON.stringify(xhr));
     }
    })
    .done(function(data) {
     // 请求成功后要做的工作
     console.log('success');
    })
    .fail(function() {
     // 请求失败后要做的工作
     console.log('error');
    })
    .always(function() {
     // 不管成功或失败都要做的工作
     console.log('complete');
    });
   }
  });
 });

jQueryのajax()メソッドには $.ajax(url [, settings]); と $.ajax([settings]); の2つの書き方がありますが、どちらの書き方でもOKな気がします。たとえば、URL に対して単純なリクエストを行うだけで、返されるデータ、形式、エラーに関する要件がなく、URL パラメータのみを渡す必要がある場合に使用します。最初の書き方を使用します。上記のdemo01.jsでは2番目の記述方法を使用しています。パラメータと関連する関数を以下に説明します。

(1) 上記のコードの ajax() のパラメーター

ここでのパラメーターの型はすべて javascript オブジェクト、つまり、すべてこの型のデータであることがわかります。 o = {key: value };。 jQuery のドキュメントでは、ここでのパラメーターは、特定の実行環境 (ブラウザーなど) に属し、特定の型に属する null、カスタム配列、またはドキュメントではなく、PlainObject (オブジェクト型オブジェクト) のみであることが規定されています。ここで明確に説明するのは簡単ではありませんが、ちょっとした実験をしてみましょう。コマンドラインでノード repl を開き、次のテストを実行します:

> node
 > typeof(null);
 'object'
 > typeof([]);
 'object'
 > typeof(document);
 'undefined'
 > typeof({});
 'object'

null、[] (配列型)、{} (オブジェクト型) がすべてオブジェクトであることがわかります。 js 内のすべてがオブジェクトであるためです。対話型環境では、 document は未定義の変数であるため、その型は未定義です。 typeof(document) がブラウザ環境でテストされる場合、その型もオブジェクトになります。コードで使用されるパラメータについては、以下で 1 つずつ説明します。

url、リクエストされる URL アドレス。その値は URL を含む文字列である必要があります。

dataType、文字列。リクエストを行った後にサーバーから返されるデータのタイプ。指定できる種類は、xml、html、script、json、jsonp、textです。指定しない場合、jquery は MIME に基づいて判断し、xml、json、script、html のいずれかの型を返します。

メソッド、文字列。 HTTP リクエストメソッド、デフォルトは GET で、上記のコードは POST を指定しています。

成功、タイプ: Function(任意のデータ、文字列 textStatus、jqXHR jqXHR)、匿名関数。 HTTP リクエストが成功した後に呼び出される関数は、サーバーから返されたデータ (上記で dataType が指定されている場合、サーバーから返されたデータ型は上記の dataType で指定された型と一致している必要があります) の 3 つのパラメーターを渡すことができます。説明できる状態文字列 textStatus と jqXHR オブジェクト。サーバーから返されたデータのみが上に渡されることがわかります。

error、タイプ: Function(jqXHR jqXHR、String textStatus、String errorThrown)、匿名関数。 HTTP リクエストが失敗した後に呼び出される関数には、3 つのパラメータを渡すこともできます。

これらのパラメータに加えて、async、dataFilter、mimeType、その他のパラメータなど、他にも多くのパラメータが使用されますが、現在の単純なスクリプトではそれほど多くのパラメータは使用されていません。

(2)「遅延読み込み機能」

上記コードでは、$.ajax().done().fail().always() jqXHR.done(), jqXHR.fail(), jqXHR。 always( ) を使用すると、関数の追加など、遅延オブジェクトが解析される、拒否される、解析または拒否される 3 つのケースで処理される作業を追加できます。これが可能となる理由は、$.ajax() が返す内容によって異なります (jquery バージョンが 1.5 より大きい場合)。このオブジェクトは、Promise インターフェイス (Promise メカニズム。非同期操作メッセージを配信するために使用され、結果が将来になるまで分からないイベントを表します) を実装します。これにより、複数のコールバックを 1 つのリクエストで追加したり、リクエストが完了した後でも追加したりできるようになります。

标题“延迟加载”描述的不够准确，但从效果上看是有延迟加载的效果。关于这个问题更详细的解释可以参考jQuery文档中对jqXHR的解释或一位前端前辈的解释jQuery的deferred对象详解。

2，后端运行在nginx服务器上的php代码

后端的逻辑很简单：我们把前端获取的数据保存到名为data-demo01的文件中，保存成功则向前端返回一个1作为标志。

（1）前端ajax发起GET请求

如果前端的ajax发起的是一个GET请求，那么后端也比较好处理：

  if (isset($_GET['name']) && !empty($_GET['name'])) {
   $username = trim($_GET['name']);
   if (file_put_contents('data-demo01', $username)) {
    echo '{"result": 1}';
   } 
}

（2）前端ajax发起POST请求

js代码中需要修改下ajax()的url、method参数，并增加一个data参数，修改后如下：

 // 相同的代码省略
 $.ajax({
  url: `demo01.php`,
  dataType: 'json',
  method: 'POST',
  data: {"username": username},
 // 相同的代码省略

因为用POST传递数据，所以去掉url中用来传递数据的参数，下面的data类型要与dataType一致，为json格式，然后将username作为值传递。

那么后端的代码也就可以确定了：

 if (isset($_POST['username']) && !empty($_POST['username'])) {
   $username = trim($_POST['username']);
   if (file_put_contents('data-demo01', $username)) {
    echo '{"result": 1}';
   }
  }

如果不出错的话，效果应该是下面这样然后查看下data-demo01，名字果然被保存了。

那么问题来了，如果出错了呢？比如data-demo01文件不可写，或者后台服务器返回的数据格式有错误，或者网络出错。那又该怎么处理呢？我现在也不太清楚，后续再研究吧。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

jQuery の問題がリクエストを取得してサーバーに送信する方法

関連記事