Ajax メソッド ($.ajax()) は、Ajax 操作を処理するために jQuery オブジェクトに定義されています。このメソッドを呼び出した後、ブラウザは HTTP リクエストをサーバーに送信します。ajaxメソッドには多くの属性がありますが、すべての属性がすべての呼び出しで使用されるわけではありません。この講義では、各属性の機能を詳しく紹介し、具体的な呼び出しケースを示し、サーバーからテキスト形式のデータ、JSON形式のデータ、およびxml形式のデータを返します。それぞれのデータ。
$.ajaxメソッドの使用仕様
$.ajax()メソッドの共通パラメータリスト
| 属性名 |
説明する |
| タイプ |
リクエストメソッド（「POST」または「GET」）を設定します。デフォルトは「GET」です。注: PUT や DELETE などの他の HTTP リクエスト メソッドも使用できますが、サポートされているのは一部のブラウザだけです。 |
| 非同期 |
非同期に設定するかどうか。デフォルト値: true。デフォルトでは、すべてのリクエストは非同期です。同期リクエストを送信する必要がある場合は、このオプションを false に設定します。 |
| URL |
リクエストの送信元アドレス |
| データ |
サーバーにリクエストされたパラメータは、リクエスト文字列形式、形式: {パラメータ名 1: 値 1, パラメータ名 2: 値 2...} に自動的に変換されます。 |
| 成功 |
これは Function タイプのパラメータである必要があります。リクエストが成功した後に呼び出されるコールバック関数です。形式: function(data[, textStatus]){}、データ: サーバーによって返され、dataType パラメータに従って処理されます。textStatus は次のとおりです。ステータスを説明する文字列は省略できます。 |
| エラー |
Function タイプのパラメーター、つまりリクエストが失敗したときに呼び出される関数が必要です。function(){alert('サーバー例外!')} |
| データ・タイプ |
サーバーから返される予期されるデータ型。使用可能な値は次のとおりです: text、json、xml、html、script、jsonp |
| 完了 |
Function タイプのパラメーター、つまりリクエストが完了した後 (リクエストが成功したか失敗したかに関係なく) 呼び出されるコールバック関数が必要です。 |
ajax メソッドには多くの属性がありますが、すべての呼び出しを使用する必要はなく、状況に応じていくつかのパラメーターを使用するだけです。
特定のケースのデモンストレーション
フロントエンドのコードは次のとおりです。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>JQuery中ajax支持应用</title>
<!--加载JQuery库-->
<script src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
function send(){
var userName = $("#userName").val();
console.log("userName=" + userName);
var url = "/ajaxProj/t4AjaxServlet"
$.ajax({
type:'post', //post或者get
async:true, //异步为true,同步为false
url: url,
//需要提交到后台的参数，键值对格式，多个参数逗号分隔
data:{
userName:userName,
id:1,
age:15,
action:'text'
},
success:function (data){
//响应成功执行该函数
console.log("执行成功:"+data);
$("#fonts").text(data);
},
error:function (data){
//响应失败执行该函数，比如404,500,405等
console.log("执行失败：" + data);
},complete:function(){
//不管执行成功，还是执行失败，最后都会执行
console.log("执行结束");
},
dataType:"text"
});
}
function sendJson(){
var userName = $("#userName").val();
console.log("userName=" + userName);
var url = "/ajaxProj/t4AjaxServlet"
$.ajax({
type:'post', //post或者get
async:true, //异步为true,同步为false
url: url,
//需要提交到后台的参数，键值对格式，多个参数逗号分隔
data:{
userName:userName,
id:1,
age:15,
action:'json'
},
success:function (data){
//响应成功执行该函数
console.log("执行成功:"+data);
var li = "<table>"
li += "<tr><td align='right'>id：</td><td>"+data.id+"</td></tr>"
li += "<tr><td align='right'>用户名称：</td><td>"+data.userName+"</td></tr>"
li += "<tr><td align='right'>用户年龄：</td><td>"+data.age+"</td></tr>"
li += "</table>";
$("#fonts").html(li);
},
error:function (data){
//响应失败执行该函数，比如404,500,405等
console.log("执行失败：" + data);
},complete:function(){
//不管执行成功，还是执行失败，最后都会执行
console.log("执行结束");
},
dataType:"json"
});
}
function sendXml(){
var userName = $("#userName").val();
console.log("userName=" + userName);
var url = "/ajaxProj/t4AjaxServlet"
$.ajax({
type:'post', //post或者get
async:true, //异步为true,同步为false
url: url,
//需要提交到后台的参数，键值对格式，多个参数逗号分隔
data:{
userName:userName,
id:1,
age:15,
action:'xml'
},
success:function (data){
//响应成功执行该函数
console.log("执行成功:"+data);
let membersData = data.getElementsByTagName("person");
console.log(membersData);
let id = membersData[0].childNodes[0].firstChild.nodeValue;
let userName = membersData[0].childNodes[1].firstChild.nodeValue;
let age = membersData[0].childNodes[2].firstChild.nodeValue;
let li = "<table>"
li += "<tr><td align='right'>id：</td><td>"+id+"</td></tr>"
li += "<tr><td align='right'>用户名称：</td><td>"+userName+"</td></tr>"
li += "<tr><td align='right'>用户年龄：</td><td>"+age+"</td></tr>"
li += "</table>";
$("#fonts").html(li);
},
error:function (data){
//响应失败执行该函数，比如404,500,405等
console.log("执行失败：" + data);
},complete:function(){
//不管执行成功，还是执行失败，最后都会执行
console.log("执行结束");
},
dataType:"xml"
});
}
</script>
</head>
<body>
<h2 align="center">JQuery中ajax支持应用</h2>
<hr>
用户名：<input type="text" name="userName" id="userName">
<input type="button" value="返回文本内容" onclick="send()">
<input type="button" value="返回json内容" onclick="sendJson()">
<input type="button" value="返回xml内容" onclick="sendXml()">
<hr>
服务器返回的结果：<font id="fonts" color="red" size="2"></font>
</body>
</html>
バックエンドのコードは次のとおりです。
package com.servlet;
import com.alibaba.fastjson.JSONObject;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet(name = "T4AjaxServlet",value = "/t4AjaxServlet")
public class T4AjaxServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
//获取返回的值
String action = request.getParameter("action");
String userName = request.getParameter("userName");
String id = request.getParameter("id");
String age = request.getParameter("age");
System.out.println("userName=" + userName + ",id=" + id + ",age=" + age);
//输出
if(action.equals("text")) {
out.println("返回结果：userName=" + userName);
}else if(action.equals("json")){
//字符串类型的值必须用双引号，如果是数值类型可以省略双引号
//String msg ="{\"userName\":\"" +userName+ "\",\"id\":\"" + id + "\",\"age\":" + age + "}";
//System.out.println(msg);
//out.println(msg);
//用fastjson包的类实现
JSONObject person = new JSONObject();
person.put("id",id);
person.put("userName",userName);
person.put("age",age);
out.println(person.toJSONString());
}else if(action.equals("xml")){
StringBuffer sb = new StringBuffer();
sb.append("<persons>");
sb.append("<person><id>"+id+"</id><userName>"+userName+"</userName><age>"+age+"</age></person>");
sb.append("</persons>");
out.println("<?xml version='1.0' encoding='utf-8' ?>");
out.println(sb.toString());
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
実行結果
ajax メソッドを記述する便利な方法もいくつかあります。
$.get(): GET リクエストを発行します。
$.getScript(): JavaScript スクリプト ファイルを読み取り、実行します。
$.getJSON(): GET リクエストを発行して JSON ファイルを読み取ります。
$.post(): POST リクエストを発行します。
$.fn.load(): HTML ファイルを読み取り、それを現在の要素に置きます。
$.post メソッドのリファレンス
//调用JQuery的post方法提交数据
let url = "/ajaxProj/collegeServlet"
$.post(
url,
{
参数1:值1,
参数2:值2,
参数3:值3
},
function (data){
//执行成功返回的结果
console.log(data);
},
"json"
);