Jquery ajax学習レコード
10641 ワード
Jquert Ajaxリクエスト:
1 load()メソッドを使用した非同期要求データ
load(url,[data],[callback])---》
パラメータurlはロードサーバアドレスであり、
オプションdataパラメータが要求時に送信されるデータであり、
callbackパラメータは、データリクエストが成功した後に実行されるコールバック関数です.
load()メソッドを使用して、Ajaxからサーバのデータのロードを要求します.
返されたデータを指定した要素に配置します.呼び出し形式は次のとおりです.
//dataは省略できます
2 getJSON()メソッドを使用してJSON形式データを非同期でロードする
jQuery.getJSON(url,[data],[callback])または$.getJSON(url,[data],[callback])
ここでurlパラメータは、jsonフォーマットファイルのロードを要求するサーバアドレスであり、
オプションdataパラメータが要求時に送信されるデータであり、
callbackパラメータは、データリクエストが成功した後に実行されるコールバック関数です.
//getJSON()メソッドでAjax非同期リクエストで、
サーバのデータを取得し、取得したデータを解析してページに表示します.呼び出し形式は次のとおりです.
3 getScript()メソッドを使用してjsファイルを非同期でロードして実行する
getScript()メソッドを使用して、サーバ内のJavaScript形式のファイルを非同期で要求して実行します.呼び出し形式は次のとおりです.
jQuery.getScript(url,[callback])または$.getScript(url,[callback])
後の点を忘れないように注意してください.
4 get()メソッドを使用してGET方式でサーバからデータを取得する
get()メソッドを使用する場合、GET方式でサーバにデータを要求し、メソッドのコールバック関数のパラメータで要求されたデータを返します.その呼び出しフォーマットは次のとおりです.
$.get(url,[callback])
例えば、「ロード」ボタンをクリックすると、get()メソッドがサーバの1つに呼び出される.phpファイルはGET方式でデータを要求し、返されたデータの内容を次の図のようにページに表示します.
5 post()メソッドを使用してPOST方式でサーバからデータを送信する
Post()メソッドは、POST方式でサーバにデータを送信し、サーバがデータを受信した後、処理を行い、処理結果をページに戻すために使用されることが多く、呼び出しフォーマットは以下の通りである.
$.post(url,[data],[callback])
パラメータurlはサーバリクエストアドレス、オプションdataはサーバリクエスト時に送信されるデータ、オプションcallbackパラメータはリクエスト成功後に実行されるコールバック関数
6 serialize()メソッドを使用してフォーム要素値をシーケンス化する
serialize()メソッドを使用して、フォーム内のname属性の要素値をシーケンス化します.
標準URL符号化テキスト文字列を生成し、ajaxリクエストに直接使用できます.その呼び出しフォーマットは以下の通りです.
$(selector).serialize()
selectorパラメータは、1つ以上のフォームの要素またはフォーム要素自体です.
シーケンス化結果:Text 1=ttt&Select 1=0&Checkbox 1=on
7 ajax()メソッドを使用してサーバデータをロードする
ajax()メソッドを使用すると、サーバから返されたデータを取得するだけでなく、サーバにリクエストを送信して数値を渡すことができます.呼び出しフォーマットは次のとおりです.
jQuery.ajax([settings])または$.ajax([settings])
ここでパラメータsettingsはajaxリクエストを送信する際の構成オブジェクトであり、
このオブジェクトでは、
urlはサーバリクエストのパスを表し、
Dataはリクエスト時に渡されるデータであり、
DataTypeはサーバが返すデータ型であり、
successはリクエストが成功した実行のコールバック関数であり、typeはデータリクエストを送信する方法であり、デフォルトはgetである.
8 ajaxSetup()メソッドを使用してグローバルAjaxのデフォルトオプションを設定する
ajaxSetup()メソッドを使用して、Ajaxリクエストのグローバルオプション値を設定します.
設定が完了すると、後のAjaxリクエストにこれらのオプション値を追加する必要はありません.呼び出しフォーマットは次のとおりです.
jQuery.ajaxSetup([options])または$.ajaxSetup([options])
オプションoptionsパラメータは、Ajaxリクエスト時のグローバルオプション値を設定するオブジェクトです.
注意ajaxSetUp({})には括弧が必要です
9 ajaxStart()およびajaxStop()メソッドの使用
ajaxStart()とajaxStop()メソッドは、Ajaxイベントをバインドします.
ajaxStart()メソッドは、Ajaxリクエストが発行される前に関数をトリガするために使用されます.
ajaxStop()メソッドは、Ajaxリクエストが完了した後に関数をトリガするために使用されます.呼び出し形式は次のとおりです.
$(selector).ajaxStart(function()と$(selector).ajaxStop(function())
このうち、両方のメソッドのカッコはバインドされた関数です.
Ajaxリクエストを送信する前にajaxStart()メソッドバインドを実行する関数
、リクエストが成功したらajaxStop()メソッドバインドの関数を実行します.
1 load()メソッドを使用した非同期要求データ
load(url,[data],[callback])---》
パラメータurlはロードサーバアドレスであり、
オプションdataパラメータが要求時に送信されるデータであり、
callbackパラメータは、データリクエストが成功した後に実行されるコールバック関数です.
load()メソッドを使用して、Ajaxからサーバのデータのロードを要求します.
返されたデータを指定した要素に配置します.呼び出し形式は次のとおりです.
//dataは省略できます
$(function () {
$("#btnShow").bind("click", function () {
var $this = $(this);
$("ul")
.html("<img src='Images/Loading.gif' alt=''/>")
.load("Data/fruit.html",function(){
$this.attr("disabled", "true");
});
})
});2 getJSON()メソッドを使用してJSON形式データを非同期でロードする
jQuery.getJSON(url,[data],[callback])または$.getJSON(url,[data],[callback])
ここでurlパラメータは、jsonフォーマットファイルのロードを要求するサーバアドレスであり、
オプションdataパラメータが要求時に送信されるデータであり、
callbackパラメータは、データリクエストが成功した後に実行されるコールバック関数です.
//getJSON()メソッドでAjax非同期リクエストで、
サーバのデータを取得し、取得したデータを解析してページに表示します.呼び出し形式は次のとおりです.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> getJSON() JSON </title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="divtest">
<div class="title">
<span class="fl"> </span>
<span class="fr">
<input id="btnShow" type="button" value=" " />
</span>
</div>
<ul></ul>
</div>
<script type="text/javascript">
$(function () {
$("#btnShow").bind("click", function () {
var $this = $(this);
$.getJSON("http://www.imooc.com/data/sport.json",function(data){
$this.attr("disabled", "true");
$.each(data, function (index, sport) {
$("ul").append("<li>" +index+ sport["name"] + "</li>");
});
});
})
});
</script>
</body>
</html>3 getScript()メソッドを使用してjsファイルを非同期でロードして実行する
getScript()メソッドを使用して、サーバ内のJavaScript形式のファイルを非同期で要求して実行します.呼び出し形式は次のとおりです.
jQuery.getScript(url,[callback])または$.getScript(url,[callback])
後の点を忘れないように注意してください.
<script type="text/javascript">
$(function () {
$("#btnShow").bind("click", function () {
var $this = $(this);
$.getScript("http://www.imooc.com/data/sport_f.js",function(data) {
$each(data,function(index,sport){
$("ul").append("<li>"+sport["name"]+"</li>");
})
$this.attr("disabled", "true");
});
})
});
</script>
4 get()メソッドを使用してGET方式でサーバからデータを取得する
get()メソッドを使用する場合、GET方式でサーバにデータを要求し、メソッドのコールバック関数のパラメータで要求されたデータを返します.その呼び出しフォーマットは次のとおりです.
$.get(url,[callback])
例えば、「ロード」ボタンをクリックすると、get()メソッドがサーバの1つに呼び出される.phpファイルはGET方式でデータを要求し、返されたデータの内容を次の図のようにページに表示します.
<script type="text/javascript">
$(function () {
$("#btnShow").bind("click", function () {
var $this = $(this);
$.get("http://www.imooc.com/data/info_f.php",function(data){
$this.attr("disabled", "true");
$("ul").append("<li> ：" + data.name + "</li>");
$("ul").append("<li> ：" + data.say + "</li>");
}, "json");
})
});
</script>5 post()メソッドを使用してPOST方式でサーバからデータを送信する
Post()メソッドは、POST方式でサーバにデータを送信し、サーバがデータを受信した後、処理を行い、処理結果をページに戻すために使用されることが多く、呼び出しフォーマットは以下の通りである.
$.post(url,[data],[callback])
パラメータurlはサーバリクエストアドレス、オプションdataはサーバリクエスト時に送信されるデータ、オプションcallbackパラメータはリクエスト成功後に実行されるコールバック関数
<script type="text/javascript">
$(function () {
$("#btnCheck").bind("click", function () {
$.post("http://www.imooc.com/data/check_f.php",
{num:$("#txtNumber").val()},
function (data) {
$("ul").append("<li> <b> "
+ $("#txtNumber").val() + " </b> <b> "
+ data + " </b></li>");
});
})
});
</script>6 serialize()メソッドを使用してフォーム要素値をシーケンス化する
serialize()メソッドを使用して、フォーム内のname属性の要素値をシーケンス化します.
標準URL符号化テキスト文字列を生成し、ajaxリクエストに直接使用できます.その呼び出しフォーマットは以下の通りです.
$(selector).serialize()
selectorパラメータは、1つ以上のフォームの要素またはフォーム要素自体です.
<script type="text/javascript">
$(function () {
$("#btnAction").bind("click", function () {
$("#litest").html($("form").serialize())
})
})
</script>シーケンス化結果:Text 1=ttt&Select 1=0&Checkbox 1=on
7 ajax()メソッドを使用してサーバデータをロードする
ajax()メソッドを使用すると、サーバから返されたデータを取得するだけでなく、サーバにリクエストを送信して数値を渡すことができます.呼び出しフォーマットは次のとおりです.
jQuery.ajax([settings])または$.ajax([settings])
ここでパラメータsettingsはajaxリクエストを送信する際の構成オブジェクトであり、
このオブジェクトでは、
urlはサーバリクエストのパスを表し、
Dataはリクエスト時に渡されるデータであり、
DataTypeはサーバが返すデータ型であり、
successはリクエストが成功した実行のコールバック関数であり、typeはデータリクエストを送信する方法であり、デフォルトはgetである.
<script type="text/javascript">
$(function () {
$("#btnCheck").bind("click", function () {
$.ajax({
url:"http://www.imooc.com/data/check.php",
data: { num: $("#txtNumber").val() },
dataType:"text",
success: function (data) {
$("ul").append("<li> <b> "
+ $("#txtNumber").val() + " </b> <b> "
+ data + " </b></li>");
}
});
})
});
</script>8 ajaxSetup()メソッドを使用してグローバルAjaxのデフォルトオプションを設定する
ajaxSetup()メソッドを使用して、Ajaxリクエストのグローバルオプション値を設定します.
設定が完了すると、後のAjaxリクエストにこれらのオプション値を追加する必要はありません.呼び出しフォーマットは次のとおりです.
jQuery.ajaxSetup([options])または$.ajaxSetup([options])
オプションoptionsパラメータは、Ajaxリクエスト時のグローバルオプション値を設定するオブジェクトです.
注意ajaxSetUp({})には括弧が必要です
<script type="text/javascript">
$(function () {
$.ajaxSetup({
dataType:"text",
success:function(data){
$("ul").append("<li> <b> "
+ $("#txtNumber").val() + " </b> <b> "
+ data + " </b></li>");
}
});
$("#btnShow_1").bind("click", function () {
$.ajax({
data: { num: $("#txtNumber").val() },
url: "http://www.imooc.com/data/check.php"
});
})
$("#btnShow_2").bind("click", function () {
$.ajax({
data: { num: $("#txtNumber").val() },
url: "http://www.imooc.com/data/check_f.php"
});
})
});9 ajaxStart()およびajaxStop()メソッドの使用
ajaxStart()とajaxStop()メソッドは、Ajaxイベントをバインドします.
ajaxStart()メソッドは、Ajaxリクエストが発行される前に関数をトリガするために使用されます.
ajaxStop()メソッドは、Ajaxリクエストが完了した後に関数をトリガするために使用されます.呼び出し形式は次のとおりです.
$(selector).ajaxStart(function()と$(selector).ajaxStop(function())
このうち、両方のメソッドのカッコはバインドされた関数です.
Ajaxリクエストを送信する前にajaxStart()メソッドバインドを実行する関数
、リクエストが成功したらajaxStop()メソッドバインドの関数を実行します.
<script type="text/javascript">
$(function () {
$("#divload").ajaxStart(function(){
$(this).html(" ...");
});
$("#divload").ajaxStop(function(){
$(this).html(" ！");
});
$("#btnShow").bind("click", function () {
var $this = $(this);
$.ajax({
url: "http://www.imooc.com/data/info_f.php",
dataType: "json",
success: function (data) {
$this.attr("disabled", "true");
$("ul").append("<li> ：" + data.name + "</li>");
$("ul").append("<li> ：" + data.say + "</li>");
}
});
})
});
</script>