今回は、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 の問題がリクエストを取得してサーバーに送信する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
